cleanup collapsible sidebar

content/guide/components.md

@@ -5,7 +5,7 @@ tagline: Guide
 ---
 
 <script>
-	import { Tabs, TabItem, Callout, Step, Steps } from '$lib/components'
+	import { Tabs, TabItem, Callout, Step, Steps, IconGrid } from '$lib/components'
 </script>
 
 The Svecosystem starter template ships with a few pre-built components that you can use within the docs. These components are built using [Svelte](https://svelte.dev), [Tailwind CSS](https://tailwindcss.com), and [shadcn-svelte](https://shadcn-svelte.com).
@@ -149,3 +149,19 @@ pnpm run dev
 ```
 
 </Steps>
+
+### Icons
+
+We use [Phosphor Icons](https://phosphoricons.com/) for most of our icons, except a few custom logos. You can use any of the icons in the library, however, they should be reexported from the `src/lib/icons/index.ts` file. The project exports a few icons by default, but you can add more as needed.
+
+The reasoning behind re-exporting the icons is for one, to allow us to easily switch icon libraries in the future if needed, and two, it improves the development server's performance by only importing the icons that are actually used in the project. If we were to import from `"phosphor-svelte"` directly, the entire icon library would be optimized by Vite, which would increase the development server's startup time.
+
+Here's what a re-export looks like:
+
+```ts title="src/lib/icons/index.ts"
+export { default as ArrowUpRight } from "phosphor-svelte/lib/ArrowUpRight";
+```
+
+Here's all the icons that are currently exported by default, and can be imported into your markdown files from `$lib/icons`:
+
+<IconGrid />

src/lib/components/icon-grid.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import * as Icon from "$lib/icons/index.js";
+
+	function getIcon(name: keyof typeof Icon) {
+		return Icon[name];
+	}
+
+	const iconKeys = Object.keys(Icon) as (keyof typeof Icon)[];
+</script>
+
+<div class="grid grid-cols-5 gap-4">
+	{#each iconKeys as icon}
+		<div class="flex flex-col justify-between gap-3 rounded-lg border border-border p-4">
+			<div class="flex items-center justify-center">
+				<svelte:component this={getIcon(icon)} class="size-6" />
+			</div>
+			<div class="text-center text-sm">{icon}</div>
+		</div>
+	{/each}
+</div>

src/lib/components/index.ts

@@ -4,3 +4,4 @@ export { default as CopyCodeButton } from "./copy-code-button.svelte";
 export * from "./tabs/index.js";
 export { default as Step } from "./step.svelte";
 export { default as Steps } from "./steps.svelte";
+export { default as IconGrid } from "./icon-grid.svelte";

src/lib/components/layout/sidebar/sidebar-nav-item.svelte

@@ -7,20 +7,28 @@
 	import { CaretRight } from "$lib/icons/index.js";
 
 	export let navItem: SidebarNavItem;
+
 	$: currentPath = slugFromPathname($page.url.pathname);
 
 	let open = true;
+	$: notCollapsible = navItem.collapsible === false;
 </script>
 
 {#if navItem.items.length}
 	<Collapsible.Root bind:open>
+		{@const titleClasses =
+			"mb-6 inline-flex w-full items-center justify-between font-medium lg:mb-3 lg:text-sm"}
 		<ul class="space-y-6 border-l border-border lg:space-y-2">
-			<Collapsible.Trigger
-				class="mb-6 inline-flex w-full items-center justify-between font-medium lg:mb-3 lg:text-sm"
-			>
-				{navItem.title}
-				<CaretRight class={cn("size-4 transition-transform ", open && "rotate-90")} />
-			</Collapsible.Trigger>
+			{#if notCollapsible}
+				<h5 class={titleClasses}>
+					{navItem.title}
+				</h5>
+			{:else}
+				<Collapsible.Trigger class={titleClasses}>
+					{navItem.title}
+					<CaretRight class={cn("size-4 transition-transform ", open && "rotate-90")} />
+				</Collapsible.Trigger>
+			{/if}
 			<Collapsible.Content class="space-y-6 lg:space-y-2">
 				{#each navItem.items as item}
 					{@const isActive = item.href

src/lib/components/layout/sidebar/sidebar.svelte

@@ -5,7 +5,7 @@
 <div>
 	<div class="fixed hidden h-[calc(100vh-130px)] w-[220px] shrink-0 overflow-y-auto md:block">
 		<div class="pr-4">
-			<nav class="relative lg:text-sm lg:leading-6">
+			<nav class="relative pb-6 lg:text-sm lg:leading-6">
 				<SidebarNav />
 			</nav>
 		</div>

src/lib/config/navigation.ts

@@ -8,6 +8,7 @@ export type NavItem = {
 
 export type SidebarNavItem = NavItem & {
 	items: SidebarNavItem[];
+	collapsible?: boolean;
 };
 
 export type NavItemWithChildren = NavItem & {
@@ -41,6 +42,7 @@ export const navigation: Navigation = {
 	sidebar: [
 		{
 			title: "Guide",
+			collapsible: true,
 			items: [
 				{
 					title: "Introduction",

src/lib/icons/index.ts

@@ -1,11 +1,13 @@
 export { default as ArrowUpRight } from "phosphor-svelte/lib/ArrowUpRight";
 export { default as CaretRight } from "phosphor-svelte/lib/CaretRight";
+export { default as CaretLeft } from "phosphor-svelte/lib/CaretLeft";
+export { default as CaretUp } from "phosphor-svelte/lib/CaretLeft";
+export { default as CaretDown } from "phosphor-svelte/lib/CaretLeft";
 export { default as Check } from "phosphor-svelte/lib/Check";
 export { default as Circle } from "phosphor-svelte/lib/Circle";
 export { default as Code } from "phosphor-svelte/lib/Code";
-export { default as ComputerTower } from "phosphor-svelte/lib/ComputerTower";
 export { default as CopySimple } from "phosphor-svelte/lib/CopySimple";
-export { default as FileHTML } from "phosphor-svelte/lib/FileHtml";
+export { default as FileText } from "phosphor-svelte/lib/FileText";
 export { default as GitHubIcon } from "./github-icon.svelte";
 export { default as Info } from "phosphor-svelte/lib/Info";
 export { default as List } from "phosphor-svelte/lib/List";