Skip to content

Commit

Permalink
Merge pull request #148 from john4suresh/main
Browse files Browse the repository at this point in the history
Added translations for all pages
  • Loading branch information
indpurvesh authored May 25, 2024
2 parents 196d355 + 3536a61 commit 4a85860
Show file tree
Hide file tree
Showing 21 changed files with 2,893 additions and 2,183 deletions.
1 change: 1 addition & 0 deletions react-admin/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ const root = ReactDOM.createRoot(document.getElementById('root'));
i18next.init({
interpolation: {escapeValue:false},
lng: "en",
fallbackLng: "en",
resources: {
en: {
global: en_locales
Expand Down
106 changes: 61 additions & 45 deletions react-admin/src/layouts/partials/AppHeader.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,12 @@ import {Menu} from "@headlessui/react";
import _ from 'lodash'
import {Link, useNavigate} from "react-router-dom";
import {useEffect} from "react";
import { useTranslation } from "react-i18next";

function AppHeader() {
const adminUser = JSON.parse(localStorage.getItem("AUTH_ADMIN_USER"))
const navigate = useNavigate()
const [t] = useTranslation("global");

useEffect(() => {
if (!_.get(adminUser, 'id')) {
Expand All @@ -16,53 +18,67 @@ function AppHeader() {
})

return (
<header
className="h-16 py-2 flex shadow-lg px-4 fixed inset-y-0 md:sticky bg-gray-800 z-40">
<div className="flex w-full">
<a href="/admin"
className="text-white flex items-center space-x-2 group hover:text-white">
<div>
<img src={logo} alt="AvoRed Rust Cms Logo" className="h-12"/>
</div>
<header className="h-16 py-2 flex shadow-lg px-4 fixed inset-y-0 md:sticky bg-gray-800 z-40">
<div className="flex w-full">
<a
href="/admin"
className="text-white flex items-center space-x-2 group hover:text-white"
>
<div>
<img src={logo} alt="AvoRed Rust Cms Logo" className="h-12" />
</div>

<div>
<span className="text-2xl font-semibold">AvoRed</span>
<span className="text-xs block">Rust CMS</span>
</div>
</a>
<div className="ml-auto flex items-center">
<Menu as="div" className="ml-3 inline-block relative">
<Menu.Button className="flex items-center">
<div className="flex-shrink-0 w-10 h-10 relative">
<div className="p-1 bg-white rounded-full focus:outline-none focus:ring">
<img className="w-8 h-8 rounded-full"
src="https://placehold.it/250x250"
alt=""/>
</div>
</div>
<div className="p-2 text-left">
<h2 className="text-sm font-semibold text-white">{_.get(adminUser, 'full_name')}</h2>
<p className="text-xs text-gray-400">{_.get(adminUser, 'email')}</p>
</div>
</Menu.Button>
<Menu.Items as="div" className="absolute shadow-md z-30 py-1.5 rounded-md bg-white border border-gray-100 w-full">
<Menu.Item as="div">
<Link to={`/admin/admin-user-edit/${_(adminUser, 'id')}`}
className="flex items-center text-sm py-1.5 px-4 text-gray-600 hover:text-primary-500 hover:bg-gray-50">
Profile
</Link>
</Menu.Item>
<Menu.Item as="div">
<Link to="/admin/logout"
className="flex items-center text-sm py-1.5 px-4 text-gray-600 hover:text-primary-500 hover:bg-gray-50">
Logout
</Link>
</Menu.Item>
</Menu.Items>
</Menu>
</div>
<div>
<span className="text-2xl font-semibold">AvoRed</span>
<span className="text-xs block">Rust CMS</span>
</div>
</header>
</a>
<div className="ml-auto flex items-center">
<Menu as="div" className="ml-3 inline-block relative">
<Menu.Button className="flex items-center">
<div className="flex-shrink-0 w-10 h-10 relative">
<div className="p-1 bg-white rounded-full focus:outline-none focus:ring">
<img
className="w-8 h-8 rounded-full"
src="https://placehold.it/250x250"
alt=""
/>
</div>
</div>
<div className="p-2 text-left">
<h2 className="text-sm font-semibold text-white">
{_.get(adminUser, "full_name")}
</h2>
<p className="text-xs text-gray-400">
{_.get(adminUser, "email")}
</p>
</div>
</Menu.Button>
<Menu.Items
as="div"
className="absolute shadow-md z-30 py-1.5 rounded-md bg-white border border-gray-100 w-full"
>
<Menu.Item as="div">
<Link
to={`/admin/admin-user-edit/${_(adminUser, "id")}`}
className="flex items-center text-sm py-1.5 px-4 text-gray-600 hover:text-primary-500 hover:bg-gray-50"
>
{t("profile")}
</Link>
</Menu.Item>
<Menu.Item as="div">
<Link
to="/admin/logout"
className="flex items-center text-sm py-1.5 px-4 text-gray-600 hover:text-primary-500 hover:bg-gray-50"
>
{t("logout")}
</Link>
</Menu.Item>
</Menu.Items>
</Menu>
</div>
</div>
</header>
);
}

Expand Down
204 changes: 99 additions & 105 deletions react-admin/src/layouts/partials/AppSidebar.jsx
Original file line number Diff line number Diff line change
@@ -1,122 +1,116 @@
import FeatherIcon from "feather-icons-react";
import {Link, Outlet} from "react-router-dom";
import {Menu} from "@headlessui/react";
import { useTranslation } from "react-i18next";

function AppSidebar() {
const [t] = useTranslation("global");
return (
<div className="flex">
<div
className="w-64 max-h-screen top-16 pt-5 h-screen bg-gray-800 text-blue-100 fixed inset-y-0 left-0 transform transition duration-200 ease-in-out">
<nav
className="px-4 pt-4 scroller overflow-y-scroll max-h-[calc(100vh-64px)]"
<div className="flex">
<div className="w-64 max-h-screen top-16 pt-5 h-screen bg-gray-800 text-blue-100 fixed inset-y-0 left-0 transform transition duration-200 ease-in-out">
<nav className="px-4 pt-4 scroller overflow-y-scroll max-h-[calc(100vh-64px)]">
<ul className="flex flex-col space-y-2">
<li className="text-sm text-gray-500 ">
<Link
to={`/admin`}
className="flex items-center w-full py-1 px-2 rounded relative hover:text-white hover:bg-gray-700 "
>
<ul className="flex flex-col space-y-2">
<li className="text-sm text-gray-500 ">
<Link to={`/admin`}
className="flex items-center w-full py-1 px-2 rounded relative hover:text-white hover:bg-gray-700 ">
<div className="pr-2">
<FeatherIcon className="h-4 w-4" icon="anchor"/>
</div>
<div>Dashboard</div>
</Link>
</li>
<div className="pr-2">
<FeatherIcon className="h-4 w-4" icon="anchor" />
</div>
<div>{t("sidebar.dashboard")}</div>
</Link>
</li>

<div
className="section border-b pt-4 mb-4 text-xs text-gray-600 border-gray-700 pb-1 pl-3">
Content Manager
</div>
<div className="section border-b pt-4 mb-4 text-xs text-gray-600 border-gray-700 pb-1 pl-3">
{t("sidebar.content_manager")}
</div>

<li className="text-sm text-gray-500 ">
<Link
className="flex items-center w-full py-1 px-2 rounded relative hover:text-white hover:bg-gray-700"
to={`/admin/page`}
>
<div className="pr-2">
<FeatherIcon className="h-4 w-4" icon="anchor" />
</div>
<div>{t("sidebar.page")}</div>
</Link>

<li className="text-sm text-gray-500 ">
<Link
className="flex items-center w-full py-1 px-2 rounded relative hover:text-white hover:bg-gray-700"
to={`/admin/page`}>
<div className="pr-2">
<FeatherIcon className="h-4 w-4" icon="anchor"/>
</div>
<div>Page</div>
</Link>

<Link to={`admin/component`}
className="flex items-center w-full py-1 px-2 mt-3 rounded relative hover:text-white hover:bg-gray-700 ">
<div className="pr-2">
<FeatherIcon className="h-4 w-4" icon="compass"/></div>
<div>Components</div>
</Link>
<Link to={`/admin/asset`}
className="flex items-center w-full py-1 px-2 mt-3 rounded relative hover:text-white hover:bg-gray-700">
<div className="pr-2">
<FeatherIcon className="h-4 w-4" icon="image"/>
</div>
<div>
Assets Manager
</div>
</Link>
</li>


<div
className="section border-b pt-4 mb-4 text-xs text-gray-600 border-gray-700 pb-1 pl-3">
Managment
</div>

<Menu as="li" className="text-sm text-gray-500">
<Menu.Button
className="flex items-center w-full py-1 px-2 mt-3 rounded relative hover:text-white hover:bg-gray-700">
<div className="pr-2">
<FeatherIcon className="h-4 w-4" icon="anchor"/>
</div>
<div>Team</div>
<div
className="absolute right-1.5 transition-transform duration-300"
>
<FeatherIcon className="h-4 w-4" icon="chevron-down"/>
</div>
</Menu.Button>

<Menu.Items className="flex flex-col mt-2 pl-2 ml-3 border-l border-gray-700 space-y-1">
<Menu.Item as="li">
{({active}) => (
<Link to={`/admin/admin-user`}
className={`flex items-center w-full py-1 px-2 rounded relative hover:text-white hover:bg-gray-700`}
>
<div>
Admin User
</div>
</Link>
)}
</Menu.Item>
<Menu.Item as="li">
{({active}) => (
<Link to={`/admin/role`}
className={`flex items-center w-full py-1 px-2 rounded relative hover:text-white hover:bg-gray-700`}
>
<div>
Role
</div>
</Link>
)}
</Menu.Item>
<Menu.Item>
{({ active }) => (
<Link to={`/admin/setting`}
className={`flex items-center w-full py-1 px-2 rounded relative hover:text-white hover:bg-gray-700`}
>
Setting
</Link>
)}
</Menu.Item>
<Link
to={`admin/component`}
className="flex items-center w-full py-1 px-2 mt-3 rounded relative hover:text-white hover:bg-gray-700 "
>
<div className="pr-2">
<FeatherIcon className="h-4 w-4" icon="compass" />
</div>
<div>{t("sidebar.components")}</div>
</Link>
<Link
to={`/admin/asset`}
className="flex items-center w-full py-1 px-2 mt-3 rounded relative hover:text-white hover:bg-gray-700"
>
<div className="pr-2">
<FeatherIcon className="h-4 w-4" icon="image" />
</div>
<div>{t("sidebar.assets_manager")}</div>
</Link>
</li>

</Menu.Items>
</Menu>
<div className="section border-b pt-4 mb-4 text-xs text-gray-600 border-gray-700 pb-1 pl-3">
{t("sidebar.management")}
</div>

<Menu as="li" className="text-sm text-gray-500">
<Menu.Button className="flex items-center w-full py-1 px-2 mt-3 rounded relative hover:text-white hover:bg-gray-700">
<div className="pr-2">
<FeatherIcon className="h-4 w-4" icon="anchor" />
</div>
<div>{t("sidebar.team")}</div>
<div className="absolute right-1.5 transition-transform duration-300">
<FeatherIcon className="h-4 w-4" icon="chevron-down" />
</div>
</Menu.Button>

</ul>
</nav>
</div>
<Outlet/>
<Menu.Items className="flex flex-col mt-2 pl-2 ml-3 border-l border-gray-700 space-y-1">
<Menu.Item as="li">
{({ active }) => (
<Link
to={`/admin/admin-user`}
className={`flex items-center w-full py-1 px-2 rounded relative hover:text-white hover:bg-gray-700`}
>
<div>{t("sidebar.admin_user")}</div>
</Link>
)}
</Menu.Item>
<Menu.Item as="li">
{({ active }) => (
<Link
to={`/admin/role`}
className={`flex items-center w-full py-1 px-2 rounded relative hover:text-white hover:bg-gray-700`}
>
<div>{t("sidebar.role")}</div>
</Link>
)}
</Menu.Item>
<Menu.Item>
{({ active }) => (
<Link
to={`/admin/setting`}
className={`flex items-center w-full py-1 px-2 rounded relative hover:text-white hover:bg-gray-700`}
>
{t("sidebar.setting")}
</Link>
)}
</Menu.Item>
</Menu.Items>
</Menu>
</ul>
</nav>
</div>
);
<Outlet />
</div>
);
}

export default AppSidebar;
Loading

0 comments on commit 4a85860

Please sign in to comment.