formatting files, removing unused app sidebar

src/lib/components/app-sidebar.svelte

@@ -1,198 +0,0 @@
-<script lang="ts" module>
-	// sample data
-	const data = {
-		versions: ["1.0.1", "1.1.0-alpha", "2.0.0-beta1"],
-		navMain: [
-			{
-				title: "Getting Started",
-				url: "#",
-				items: [
-					{
-						title: "Installation",
-						url: "#",
-					},
-					{
-						title: "Project Structure",
-						url: "#",
-					},
-				],
-			},
-			{
-				title: "Building Your Application",
-				url: "#",
-				items: [
-					{
-						title: "Routing",
-						url: "#",
-					},
-					{
-						title: "Data Fetching",
-						url: "#",
-						isActive: true,
-					},
-					{
-						title: "Rendering",
-						url: "#",
-					},
-					{
-						title: "Caching",
-						url: "#",
-					},
-					{
-						title: "Styling",
-						url: "#",
-					},
-					{
-						title: "Optimizing",
-						url: "#",
-					},
-					{
-						title: "Configuring",
-						url: "#",
-					},
-					{
-						title: "Testing",
-						url: "#",
-					},
-					{
-						title: "Authentication",
-						url: "#",
-					},
-					{
-						title: "Deploying",
-						url: "#",
-					},
-					{
-						title: "Upgrading",
-						url: "#",
-					},
-					{
-						title: "Examples",
-						url: "#",
-					},
-				],
-			},
-			{
-				title: "API Reference",
-				url: "#",
-				items: [
-					{
-						title: "Components",
-						url: "#",
-					},
-					{
-						title: "File Conventions",
-						url: "#",
-					},
-					{
-						title: "Functions",
-						url: "#",
-					},
-					{
-						title: "next.config.js Options",
-						url: "#",
-					},
-					{
-						title: "CLI",
-						url: "#",
-					},
-					{
-						title: "Edge Runtime",
-						url: "#",
-					},
-				],
-			},
-			{
-				title: "Architecture",
-				url: "#",
-				items: [
-					{
-						title: "Accessibility",
-						url: "#",
-					},
-					{
-						title: "Fast Refresh",
-						url: "#",
-					},
-					{
-						title: "Next.js Compiler",
-						url: "#",
-					},
-					{
-						title: "Supported Browsers",
-						url: "#",
-					},
-					{
-						title: "Turbopack",
-						url: "#",
-					},
-				],
-			},
-			{
-				title: "Community",
-				url: "#",
-				items: [
-					{
-						title: "Contribution Guide",
-						url: "#",
-					},
-				],
-			},
-		],
-	};
-</script>
-
-<script lang="ts">
-	import SearchForm from "./search-form.svelte";
-	import VersionSwitcher from "./version-switcher.svelte";
-	import * as Collapsible from "$lib/components/ui/collapsible/index.js";
-	import * as Sidebar from "$lib/components/ui/sidebar/index.js";
-	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
-	import type { ComponentProps } from "svelte";
-
-	let { ref = $bindable(null), ...restProps }: ComponentProps<typeof Sidebar.Root> = $props();
-</script>
-
-<Sidebar.Root bind:ref {...restProps}>
-	<Sidebar.Header>
-		<VersionSwitcher versions={data.versions} defaultVersion={data.versions[0]} />
-		<SearchForm />
-	</Sidebar.Header>
-	<Sidebar.Content class="gap-0">
-		<!-- We create a collapsible SidebarGroup for each parent. -->
-		{#each data.navMain as item (item.title)}
-			<Collapsible.Root title={item.title} open class="group/collapsible">
-				<Sidebar.Group>
-					<Sidebar.GroupLabel
-						class="group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sm"
-					>
-						{#snippet child({ props })}
-							<Collapsible.Trigger {...props}>
-								{item.title}
-								<ChevronRightIcon
-									class="ms-auto transition-transform group-data-[state=open]/collapsible:rotate-90"
-								/>
-							</Collapsible.Trigger>
-						{/snippet}
-					</Sidebar.GroupLabel>
-					<Collapsible.Content>
-						<Sidebar.GroupContent>
-							<Sidebar.Menu>
-								{#each item.items as subItem (subItem.title)}
-									<Sidebar.MenuItem>
-										<Sidebar.MenuButton isActive={subItem.isActive}>
-											{#snippet child({ props })}
-												<a href={subItem.url} {...props}>{subItem.title}</a>
-											{/snippet}
-										</Sidebar.MenuButton>
-									</Sidebar.MenuItem>
-								{/each}
-							</Sidebar.Menu>
-						</Sidebar.GroupContent>
-					</Collapsible.Content>
-				</Sidebar.Group>
-			</Collapsible.Root>
-		{/each}
-	</Sidebar.Content>
-	<Sidebar.Rail />
-</Sidebar.Root>

src/lib/components/search-form.svelte

@@ -5,14 +5,21 @@
   import SearchIcon from "@lucide/svelte/icons/search";
   import type { HTMLFormAttributes } from "svelte/elements";
 
-	let { ref = $bindable(null), ...restProps }: WithElementRef<HTMLFormAttributes> = $props();
+  let {
+    ref = $bindable(null),
+    ...restProps
+  }: WithElementRef<HTMLFormAttributes> = $props();
 </script>
 
 <form bind:this={ref} {...restProps}>
   <Sidebar.Group class="py-0">
     <Sidebar.GroupContent class="relative">
       <Label for="search" class="sr-only">Search</Label>
-			<Sidebar.Input id="search" placeholder="Search the docs..." class="ps-8" />
+      <Sidebar.Input
+        id="search"
+        placeholder="Search the docs..."
+        class="ps-8"
+      />
       <SearchIcon
         class="pointer-events-none absolute start-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50"
       />

src/lib/components/version-switcher.svelte

@@ -5,7 +5,10 @@
   import ChevronsUpDownIcon from "@lucide/svelte/icons/chevrons-up-down";
   import GalleryVerticalEndIcon from "@lucide/svelte/icons/gallery-vertical-end";
 
-	let { versions, defaultVersion }: { versions: string[]; defaultVersion: string } = $props();
+  let {
+    versions,
+    defaultVersion,
+  }: { versions: string[]; defaultVersion: string } = $props();
 
   let selectedVersion = $state(defaultVersion);
 </script>
@@ -33,7 +36,10 @@
           </Sidebar.MenuButton>
         {/snippet}
       </DropdownMenu.Trigger>
-			<DropdownMenu.Content class="w-(--bits-dropdown-menu-anchor-width)" align="start">
+      <DropdownMenu.Content
+        class="w-(--bits-dropdown-menu-anchor-width)"
+        align="start"
+      >
         {#each versions as version (version)}
           <DropdownMenu.Item onSelect={() => (selectedVersion = version)}>
             v{version}

src/lib/theme-switcher.ts

@@ -1,27 +1,36 @@
-import { writable } from 'svelte/store';
+import { writable } from "svelte/store";
-import { browser } from '$app/environment';
+import { browser } from "$app/environment";
 
-export const themes = ['light', 'dark', 'latte', 'frappe', 'macchiato', 'mocha'] as const;
+export const themes = [
+  "light",
+  "dark",
+  "latte",
+  "frappe",
+  "macchiato",
+  "mocha",
+] as const;
 type Theme = (typeof themes)[number];
 
 const createThemeStore = () => {
-	const { subscribe, set } = writable<Theme>('light');
+  const { subscribe, set } = writable<Theme>("light");
 
   function applyTheme(theme: Theme) {
     if (browser) {
       document.documentElement.classList.remove(...themes);
       document.documentElement.classList.add(theme);
-			localStorage.setItem('theme', theme);
+      localStorage.setItem("theme", theme);
       set(theme);
     }
   }
 
   function initializeTheme() {
     if (browser) {
-			const storedTheme = localStorage.getItem('theme') as Theme | null;
+      const storedTheme = localStorage.getItem("theme") as Theme | null;
-			const systemTheme: Theme = window.matchMedia('(prefers-color-scheme: dark)').matches
+      const systemTheme: Theme = window.matchMedia(
-				? 'dark'
+        "(prefers-color-scheme: dark)"
-				: 'light';
+      ).matches
+        ? "dark"
+        : "light";
       const initialTheme = storedTheme ?? systemTheme;
       applyTheme(initialTheme);
     }
@@ -29,7 +38,7 @@ const createThemeStore = () => {
 
   function resetToSystem() {
     if (browser) {
-			localStorage.removeItem('theme');
+      localStorage.removeItem("theme");
       initializeTheme();
     }
   }
@@ -38,7 +47,7 @@ const createThemeStore = () => {
     subscribe,
     applyTheme,
     initializeTheme,
-		resetToSystem
+    resetToSystem,
   };
 };