create side bar

src/App.tsx

@@ -1,11 +1,53 @@
 import { NextUIProvider } from "@nextui-org/react";
 import "./styles/index.scss";
 import { ReactElement } from "react";
+import { Routes, Route } from "react-router-dom";
+import Main from "./pages/users/Main";
 
 function App(): ReactElement {
   return (
     <NextUIProvider>
-      <h1 className="text-red-500">ahihi</h1>
+      <Routes>
+        <Route
+          path="/dashboard"
+          element={
+            <div>
+              <Main />
+            </div>
+          }
+        >
+          <Route
+            path="sub1"
+            element={
+              <div>
+                <div>
+                  <h1>sub 1</h1>
+                </div>
+              </div>
+            }
+          />
+          <Route
+            path="sub2"
+            element={
+              <div>
+                <div>
+                  <h1>sub 3</h1>
+                </div>
+              </div>
+            }
+          />
+          <Route
+            path="sub3"
+            element={
+              <div>
+                <div>
+                  <h1>sub 3</h1>
+                </div>
+              </div>
+            }
+          />
+        </Route>
+      </Routes>
     </NextUIProvider>
   );
 }

src/components/ChevronDownIcon.tsx

@@ -0,0 +1,29 @@
+import React, { SVGProps } from "react";
+interface ChevronDownIconProps extends SVGProps<SVGSVGElement> {
+  strokeWidth?: number;
+}
+
+export const ChevronDownIcon: React.FC<ChevronDownIconProps> = ({
+  strokeWidth = 1.5,
+  ...otherProps
+}) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...otherProps}
+  >
+    <path
+      d="m19.92 8.95-6.52 6.52c-.77.77-2.03.77-2.8 0L4.08 8.95"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeMiterlimit={10}
+      strokeWidth={strokeWidth}
+    />
+  </svg>
+);

src/components/SearchIcon.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+interface SearchIconProps extends React.SVGProps<SVGSVGElement> {
+  width?: string;
+}
+export const SearchIcon: React.FC<SearchIconProps> = (props) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <path
+      d="M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+    />
+    <path
+      d="M22 22L20 20"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+    />
+  </svg>
+);

src/components/SideBar.tsx

@@ -0,0 +1,167 @@
+import { useState, ReactNode, FC } from "react";
+import { BsArrowLeftShort, BsChevronDown } from "react-icons/bs";
+import { MdDashboard, MdPermMedia } from "react-icons/md";
+import SubMenu from "../../src/components/SubMenu";
+import { FaDiagramProject } from "react-icons/fa6";
+import { SiPowerpages } from "react-icons/si";
+import { FaUserAlt } from "react-icons/fa";
+import { Link, useLocation } from "react-router-dom";
+import { Card, CardHeader, Image } from "@nextui-org/react";
+
+interface SideBarProps {
+  CustomComponent?: ReactNode;
+}
+export interface SubMenuItem {
+  title: string;
+  icon: ReactNode;
+  link: string;
+}
+
+export interface MenuItem {
+  title: string;
+  icon: ReactNode;
+  submenu?: boolean;
+  submenuItems?: SubMenuItem[];
+  spacing?: boolean;
+  link: string;
+}
+const SideBar: FC<SideBarProps> = () => {
+  const path = useLocation().pathname;
+
+  const [open, setOpen] = useState(true);
+  const [openSubMenus, setOpenSubMenus] = useState<number[]>([]);
+  const Menu: MenuItem[] = [
+    { title: "Dashboard", icon: <MdDashboard />, link: "hi" },
+    { title: "Pages", icon: <SiPowerpages />, link: "hi" },
+    {
+      title: "Media",
+      icon: <MdPermMedia />,
+      submenu: true,
+      spacing: true,
+      submenuItems: [
+        { title: "Submenu 1", icon: <MdDashboard />, link: "sub1" },
+        { title: "Submenu 2", icon: <SiPowerpages />, link: "sub2" },
+        { title: "Submenu 3", icon: <MdPermMedia />, link: "sub3" },
+      ],
+      link: "hi",
+    },
+    {
+      title: "User",
+      icon: <FaUserAlt />,
+      spacing: true,
+      submenu: true,
+      submenuItems: [
+        { title: "Submenu 1", icon: <MdDashboard />, link: "sub1" },
+        { title: "Submenu 2", icon: <SiPowerpages />, link: "sub2" },
+        { title: "Submenu 3", icon: <MdPermMedia />, link: "sub3" },
+      ],
+      link: "user",
+    },
+
+    {
+      title: "Projects",
+      submenu: true,
+      icon: <FaDiagramProject />,
+      spacing: true,
+      submenuItems: [
+        { title: "Submenu 1", icon: <MdDashboard />, link: "sub1" },
+      ],
+      link: "hi",
+    },
+  ];
+
+  const toggleSubMenu = (index: number): void => {
+    setOpenSubMenus((prevOpenSubMenus) =>
+      prevOpenSubMenus.includes(index)
+        ? prevOpenSubMenus.filter((i) => i !== index)
+        : [...prevOpenSubMenus, index],
+    );
+  };
+
+  return (
+    <div className={`mr-16 ${open ? "mr-36 w-96" : "w-28"} duration-300`}>
+      <div
+        className={`fixed h-screen bg-slate-50 p-5 pt-8 ${open ? "w-96 p-8" : "w-28"} duration-300`}
+      >
+        <BsArrowLeftShort
+          className={`absolute -right-8 top-9 cursor-pointer rounded-full border bg-white text-5xl font-black ${!open && "rotate-180"}`}
+          onClick={() => setOpen(!open)}
+        />
+
+        <Card className={`mt-4 ${!open && "w-16"}`}>
+          <CardHeader className={`flex gap-3 ${!open && "gap-0 p-0"}`}>
+            <Image
+              alt="nextui logo"
+              radius="sm"
+              src="https://i.pravatar.cc/150?u=a048581f4e29026701d"
+              className={`${!open && "w-16"}`}
+            />
+            <div className="flex flex-col">
+              <p className={` ${!open && "hidden scale-0"}`}>Trần Ngọc Tiến</p>
+              <p
+                className={`text-xs font-bold text-red-600 ${!open && "hidden scale-0"}`}
+              >
+                Admin
+              </p>
+              <p
+                className={`text-xs text-default-500 ${!open && "hidden scale-0"}`}
+              >
+                <i>tranngoctien29112003@gmail.com</i>
+              </p>
+            </div>
+          </CardHeader>
+        </Card>
+
+        <ul className="mt-8">
+          {Menu.map((item, index) => (
+            <div key={index} className="w-32">
+              {item.spacing ? (
+                <hr
+                  className={`${open ? "mt-2 w-72 font-extrabold" : "w-16"}`}
+                />
+              ) : (
+                ""
+              )}
+              <li
+                key={index}
+                className={`w-72 ${open && path.includes(item.link) ? "rounded-md bg-neutral-300 text-black" : ""} mt-2 grid cursor-pointer grid-cols-sidebar items-center justify-between gap-x-4 rounded-md p-2 px-5 text-sm hover:bg-neutral-300`}
+              >
+                <div>
+                  {" "}
+                  <span className="text-xl">{item.icon}</span>{" "}
+                </div>
+
+                <div>
+                  <Link to={item.link}>
+                    <b
+                      className={`flex-1 text-custom font-bold ${!open && "hidden"} ${path.includes(item.link) && "text-black"}`}
+                    >
+                      {item.title}
+                    </b>
+                  </Link>
+                </div>
+
+                {item.submenu && open && (
+                  <div>
+                    <BsChevronDown
+                      className={`ml-14 text-2xl ${openSubMenus.includes(index) ? "rotate-180" : ""}`}
+                      onClick={() => toggleSubMenu(index)}
+                    />
+                  </div>
+                )}
+              </li>
+              {item.submenu && open && (
+                <SubMenu
+                  data={item.submenuItems!}
+                  subMenuOpen={openSubMenus.includes(index)}
+                />
+              )}
+            </div>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default SideBar;

src/components/SubMenu.tsx

@@ -0,0 +1,38 @@
+import { FC, ReactNode } from "react";
+import { Link, useLocation } from "react-router-dom";
+interface SubMenuItem {
+  title: string;
+  icon: ReactNode;
+  link: string;
+}
+interface SubMenuProps {
+  subMenuOpen: boolean;
+  data: SubMenuItem[];
+}
+const SubMenu: FC<SubMenuProps> = ({ data, subMenuOpen }) => {
+  const path = useLocation().pathname;
+  return (
+    <div>
+      {subMenuOpen && (
+        <ul className="bg-transparent transition duration-1000 ease-in-out">
+          {data.map((subItem, subIndex) => (
+            <div
+              key={subIndex}
+              className={`mt-2 flex w-72 rounded-md hover:bg-neutral-300 ${path.includes(subItem.link) ? "rounded-md bg-neutral-300 text-black" : ""}`}
+            >
+              <span className="my-2 h-full pl-8 text-xl">{subItem.icon}</span>
+              <Link to={subItem.link}>
+                {" "}
+                <li className="my-2 rounded-md pl-8 text-sm font-bold">
+                  {subItem.title}
+                </li>
+              </Link>
+            </div>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default SubMenu;

src/components/TabList.tsx

@@ -0,0 +1,23 @@
+import React, { FC } from "react";
+import { Tabs, Tab } from "@nextui-org/react";
+interface TabListProps {
+  onRoleSelect: (role: string) => void;
+}
+const TabList: FC<TabListProps> = ({ onRoleSelect }): JSX.Element => {
+  const handleSelectionChange = (key: React.Key): void => {
+    onRoleSelect(key.toString());
+  };
+  return (
+    <div className="">
+      <Tabs
+        aria-label="Options"
+        onSelectionChange={(key: React.Key) => handleSelectionChange(key)}
+      >
+        <Tab key="" title="All" />
+        <Tab key="Designer" title="Employee" />
+        <Tab key="CEO" title="Ceo" />
+      </Tabs>
+    </div>
+  );
+};
+export default TabList;

src/main.tsx

@@ -1,9 +1,12 @@
 import App from "./App.tsx";
 import { createRoot } from "react-dom/client";
 import { StrictMode } from "react";
+import { BrowserRouter } from "react-router-dom";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </StrictMode>,
 );

src/pages/users/Main.tsx

@@ -0,0 +1,13 @@
+import { JSX } from "react";
+import SideBar from "../../components/SideBar";
+import { Outlet } from "react-router-dom";
+
+const Main = (): JSX.Element => {
+  return (
+    <div className="relative flex">
+      <SideBar />
+      <Outlet />
+    </div>
+  );
+};
+export default Main;