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

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

@@ -38,6 +38,7 @@
import { MoreHorizontal, ChevronDown, ChevronRight } from '@lucide/svelte';
import { slide } from 'svelte/transition';
import { quintOut } from 'svelte/easing';
import Button from './ui/button/button.svelte';
interface Props {
settings?: Settings;
@@ -127,11 +128,15 @@
</script>
<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="flex items-center">
{#if settings}
<a href="/">
<Button variant="ghost" class="px-1">
<Logo {settings} class="text-white" />
</Button>
</a>
{:else}
<div class="text-lg font-semibold text-white">Logo</div>
{/if}
@@ -149,15 +154,15 @@
<NavigationMenuItem data-navigation-menu-item>
{#if item.url && !item.subitems}
<NavigationMenuLink
class={cn(
'relative z-20 text-white hover:text-white/80 transition-colors'
)}
class={cn('relative z-20 text-white transition-colors hover:text-white/80')}
href={item.url}
>
{item.name}
</NavigationMenuLink>
{: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}
</NavigationMenuTrigger>
<NavigationMenuContent
@@ -166,7 +171,7 @@
{#each item.subitems as subitem}
<NavigationMenuLink
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}
</NavigationMenuLink>
@@ -179,54 +184,63 @@
</div>
</NavigationMenuRoot>
</div>
<div class="ml-auto flex items-center">
<div class="ml-auto md:hidden">
<Sheet bind:open={mobileMenuOpen}>
<SheetTrigger
class="rounded-md p-2 text-white transition-colors hover:bg-white/10 md:hidden"
aria-label="Toggle mobile menu"
>
<SheetTrigger class="text-white md:hidden" aria-label="Toggle mobile menu">
<Button variant="ghost" size="icon">
<MoreHorizontal size={24} />
</Button>
</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">
<SheetTitle class="flex items-center justify-start text-white">
<SheetTitle class="flex items-center justify-start">
{#if settings}
<a href="/">
<Button variant="ghost" class="px-1">
<Logo {settings} class="text-white" />
</Button>
</a>
{:else}
<div class="text-lg font-semibold text-white">Navigation</div>
<div class="text-lg font-semibold">Navigation</div>
{/if}
</SheetTitle>
</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}
{#if item.url && !item.subitems}
<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
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}
>
{item.name}
</a>
</div>
{:else if item.subitems}
<div class="space-y-1 relative">
<div class="relative space-y-1">
{#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}
<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"
<Button
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)}
>
<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} />
</div>
</button>
</Button>
{#if expandedSubmenu === item.name}
<div
class="ml-4 space-y-1"
@@ -235,7 +249,7 @@
{#each item.subitems as subitem}
<a
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}
>
{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";
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: {
variant: {
default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
@@ -13,7 +13,7 @@
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",
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",
},
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 SheetOverlay from "./sheet-overlay.svelte";
import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
import { buttonVariants } from "../button";
let {
ref = $bindable(null),
@@ -49,7 +50,10 @@
>
{@render children?.()}
<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" />
<span class="sr-only">Close</span>