Fix menu, move to components

Kord-Extensions · Jul 30, 2024 · 490be77 · 490be77
1 parent bb5df03
commit 490be77
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 77 deletions.
diff --git a/src/lib/components/ui/navbar/index.ts b/src/lib/components/ui/navbar/index.ts
@@ -1,6 +1,8 @@
 import Base from "./navbar.svelte";
 import DrawerHeader from "./navbar-drawer-header.svelte";
 import DrawerLink from "./navbar-drawer-link.svelte";
+import DropdownItem from "./navbar-dropdown-item.svelte";
+import DropdownMenu from "./navbar-dropdown-menu.svelte";
 import Header from "./navbar-header.svelte";
 import Link from "./navbar-link.svelte";
 import IconLink from "./navbar-link-icon.svelte";
@@ -9,6 +11,8 @@ export default {
 	Base,
 	DrawerHeader,
 	DrawerLink,
+	DropdownItem,
+	DropdownMenu,
 	Header,
 	Link,
 	IconLink,

diff --git a/src/lib/components/ui/navbar/navbar-dropdown-item.svelte b/src/lib/components/ui/navbar/navbar-dropdown-item.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
+
+	export let href: string;
+	export let target: string = "_self";
+</script>
+
+<DropdownMenu.Item {href} {target} class="cursor-pointer flex flex-row text-lg items-center">
+	<slot name="icon" />
+
+	<slot />
+</DropdownMenu.Item>
diff --git a/src/lib/components/ui/navbar/navbar-dropdown-menu.svelte b/src/lib/components/ui/navbar/navbar-dropdown-menu.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
+
+	import { ChevronDown } from "lucide-svelte";
+
+	export let name: string;
+</script>
+
+<DropdownMenu.Root>
+	<DropdownMenu.Trigger asChild let:builder>
+		<Button builders={[builder]} variant="ghost"
+		        class="font-normal text-lg transition-colors">
+			<ChevronDown size="1.5rem" class="mr-2" />
+			{name}
+		</Button>
+	</DropdownMenu.Trigger>
+
+	<DropdownMenu.Content align="start" class="mt-2.5">
+		<DropdownMenu.Group>
+			<slot />
+		</DropdownMenu.Group>
+	</DropdownMenu.Content>
+</DropdownMenu.Root>
diff --git a/src/lib/components/ui/navbar/navbar.svelte b/src/lib/components/ui/navbar/navbar.svelte
@@ -154,95 +154,57 @@
 					Kord Extensions
 				</Navbar.Header>
 
-				<DropdownMenu.Root>
-					<DropdownMenu.Trigger asChild let:builder>
-						<Button builders={[builder]} variant="ghost" class="font-normal text-lg transition-colors">
-							<ChevronDown size="1.5rem" class="mr-2" />
-							Project
-						</Button>
-					</DropdownMenu.Trigger>
-
-					<DropdownMenu.Content align="start" class="mt-2.5">
-						<DropdownMenu.Group>
-							<DropdownMenu.Item class="cursor-pointer">
-								<a href="/blog" class="flex flex-row text-lg items-center">
-									<Glasses size="1.5rem" class="mr-2" />
-
-									Blog
-								</a>
-							</DropdownMenu.Item>
+				<Navbar.DropdownMenu name="Project">
+					<Navbar.DropdownItem href="/blog">
+						<Glasses class="mr-2" size="1.5rem" slot="icon" />
 
-							<DropdownMenu.Item class="cursor-pointer">
-								<a href="https://docs.kordex.dev" class="flex flex-row text-lg items-center">
-									<Book size="1.5rem" class="mr-2" />
+						Blog
+					</Navbar.DropdownItem>
 
-									Docs
-								</a>
-							</DropdownMenu.Item>
+					<Navbar.DropdownItem href="https://docs.kordex.dev">
+						<Book class="mr-2" size="1.5rem" slot="icon" />
 
-							<DropdownMenu.Item class="cursor-pointer">
-								<a href="https://ko-fi.com/gsc" class="flex flex-row text-lg items-center">
-									<DollarSign size="1.5rem" class="mr-2" />
+						Docs
+					</Navbar.DropdownItem>
 
-									Donate
-								</a>
-							</DropdownMenu.Item>
+					<Navbar.DropdownItem href="https://ko-fi.com/gsc">
+						<DollarSign class="mr-2" size="1.5rem" slot="icon" />
 
-							<DropdownMenu.Item class="cursor-pointer">
-								<a href="https://repo.kordex.dev" class="flex flex-row text-lg items-center">
-									<Boxes size="1.5rem" class="mr-2" />
+						Donate
+					</Navbar.DropdownItem>
 
-									Maven Repo
-								</a>
-							</DropdownMenu.Item>
+					<Navbar.DropdownItem href="https://repo.kordex.dev">
+						<Boxes class="mr-2" size="1.5rem" slot="icon" />
 
-							<DropdownMenu.Item class="cursor-pointer">
-								<a href="https://hosted.weblate.org/engage/kord-extensions/" class="flex flex-row text-lg items-center">
-									<Languages size="1.5rem" class="mr-2" />
+						Maven Repo
+					</Navbar.DropdownItem>
 
-									Translate
-								</a>
-							</DropdownMenu.Item>
-						</DropdownMenu.Group>
-					</DropdownMenu.Content>
-				</DropdownMenu.Root>
-
-				<DropdownMenu.Root>
-					<DropdownMenu.Trigger asChild let:builder>
-						<Button builders={[builder]} variant="ghost" class="font-normal text-lg transition-colors">
-							<ChevronDown size="1.5rem" class="mr-2" />
-							Community
-						</Button>
-					</DropdownMenu.Trigger>
-
-					<DropdownMenu.Content align="start" class="mt-2.5">
-						<DropdownMenu.Group>
-							<DropdownMenu.Item class="cursor-pointer">
-								<a href="https://discord.gg/nYzQWcjAmK" class="flex flex-row text-lg items-center">
-									<Discord class="mr-2" style="height: 1.5rem; width: 1.5rem;" />
-
-									Discord Server
-								</a>
-							</DropdownMenu.Item>
+					<Navbar.DropdownItem href="https://hosted.weblate.org/engage/kord-extensions/">
+						<Languages class="mr-2" size="1.5rem" slot="icon" />
 
-							<DropdownMenu.Item class="cursor-pointer">
-								<a href="https://github.com/orgs/Kord-Extensions/discussions" class="flex flex-row text-lg items-center">
-									<GitHub class="mr-2" style="height: 1.5rem; width: 1.5rem;" />
+						Translate
+					</Navbar.DropdownItem>
+				</Navbar.DropdownMenu>
 
-									GitHub Discussions
-								</a>
-							</DropdownMenu.Item>
+				<Navbar.DropdownMenu name="Community">
+					<Navbar.DropdownItem href="https://discord.gg/nYzQWcjAmK">
+						<Discord class="mr-2" style="height: 1.5rem; width: 1.5rem;" slot="icon" />
 
-							<DropdownMenu.Item class="cursor-pointer">
-								<a href="/projects" class="flex flex-row text-lg items-center">
-									<LayoutGrid size="1.5rem" class="mr-2" />
+						Discord Server
+					</Navbar.DropdownItem>
 
-									Projects
-								</a>
-							</DropdownMenu.Item>
-						</DropdownMenu.Group>
-					</DropdownMenu.Content>
-				</DropdownMenu.Root>
+					<Navbar.DropdownItem href="https://github.com/orgs/Kord-Extensions/discussions">
+						<GitHub class="mr-2" style="height: 1.5rem; width: 1.5rem;" slot="icon" />
+
+						GitHub Discussions
+					</Navbar.DropdownItem>
+
+					<Navbar.DropdownItem href="/projects">
+						<LayoutGrid class="mr-2" style="height: 1.5rem; width: 1.5rem;" slot="icon" />
+
+						Projects
+					</Navbar.DropdownItem>
+				</Navbar.DropdownMenu>
 
 				<Navbar.Link href="https://status.kordex.dev">
 					Status