fixed some navbar issues
This commit is contained in:
@@ -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}
|
||||
<Logo {settings} class="text-white" />
|
||||
<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"
|
||||
>
|
||||
<MoreHorizontal size={24} />
|
||||
<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}
|
||||
<Logo {settings} class="text-white" />
|
||||
<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,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: {
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user