Merge pull request #89 from rajnandan1/nav-responsive

fix(nav): made nav bar responsive
rajnandan1 · May 27, 2024 · 3264e86 · 3264e86
2 parents a267c40 + 5767f2d
commit 3264e86
Showing 1 changed file with 44 additions and 25 deletions.
diff --git a/src/lib/components/nav.svelte b/src/lib/components/nav.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { Button } from "$lib/components/ui/button";
 	import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
-	import { Languages } from "lucide-svelte";
+	import { Languages, Menu } from "lucide-svelte";
 	import { base } from "$app/paths";
 	export let data;
 	let defaultLocaleKey = data.selectedLang;
@@ -31,8 +31,7 @@
 
 <header class="relative z-50 w-full">
 	<div class="container flex h-14 items-center">
-		<div class="blurry-bg mr-4 flex w-full justify-between">
-			<a
+		<a
 				href={data.site.home ? data.site.home : base}
 				class="mr-6 flex items-center space-x-2"
 			>
@@ -45,33 +44,53 @@
 					</span>
 				{/if}
 			</a>
+		<div class="blurry-bg flex w-full justify-end">
+			
 			{#if data.site.nav}
-				<nav class="flex flex-wrap items-center space-x-6 text-sm font-medium">
+				<nav class=" flex-wrap mr-4  items-center space-x-6 text-sm font-medium hidden md:flex">
 					{#each data.site.nav as navItem}
 						<a href={navItem.url}> {navItem.name} </a>
 					{/each}
-					{#if data.site.i18n && data.site.i18n.locales && Object.keys(data.site.i18n.locales).length > 1}
-						<DropdownMenu.Root>
-							<DropdownMenu.Trigger>
-								<Button variant="outline" size="sm">
-									<Languages size={14} class="mr-2" />
-									{defaultLocaleValue}
-								</Button>
-							</DropdownMenu.Trigger>
-							<DropdownMenu.Content>
-								<DropdownMenu.Group>
-									{#each Object.entries(allLocales) as [key, value]}
-										<DropdownMenu.Item
-											on:click={(e) => {
-												setLanguage(key);
-											}}>{value}</DropdownMenu.Item
-										>
-									{/each}
-								</DropdownMenu.Group>
-							</DropdownMenu.Content>
-						</DropdownMenu.Root>
-					{/if}
 				</nav>
+				<DropdownMenu.Root class="">
+					<DropdownMenu.Trigger class="mr-2 flex md:hidden">
+						<Button variant="outline" size="sm">
+							<Menu size={14}  />
+						</Button>
+					</DropdownMenu.Trigger>
+					<DropdownMenu.Content>
+						{#each data.site.nav as navItem}
+						<DropdownMenu.Group>
+							
+								<DropdownMenu.Item>
+									<a href={navItem.url}> {navItem.name} </a>
+								</DropdownMenu.Item>
+						
+						</DropdownMenu.Group>
+							{/each}
+					</DropdownMenu.Content>
+				</DropdownMenu.Root>
+			{/if}
+			{#if data.site.i18n && data.site.i18n.locales && Object.keys(data.site.i18n.locales).length > 1}
+				<DropdownMenu.Root>
+					<DropdownMenu.Trigger>
+						<Button variant="outline" size="sm">
+							<Languages size={14} class="mr-2" />
+							{defaultLocaleValue}
+						</Button>
+					</DropdownMenu.Trigger>
+					<DropdownMenu.Content>
+						<DropdownMenu.Group>
+							{#each Object.entries(allLocales) as [key, value]}
+								<DropdownMenu.Item
+									on:click={(e) => {
+										setLanguage(key);
+									}}>{value}</DropdownMenu.Item
+								>
+							{/each}
+						</DropdownMenu.Group>
+					</DropdownMenu.Content>
+				</DropdownMenu.Root>
 			{/if}
 		</div>
 	</div>