Hafid NurandGitHub
a4c75770ae
* feat(backoffice): create a boilerplate page for Hackathon dashboard - Create an empty page for Hackathon dashboard - Comment out and hide the existing backoffice sidebar * feat(backoffice): Create a nested/dropdown sidebar list - Create a dropdown sidebar list - Show back the old navigation and group them - Make the sidebar responsive for mobile view * test datatable with mock data * base UI for Hackathon backoffice TODO: - Organize table schema for users, teams, and submissions management - Create API Contract for additional back-end endpoint * feat(hackathon): draft data table column & API Contract * update endpoint * feat(backoffice): update page hackathon user management - update data table component - update filtering & pagination - add modal display to edit and add user - hide notification icon in backoffice wrapper * feat(backoffice): add API contract for hackathon users * feat(backoffice): little adjustment in hackathon users management UI and API contract
57 lines
1.8 KiB
TypeScript
57 lines
1.8 KiB
TypeScript
import { FC, ReactElement, useState } from 'react';
|
|
import { Outlet } from 'react-router-dom';
|
|
import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
|
|
|
|
export const AppLayout: FC = (): ReactElement => {
|
|
const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
|
|
|
|
return (
|
|
<div className="bg-primary-50 min-h-screen flex justify-center">
|
|
<div className="bg-primary-50 min-h-screen w-full flex">
|
|
<BackofficeSidebar
|
|
isOpen={mobileSidebarOpen}
|
|
onClose={() => setMobileSidebarOpen(false)}
|
|
/>
|
|
<div className="flex-1 overflow-auto">
|
|
{/* Sticky top header */}
|
|
<header
|
|
className={
|
|
'lg:hidden sticky top-0 bg-white border-b border-primary-200 px-4 py-3 flex items-center gap-3 ' +
|
|
(mobileSidebarOpen ? 'z-0' : 'z-30')
|
|
}
|
|
>
|
|
{/* Mobile menu button (shown on small screens) */}
|
|
<button
|
|
type="button"
|
|
className="lg:hidden p-2 rounded-md hover:bg-gray-100 text-gray-700"
|
|
onClick={() => setMobileSidebarOpen(true)}
|
|
aria-label="Open sidebar"
|
|
>
|
|
<svg
|
|
className="w-5 h-5"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M4 6h16M4 12h16M4 18h16"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
<h1 className="text-p3 font-semibold text-primary-700">
|
|
IMPHNEN Backoffice
|
|
</h1>
|
|
</header>
|
|
|
|
<Outlet />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AppLayout;
|