Toogether/Webapp
2
0
Fork 0
Code Issues Pull Requests Actions Releases Activity

feat: enhance sidebar component with dynamic item rendering and improved layout

Browse Source
This commit is contained in:
Rémi 2025-01-07 12:13:15 +01:00
parent 3ac29ae909
commit 919630524b
2 changed files with 53 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/app/admin/layout.tsx
View File

@ -1,9 +1,23 @@
import { Sidebar } from "@/app/components/Sidebar"; import { Sidebar } from "@/app/components/Sidebar";
import { FaDoorClosed, FaRegUser } from "react-icons/fa";
import { FiSettings } from "react-icons/fi";
import { IoMdStats } from "react-icons/io";
import { MdInbox } from "react-icons/md";
export default function Layout({ children }: { children: React.ReactNode }) { export default function Layout({ children }: { children: React.ReactNode }) {
const sidebarItems = [
[
{ href: "/admin", title: "Dashboard", icon: <IoMdStats /> },
{ href: "/admin/users", title: "Users", icon: <FaRegUser /> },
{ href: "/admin/classes", title: "Classes", icon: <MdInbox /> },
{ href: "/admin/rooms", title: "Rooms", icon: <FaDoorClosed /> },
],
[{ href: "/admin/settings", title: "Settings", icon: <FiSettings /> }],
];
return ( return (
<div className="flex"> <div className="flex">
<Sidebar /> <Sidebar items={sidebarItems} />
<main>{children}</main> <main>{children}</main>
</div> </div>
); );

89
src/app/components/Sidebar/index.tsx
View File

@ -1,16 +1,21 @@
"use client"; "use client";
import { Divider, Link } from "@nextui-org/react"; import { Divider, Link } from "@nextui-org/react";
import { useRouter } from "next/navigation"; import { usePathname, useRouter } from "next/navigation";
import { FaDoorClosed, FaRegUser } from "react-icons/fa";
import { FiSettings } from "react-icons/fi";
import { IoMdStats } from "react-icons/io";
import { MdInbox } from "react-icons/md";
import { ThemeSwitcher } from "../ThemeSwitcher/ThemeSwitcher"; import { ThemeSwitcher } from "../ThemeSwitcher/ThemeSwitcher";
import { SidebarItem } from "./item"; import { SidebarItem } from "./item";
export const Sidebar = () => { export const Sidebar = ({
items,
}: {
items: {
href: string;
title: string;
icon: React.ReactNode;
}[][];
}) => {
const router = useRouter(); const router = useRouter();
const pathName = usePathname();
return ( return (
<aside className="h-screen"> <aside className="h-screen">
@ -26,52 +31,34 @@ export const Sidebar = () => {
</li> </li>
</ul> </ul>
<section className="flex flex-col"> {items.map((group, index) => (
<ul className="flex flex-col gap-2"> <div key={index}>
<li className="hover:bg-foreground-300 rounded-md cursor-pointer"> <section className="flex flex-col">
<SidebarItem <ul className="flex flex-col gap-2">
href="/admin" {group.map((item, index) => (
title="Dashboard" <li
icon={<IoMdStats />} key={index}
/> className={`${
</li> pathName === item.href
<li className="hover:bg-foreground-300 rounded-md cursor-pointer"> ? "bg-foreground-300"
<SidebarItem : "hover:bg-foreground-200"
href="/admin/users" } rounded-md cursor-pointer`}
title="Users" >
icon={<FaRegUser />} <SidebarItem
/> href={item.href}
</li> title={item.title}
<li className="hover:bg-foreground-300 rounded-md cursor-pointer"> icon={item.icon}
<SidebarItem />
href="/admin/classes" </li>
title="Classes" ))}
icon={<MdInbox />} </ul>
/> </section>
</li>
<li className="hover:bg-foreground-300 rounded-md cursor-pointer">
<SidebarItem
href="/admin/rooms"
title="Rooms"
icon={<FaDoorClosed />}
/>
</li>
</ul>
</section>
<Divider className="bg-foreground-300 my-4" /> {index < items.length - 1 && (
<Divider className="bg-foreground-300 my-4" />
<section className="flex flex-col"> )}
<ul className="flex flex-col gap-2"> </div>
<li className="hover:bg-foreground-300 rounded-md cursor-pointer"> ))}
<SidebarItem
href="/admin/settings"
title="Settings"
icon={<FiSettings />}
/>
</li>
</ul>
</section>
<section className="mt-auto flex justify-between"> <section className="mt-auto flex justify-between">
<ThemeSwitcher /> <ThemeSwitcher />