Sidebar cleanup

Author: jaminwebdev

src/lib/components/sidebar/AppSidebar.svelte

@@ -1,8 +1,3 @@
-<script lang="ts" module>
-	import type { UserResource } from '@clerk/types';
-	import { data } from '@/lib/components/sidebar/sampleData';
-</script>
-
 <script lang="ts">
 	import NavMain from '@/lib/components/sidebar/NavMain.svelte';
 	import NavProjects from '@/lib/components/sidebar/NavProjects.svelte';
@@ -11,6 +6,9 @@
 	import * as Sidebar from '@/lib/components/ui/sidebar/index.js';
 	import type { ComponentProps } from 'svelte';
 
+	import type { UserResource } from '@clerk/types';
+	import { data } from '@/lib/components/sidebar/sampleData';
+
 	let {
 		ref = $bindable(null),
 		collapsible = 'icon',

src/lib/components/sidebar/NavMain.svelte

@@ -1,24 +1,26 @@
+<script lang="ts" module>
+	export type NavItems = {
+		title: string;
+		url: string;
+		icon?: any;
+		isActive?: boolean;
+		items?: {
+			title: string;
+			url: string;
+		}[];
+	};
+</script>
+
 <script lang="ts">
 	import * as Collapsible from '@/lib/components/ui/collapsible/index.js';
 	import * as Sidebar from '@/lib/components/ui/sidebar/index.js';
 	import ChevronRight from '@lucide/svelte/icons/chevron-right';
 
-	let {
-		items
-	}: {
-		items: {
-			title: string;
-			url: string;
-			// this should be `Component` after @lucide/svelte updates types
-			// eslint-disable-next-line @typescript-eslint/no-explicit-any
-			icon?: any;
-			isActive?: boolean;
-			items?: {
-				title: string;
-				url: string;
-			}[];
-		}[];
-	} = $props();
+	type Props = {
+		items: NavItems[];
+	};
+
+	let { items }: Props = $props();
 </script>
 
 <Sidebar.Group>

src/lib/components/sidebar/NavProjects.svelte

@@ -1,3 +1,11 @@
+<script lang="ts" module>
+	export type NavProject = {
+		name: string;
+		url: string;
+		icon: any;
+	};
+</script>
+
 <script lang="ts">
 	import * as DropdownMenu from '@/lib/components/ui/dropdown-menu/index.js';
 	import { useSidebar } from '@/lib/components/ui/sidebar/context.svelte.js';
@@ -7,17 +15,11 @@
 	import Forward from '@lucide/svelte/icons/forward';
 	import Trash2 from '@lucide/svelte/icons/trash-2';
 
-	let {
-		projects
-	}: {
-		projects: {
-			name: string;
-			url: string;
-			// This should be `Component` after @lucide/svelte updates types
-			// eslint-disable-next-line @typescript-eslint/no-explicit-any
-			icon: any;
-		}[];
-	} = $props();
+	type Props = {
+		projects: NavProject[];
+	};
+
+	let { projects }: Props = $props();
 
 	const sidebar = useSidebar();
 </script>

src/lib/components/sidebar/NavUser.svelte

@@ -1,3 +1,7 @@
+<script lang="ts" module>
+	export type NavUser = { name: string; email: string; avatar: string };
+</script>
+
 <script lang="ts">
 	import * as Avatar from '@/lib/components/ui/avatar/index.js';
 	import * as DropdownMenu from '@/lib/components/ui/dropdown-menu/index.js';
@@ -10,7 +14,11 @@
 	import LogOut from '@lucide/svelte/icons/log-out';
 	import Sparkles from '@lucide/svelte/icons/sparkles';
 
-	let { user }: { user: { name: string; email: string; avatar: string } } = $props();
+	type Props = {
+		user: NavUser;
+	};
+
+	let { user }: Props = $props();
 	const sidebar = useSidebar();
 </script>
 

src/lib/components/sidebar/TeamSwitcher.svelte

@@ -1,13 +1,23 @@
+<script lang="ts" module>
+	export type Team = {
+		name: string;
+		logo: any;
+		plan: string;
+	};
+</script>
+
 <script lang="ts">
 	import * as DropdownMenu from '@/lib/components/ui/dropdown-menu/index.js';
 	import * as Sidebar from '@/lib/components/ui/sidebar/index.js';
 	import { useSidebar } from '@/lib/components/ui/sidebar/index.js';
 	import ChevronsUpDown from '@lucide/svelte/icons/chevrons-up-down';
 	import Plus from '@lucide/svelte/icons/plus';
 
-	// This should be `Component` after @lucide/svelte updates types
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	let { teams }: { teams: { name: string; logo: any; plan: string }[] } = $props();
+	type Props = {
+		teams: Team[];
+	};
+
+	let { teams }: Props = $props();
 	const sidebar = useSidebar();
 
 	let activeTeam = $state(teams[0]);

src/lib/components/sidebar/sampleData.ts

@@ -124,7 +124,7 @@ export const data = {
 		{
 			name: 'Travel',
 			url: '#',
-			icon: Map
+			icon: icons.Map
 		}
 	]
 };