conversion data

src/components/Sidebar.svelte

@@ -2,6 +2,27 @@
     import { goto } from "$app/navigation";
     import { onMount } from "svelte";
 
+    //  get local storage user
+    let user: any = null;
+    onMount(() => {
+        const userStr = localStorage.getItem("user");
+        if (userStr) {
+            user = JSON.parse(userStr);
+            if (user?.role) {
+                userRole = user.role;
+            }
+        }
+
+        activeUrl = window.location.pathname;
+
+        // Expand parent menu if current path matches sub menu
+        for (const item of fullMenu) {
+            if (item.sub?.some((s) => s.url === activeUrl)) {
+                openMenus[item.name] = true;
+            }
+        }
+    });
+
     type SubMenuItem = {
         name: string;
         icon: string;
@@ -13,18 +34,42 @@
         icon: string;
         url: string;
         sub?: SubMenuItem[];
+        roles?: string[]; // <- tambahkan ini
     };
 
-    let menuItems: MenuItem[] = [
-        { name: "Beranda", icon: "🏠", url: "/" },
-        { name: "Profile", icon: "🧑", url: "/profile" },
-        { name: "Issues", icon: "📂", url: "/backoffice/issue" },
-        { name: "Issue View", icon: "📂", url: "/backoffice/issue/view" },
-        { name: "Projects", icon: "📂", url: "/backoffice/project" },
+    // Contoh role yang sedang aktif (bisa dari Supabase atau session)
+    let userRole: "admin" | "user" | "guest" = "user";
+    // Semua menu
+    const fullMenu: MenuItem[] = [
+        {
+            name: "Beranda",
+            icon: "🏠",
+            url: "/",
+            roles: ["admin", "user", "guest"],
+        },
+        {
+            name: "Profile",
+            icon: "🧑",
+            url: "/profile",
+            roles: ["admin", "user"],
+        },
+        {
+            name: "Issues",
+            icon: "📂",
+            url: "/backoffice/issue",
+            roles: ["admin", "user"],
+        },
+        {
+            name: "Projects",
+            icon: "📂",
+            url: "/backoffice/project",
+            roles: ["admin"],
+        },
         {
             name: "Purchase Orders",
             icon: "📦",
             url: "/backoffice/purchaseorder",
+            roles: ["admin", "user"],
             sub: [
                 {
                     name: "Approval",
@@ -48,18 +93,18 @@
                 },
             ],
         },
-        { name: "Timesheets", icon: "📂", url: "/backoffice/timesheets" },
         {
-            name: "Timesheets View",
-            icon: "📂",
-            url: "/backoffice/timesheets/view",
+            name: "Users",
+            icon: "👤",
+            url: "/backoffice/account",
+            roles: ["admin"],
+        },
+        {
+            name: "Logout",
+            icon: "🚪",
+            url: "/logout",
+            roles: ["admin", "user", "guest"],
         },
-        { name: "Villa", icon: "📂", url: "/backoffice/villa" },
-        { name: "Inventories", icon: "📂", url: "/backoffice/inventories" },
-        { name: "Vendor", icon: "📂", url: "/backoffice/vendor" },
-        { name: "Booking", icon: "📂", url: "/backoffice/booking" },
-        { name: "Users", icon: "👤", url: "/backoffice/account" },
-        { name: "Logout", icon: "🚪", url: "/logout" },
     ];
 
     let activeUrl = "/";
@@ -95,7 +140,7 @@
         <p class="text-sm text-gray-500">Manage your application</p>
     </div>
     <ul class="p-2 space-y-1">
-        {#each menuItems as item}
+        {#each fullMenu as item}
             <li>
                 <a
                     href={item.url}