first commit

src/components/Sidebar.svelte

@@ -0,0 +1,46 @@
+<script>
+    let menuItems = [
+        { name: "Beranda", icon: "🏠", url: "/" },
+        { name: "Issues", icon: "📂", url: "/backoffice/issue" },
+        { name: "Issue Member", icon: "📂", url: "/backoffice/issuemember" },
+        { name: "Projects", icon: "📂", url: "/backoffice/project" },
+        {
+            name: "Purchase Orders",
+            icon: "📂",
+            url: "/backoffice/purchaseorder",
+        },
+        { name: "Timesheets", icon: "📂", url: "/backoffice/timesheets" },
+        { name: "Villa", icon: "📂", url: "/backoffice/villa" },
+        { name: "Inventories", icon: "📂", url: "/backoffice/inventories" },
+        { name: "Vendor", icon: "📂", url: "/backoffice/vendor" },
+        { name: "Booking", icon: "📂", url: "/backoffice/booking" },
+    ];
+
+    let active = "Purchase Orders";
+</script>
+
+<div class="w-64 h-screen bg-white border-r shadow-sm">
+    <div class=" p-8 border-b">
+        <h1 class="text-xl font-semibold text-gray-800">Backoffice</h1>
+        <p class="text-sm text-gray-500">Manage your application</p>
+    </div>
+    <ul class="p-2 space-y-1">
+        {#each menuItems as item}
+            <li>
+                <a
+                    href={item.url}
+                    class={`flex items-center gap-2 px-4 py-2 rounded transition-colors duration-150
+              ${
+                  active === item.name
+                      ? "bg-blue-100 text-blue-600 font-semibold"
+                      : "text-gray-700 hover:bg-blue-50"
+              }`}
+                    on:click={() => (active = item.name)}
+                >
+                    <span class="text-xl">{item.icon}</span>
+                    <span class="truncate">{item.name}</span>
+                </a>
+            </li>
+        {/each}
+    </ul>
+</div>