roles menu

components/form/login.tsx

@@ -72,6 +72,9 @@ export default function Login() {
         Cookies.set("ufne", profile?.data?.data?.fullname, {
           expires: 1,
         });
+        Cookies.set("ulie", profile?.data?.data?.userLevelGroup, {
+          expires: 1,
+        });
         Cookies.set("username", profile?.data?.data?.username, {
           expires: 1,
         });

components/layout/sidebar/sidebar.tsx

@@ -56,6 +56,67 @@ interface SidebarProps {
   updateSidebarData: (newData: boolean) => void;
 }
 
+const sidebarOtherRole = [
+  {
+    id: 1,
+    name: "Dashboard",
+    moduleId: 652,
+    moduleName: "Dashboard",
+    modulePathUrl: "/admin/dashboard",
+    isGroup: true,
+    parentId: -1,
+    icon: "dashboard",
+    position: 1,
+    statusId: 1,
+    childMenu: [],
+    statusName: "Active",
+    childModule: null,
+  },
+  {
+    id: 2,
+    name: "Dashboard",
+    moduleId: 652,
+    moduleName: "Dashboard",
+    modulePathUrl: "/admin/dashboard",
+    parentId: -1,
+    icon: <DashboardIcon />,
+    position: 1,
+    statusId: 1,
+    childMenu: [],
+    statusName: "Active",
+    childModule: null,
+  },
+  {
+    id: 3,
+    name: "Apps",
+    moduleId: 652,
+    moduleName: "Dashboard",
+    modulePathUrl: "/admin/basic",
+    isGroup: true,
+    parentId: -1,
+    icon: "table",
+    position: 1,
+    statusId: 1,
+    childMenu: [],
+    statusName: "Active",
+    childModule: null,
+  },
+  {
+    id: 4,
+    name: "Artikel",
+    moduleId: 652,
+    moduleName: "Dashboard",
+    modulePathUrl: "/admin/article",
+    parentId: -1,
+    icon: <ArticleIcon size={24} />,
+    position: 1,
+    statusId: 1,
+    childMenu: [],
+    statusName: "Active",
+    childModule: null,
+  },
+];
+
 const sideBarDummyData = [
   {
     id: 1,
@@ -254,6 +315,7 @@ const Sidebar: React.FC<SidebarProps> = ({ updateSidebarData }) => {
   const token = Cookies.get("access_token");
   const username = Cookies.get("username");
   const isAuthenticated = Cookies.get("is_authenticated");
+  const roles = Cookies.get("ulie");
 
   useEffect(() => {
     if (!token) {
@@ -317,7 +379,7 @@ const Sidebar: React.FC<SidebarProps> = ({ updateSidebarData }) => {
           </div>
 
           <SidebarMenu>
-            {sideBarDummyData
+            {roles?.includes("mabes") || username?.includes("mabes")
               ? sideBarDummyData?.map((list: any, index: number) =>
                   list.isGroup ? (
                     <p
@@ -391,7 +453,79 @@ const Sidebar: React.FC<SidebarProps> = ({ updateSidebarData }) => {
                     />
                   )
                 )
-              : ""}
+              : sidebarOtherRole?.map((list: any, index: number) =>
+                  list.isGroup ? (
+                    <p
+                      key={list.id}
+                      className={`font-bold mr-4 text-white ${
+                        !isOpen ? "text-center" : ""
+                      }`}
+                    >
+                      {isOpen ? list.name : "..."}
+                    </p>
+                  ) : list.childMenu?.length < 1 ? (
+                    isOpen ? (
+                      <Link key={list.id} href={list.modulePathUrl}>
+                        {/* <div
+                          className={`px-3.5 py-2 mr-4 rounded-lg hover:bg-zinc-400 dark:hover:text-zinc-600 flex flex-row gap-2 ${
+                            pathname.includes(list.modulePathUrl)
+                              ? "bg-zinc-600 dark:bg-zinc-300 text-zinc-300 dark:text-zinc-500 font-bold"
+                              : "text-zinc-600 dark:text-zinc-400"
+                          }`}
+                        > */}
+                        <div
+                          className={`px-3.5 py-2 mr-4 rounded-lg  flex flex-row gap-2 ${
+                            pathname.includes(list.modulePathUrl)
+                              ? "bg-white text-black font-bold"
+                              : "text-white hover:bg-gray-200 hover:text-black"
+                          }`}
+                        >
+                          {list.icon} {isOpen && list.name}
+                        </div>
+                      </Link>
+                    ) : (
+                      <Tooltip
+                        content={list.name}
+                        placement="right"
+                        delay={0}
+                        closeDelay={0}
+                      >
+                        <Link key={list.id} href={list.modulePathUrl}>
+                          <div
+                            className={`py-2 mr-4 rounded-lg hover:bg-zinc-400 dark:hover:text-zinc-600 flex flex-row justify-center gap-1 ${
+                              pathname.includes(list.modulePathUrl)
+                                ? "bg-zinc-300 text-zinc-500 font-bold hover:text-black"
+                                : "text-zinc-400 hover:text-black"
+                            }`}
+                          >
+                            {list.icon} {isOpen && list.name}
+                          </div>
+                        </Link>
+                      </Tooltip>
+                    )
+                  ) : (
+                    <SidebarCollapseItems
+                      key={list.id}
+                      title={list.name}
+                      isActive={pathname.includes(list.modulePathUrl)}
+                      icon={list.icon}
+                      items={[
+                        list?.childMenu?.map((item: any, index: number) => (
+                          <SidebarCollapseSubItems
+                            key={item.id + index}
+                            title={item?.name}
+                            isActive={pathname.includes(item.modulePathUrl)}
+                            isParentActive={pathname.includes(
+                              list.modulePathUrl
+                            )}
+                            path={item.modulePathUrl}
+                            icon={item.icon}
+                          />
+                        )),
+                      ]}
+                    />
+                  )
+                )}
           </SidebarMenu>
         </div>
         <div