first

src/routes/(app)/+layout.server.js

@@ -0,0 +1,8 @@
+import { redirect } from "@sveltejs/kit";
+
+export const load = async (event) => {
+  if (!event.locals.user) {
+    return redirect(302, "/login");
+  }
+  return { user: event.locals.user };
+};

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

@@ -0,0 +1,115 @@
+<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 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";
+  let { children, data } = $props();
+
+  const items = [
+    {
+      title: "Home",
+      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,
+    },
+  ];
+</script>
+
+<Sidebar.Provider>
+  <Sidebar.Root>
+    <Sidebar.Content>
+      <Sidebar.Group>
+        <Sidebar.GroupLabel>Floors</Sidebar.GroupLabel>
+        <Sidebar.GroupContent>
+          <Sidebar.Menu>
+            {#each items 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.Menu>
+        </Sidebar.GroupContent>
+      </Sidebar.Group>
+      <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.Menu>
+        </Sidebar.GroupContent>
+      </Sidebar.Group>
+    </Sidebar.Content>
+    <Sidebar.Footer>
+      <Sidebar.Menu>
+        <Sidebar.MenuItem>
+          <DropdownMenu.Root>
+            <DropdownMenu.Trigger>
+              {#snippet child({ props })}
+                <Sidebar.MenuButton
+                  {...props}
+                  class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                >
+                  {data.user.username}
+                  <ChevronUp class="ml-auto" />
+                </Sidebar.MenuButton>
+              {/snippet}
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content side="top" class="w-[--bits-dropdown-menu-anchor-width]">
+              <a href="/logout">
+                <DropdownMenu.Item class="cursor-pointer">Sign out</DropdownMenu.Item>
+              </a>
+            </DropdownMenu.Content>
+          </DropdownMenu.Root>
+        </Sidebar.MenuItem>
+      </Sidebar.Menu></Sidebar.Footer
+    >
+  </Sidebar.Root>
+  <main>
+    <Sidebar.Trigger />
+    {@render children?.()}
+  </main>
+</Sidebar.Provider>

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

@@ -0,0 +1,2 @@
+<h1>Welcome to SvelteKit</h1>
+<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>

src/routes/(app)/logout/+page.server.js

@@ -0,0 +1,12 @@
+import * as auth from "$lib/server/auth.js";
+import { fail, redirect } from "@sveltejs/kit";
+
+export async function load(event) {
+  if (!event.locals.session) {
+    return fail(401);
+  }
+  await auth.invalidateSession(event.locals.session.id);
+  auth.deleteSessionTokenCookie(event);
+
+  redirect(302, "/login");
+}

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

@@ -0,0 +1 @@
+<h1>Settings Page</h1>