floors sidebar

src/routes/(app)/+layout.svelte

@@ -1,61 +1,51 @@
 <script>
   import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
   import * as Sidebar from "$lib/components/ui/sidebar/index.js";
-  import { ChevronUp, ChevronDown } from "lucide-svelte";
+  import { ChevronUp } from "lucide-svelte";
   import House from "lucide-svelte/icons/house";
-  import Inbox from "lucide-svelte/icons/inbox";
-  import Calendar from "lucide-svelte/icons/calendar";
-  import Search from "lucide-svelte/icons/search";
   import Settings from "lucide-svelte/icons/settings";
   import "../../app.css";
+  import { sidebarItems } from "@/stores/sidebarStore.ts";
   let { children, data } = $props();
 
   const items = [
     {
-      title: "Home",
+      number: 1,
       url: "/",
       icon: House,
     },
-    {
-      title: "Inbox",
-      url: "/",
-      icon: Inbox,
-    },
-    {
-      title: "Calendar",
-      url: "/",
-      icon: Calendar,
-    },
-    {
-      title: "Search",
-      url: "/",
-      icon: Search,
-    },
   ];
 
-  const settings = [
-    {
-      title: "Settings",
-      url: "settings",
-      icon: Settings,
-    },
-  ];
+  sidebarItems.set(items);
+
+  function getFloorName(n) {
+    switch (n) {
+      case 1:
+        return "1st floor";
+      case 2:
+        return "2nd floor";
+      case 3:
+        return "3rd floor";
+      default:
+        return n + "th floor";
+    }
+  }
 </script>
 
 <Sidebar.Provider>
-  <Sidebar.Root>
+  <Sidebar.Root collapsible="icon">
     <Sidebar.Content>
       <Sidebar.Group>
         <Sidebar.GroupLabel>Floors</Sidebar.GroupLabel>
         <Sidebar.GroupContent>
           <Sidebar.Menu>
-            {#each items as item (item.title)}
+            {#each $sidebarItems as item (item.number)}
               <Sidebar.MenuItem>
                 <Sidebar.MenuButton>
                   {#snippet child({ props })}
                     <a href={item.url} {...props}>
                       <item.icon />
-                      <span>{item.title}</span>
+                      <span>{getFloorName(item.number)}</span>
                     </a>
                   {/snippet}
                 </Sidebar.MenuButton>
@@ -67,18 +57,16 @@
       <Sidebar.Group>
         <Sidebar.GroupContent>
           <Sidebar.Menu>
-            {#each settings as item (item.title)}
-              <Sidebar.MenuItem>
-                <Sidebar.MenuButton>
-                  {#snippet child({ props })}
-                    <a href={item.url} {...props}>
-                      <item.icon />
-                      <span>{item.title}</span>
-                    </a>
-                  {/snippet}
-                </Sidebar.MenuButton>
-              </Sidebar.MenuItem>
-            {/each}
+            <Sidebar.MenuItem>
+              <Sidebar.MenuButton>
+                {#snippet child({ props })}
+                  <a href="/settings" {...props}>
+                    <Settings />
+                    <span>Settings</span>
+                  </a>
+                {/snippet}
+              </Sidebar.MenuButton>
+            </Sidebar.MenuItem>
           </Sidebar.Menu>
         </Sidebar.GroupContent>
       </Sidebar.Group>

src/routes/(app)/settings/+page.svelte

@@ -1 +1,23 @@
-<h1>Settings Page</h1>
+<script>
+  import { sidebarItems } from "@/stores/sidebarStore.ts";
+  import House from "lucide-svelte/icons/house";
+  import { get } from "svelte/store";
+
+  let i = 2;
+
+  function a() {
+    const result = {
+      number: i++,
+      url: "/",
+      icon: House,
+    };
+
+    sidebarItems.update((item) => {
+      item.push(result);
+      return item;
+    });
+    console.log(get(sidebarItems));
+  }
+</script>
+
+<button on:click={a}>a</button>

src/stores/sidebarStore.ts

@@ -0,0 +1,3 @@
+import { writable } from "svelte/store"
+
+export const sidebarItems = writable([]);

vite.config.js

@@ -1,6 +1,12 @@
 import { sveltekit } from "@sveltejs/kit/vite";
+import { fileURLToPath, URL } from "node:url";
 import { defineConfig } from "vite";
 
 export default defineConfig({
   plugins: [sveltekit()],
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./src", import.meta.url)), // Use '@' as an alias for 'src'
+    },
+  },
 });