vaporvee/template-sanity
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed some navbar issues

Browse Source
This commit is contained in:
Yannik
2025-08-19 00:52:55 +02:00
parent 6ec87aa20d
commit 9ac578f6f3
3 changed files with 53 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
template/apps/client/src/lib/components/navbar.svelte
View File

@@ -38,6 +38,7 @@
import { MoreHorizontal, ChevronDown, ChevronRight } from '@lucide/svelte'; import { MoreHorizontal, ChevronDown, ChevronRight } from '@lucide/svelte';
import { slide } from 'svelte/transition'; import { slide } from 'svelte/transition';
import { quintOut } from 'svelte/easing'; import { quintOut } from 'svelte/easing';
import Button from './ui/button/button.svelte';
interface Props { interface Props {
settings?: Settings; settings?: Settings;
@@ -127,11 +128,15 @@
</script> </script>
<nav class="bg-primary py-3"> <nav class="bg-primary py-3">
<div class="container md:mx-auto px-4 md:px-0"> <div class="container px-4 md:mx-auto md:px-0">
<div class="relative flex items-center"> <div class="relative flex items-center">
<div class="flex items-center"> <div class="flex items-center">
{#if settings} {#if settings}
<Logo {settings} class="text-white" /> <a href="/">
<Button variant="ghost" class="px-1">
<Logo {settings} class="text-white" />
</Button>
</a>
{:else} {:else}
<div class="text-lg font-semibold text-white">Logo</div> <div class="text-lg font-semibold text-white">Logo</div>
{/if} {/if}
@@ -149,15 +154,15 @@
<NavigationMenuItem data-navigation-menu-item> <NavigationMenuItem data-navigation-menu-item>
{#if item.url && !item.subitems} {#if item.url && !item.subitems}
<NavigationMenuLink <NavigationMenuLink
class={cn( class={cn('relative z-20 text-white transition-colors hover:text-white/80')}
'relative z-20 text-white hover:text-white/80 transition-colors'
)}
href={item.url} href={item.url}
> >
{item.name} {item.name}
</NavigationMenuLink> </NavigationMenuLink>
{:else if item.subitems} {:else if item.subitems}
<NavigationMenuTrigger class="relative z-20 text-white hover:text-white/80 transition-colors"> <NavigationMenuTrigger
class="relative z-20 text-white transition-colors hover:text-white/80"
>
{item.name} {item.name}
</NavigationMenuTrigger> </NavigationMenuTrigger>
<NavigationMenuContent <NavigationMenuContent
@@ -166,7 +171,7 @@
{#each item.subitems as subitem} {#each item.subitems as subitem}
<NavigationMenuLink <NavigationMenuLink
href={subitem.url} href={subitem.url}
class="block rounded-md px-4 py-2 text-white hover:text-white/80 transition-colors" class="block rounded-md px-4 py-2 text-white transition-colors hover:text-white/80"
> >
{subitem.name} {subitem.name}
</NavigationMenuLink> </NavigationMenuLink>
@@ -179,63 +184,72 @@
</div> </div>
</NavigationMenuRoot> </NavigationMenuRoot>
</div> </div>
<div class="ml-auto md:hidden">
<div class="ml-auto flex items-center">
<Sheet bind:open={mobileMenuOpen}> <Sheet bind:open={mobileMenuOpen}>
<SheetTrigger <SheetTrigger class="text-white md:hidden" aria-label="Toggle mobile menu">
class="rounded-md p-2 text-white transition-colors hover:bg-white/10 md:hidden" <Button variant="ghost" size="icon">
aria-label="Toggle mobile menu" <MoreHorizontal size={24} />
> </Button>
<MoreHorizontal size={24} />
</SheetTrigger> </SheetTrigger>
<SheetContent side="top" class="h-full w-full bg-primary border-primary"> <SheetContent side="top" class="bg-primary border-primary h-full w-full text-white">
<SheetHeader class="border-b border-white/20 pb-4"> <SheetHeader class="border-b border-white/20 pb-4">
<SheetTitle class="flex items-center justify-start text-white"> <SheetTitle class="flex items-center justify-start">
{#if settings} {#if settings}
<Logo {settings} class="text-white" /> <a href="/">
<Button variant="ghost" class="px-1">
<Logo {settings} class="text-white" />
</Button>
</a>
{:else} {:else}
<div class="text-lg font-semibold text-white">Navigation</div> <div class="text-lg font-semibold">Navigation</div>
{/if} {/if}
</SheetTitle> </SheetTitle>
</SheetHeader> </SheetHeader>
<div class="flex flex-col space-y-2 pt-6 relative"> <div class="relative flex flex-col space-y-2 pt-6">
{#each items as item, index} {#each items as item, index}
{#if item.url && !item.subitems} {#if item.url && !item.subitems}
<div class="relative"> <div class="relative">
{#if index === activeIndex}
<div class="absolute left-0 top-0 bottom-0 w-1 bg-white/20 rounded-r-md"></div>
{/if}
<a <a
href={item.url} href={item.url}
class="block rounded-md px-4 py-2 text-sm transition-colors text-white hover:text-white/80 {index === activeIndex ? 'text-white' : ''}" class={cn(
'mx-2 block rounded-md px-4 py-2 text-sm transition-colors hover:text-white/80',
index === activeIndex && 'bg-white/20'
)}
onclick={closeMobileMenu} onclick={closeMobileMenu}
> >
{item.name} {item.name}
</a> </a>
</div> </div>
{:else if item.subitems} {:else if item.subitems}
<div class="space-y-1 relative"> <div class="relative space-y-1">
{#if index === activeIndex} {#if index === activeIndex}
<div class="absolute left-0 top-0 bottom-0 w-1 bg-white/20 rounded-r-md"></div> <div
class="absolute bottom-0 left-0 top-0 w-1 rounded-r-md bg-white/20"
></div>
{/if} {/if}
<button <Button
class="w-full rounded-md px-4 py-2 text-left text-sm font-medium transition-all duration-200 flex items-center justify-between text-white hover:text-white/80" class="flex w-full items-center justify-between rounded-md px-4 py-2 text-left text-sm font-medium transition-all duration-200 hover:text-white/80"
onclick={() => toggleSubmenu(item.name)} onclick={() => toggleSubmenu(item.name)}
> >
<span>{item.name}</span> <span>{item.name}</span>
<div class="transition-transform duration-300 ease-out {expandedSubmenu === item.name ? 'rotate-90' : 'rotate-0'}"> <div
class="transition-transform duration-300 ease-out {expandedSubmenu ===
item.name
? 'rotate-90'
: 'rotate-0'}"
>
<ChevronRight size={16} /> <ChevronRight size={16} />
</div> </div>
</button> </Button>
{#if expandedSubmenu === item.name} {#if expandedSubmenu === item.name}
<div <div
class="ml-4 space-y-1" class="ml-4 space-y-1"
transition:slide={{ duration: 300, easing: quintOut }} transition:slide={{ duration: 300, easing: quintOut }}
> >
{#each item.subitems as subitem} {#each item.subitems as subitem}
<a <a
href={subitem.url} href={subitem.url}
class="block rounded-md px-6 py-2 text-sm transition-colors text-white/80 hover:text-white" class="block rounded-md px-6 py-2 text-sm text-white/80 transition-colors hover:text-white"
onclick={closeMobileMenu} onclick={closeMobileMenu}
> >
{subitem.name} {subitem.name}

4
template/apps/client/src/lib/components/ui/button/button.svelte
View File

@@ -4,7 +4,7 @@
import { type VariantProps, tv } from "tailwind-variants"; import { type VariantProps, tv } from "tailwind-variants";
export const buttonVariants = tv({ export const buttonVariants = tv({
base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", base: "focus-visible:border-ring cursor-pointer focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
variants: { variants: {
variant: { variant: {
default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90", default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
@@ -13,7 +13,7 @@
outline: outline:
"bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border", "bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border",
secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80", secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50", ghost: "hover:bg-white/10 hover:text-white",
link: "text-primary underline-offset-4 hover:underline", link: "text-primary underline-offset-4 hover:underline",
}, },
size: { size: {

6
template/apps/client/src/lib/components/ui/sheet/sheet-content.svelte
View File

@@ -24,6 +24,7 @@
import type { Snippet } from "svelte"; import type { Snippet } from "svelte";
import SheetOverlay from "./sheet-overlay.svelte"; import SheetOverlay from "./sheet-overlay.svelte";
import { cn, type WithoutChildrenOrChild } from "$lib/utils.js"; import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
import { buttonVariants } from "../button";
let { let {
ref = $bindable(null), ref = $bindable(null),
@@ -49,7 +50,10 @@
> >
{@render children?.()} {@render children?.()}
<SheetPrimitive.Close <SheetPrimitive.Close
class="ring-offset-background focus-visible:ring-ring rounded-xs focus-visible:outline-hidden absolute right-4 top-4 opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none" class={cn(
"ring-offset-background focus-visible:ring-ring rounded-xs focus-visible:outline-hidden absolute right-4 top-4 opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none",
buttonVariants({variant: "ghost", size: "icon"})
)}
> >
<XIcon class="size-4" /> <XIcon class="size-4" />
<span class="sr-only">Close</span> <span class="sr-only">Close</span>