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 { 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 }) {
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 (
<div className="flex">
<Sidebar />
<Sidebar items={sidebarItems} />
<main>{children}</main>
</div>
);

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

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