Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(nav): made nav bar responsive #89

Merged
merged 1 commit into from
May 27, 2024
Merged

fix(nav): made nav bar responsive #89

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 44 additions & 25 deletions src/lib/components/nav.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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"
>
Expand All @@ -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>
Expand Down