206 lines
4.2 KiB
Plaintext
206 lines
4.2 KiB
Plaintext
import {
|
|
tv
|
|
} from "./chunk-UWE6H66T.mjs";
|
|
import {
|
|
dataFocusVisibleClasses
|
|
} from "./chunk-GH5E4FQB.mjs";
|
|
|
|
// src/components/navbar.ts
|
|
var navbar = tv({
|
|
slots: {
|
|
base: [
|
|
"flex",
|
|
"z-40",
|
|
"w-full",
|
|
"h-auto",
|
|
"items-center",
|
|
"justify-center",
|
|
"data-[menu-open=true]:border-none"
|
|
],
|
|
wrapper: [
|
|
"z-40",
|
|
"flex",
|
|
"px-6",
|
|
"gap-4",
|
|
"w-full",
|
|
"flex-row",
|
|
"relative",
|
|
"flex-nowrap",
|
|
"items-center",
|
|
"justify-between",
|
|
"h-[var(--navbar-height)]"
|
|
],
|
|
toggle: [
|
|
"group",
|
|
"flex",
|
|
"items-center",
|
|
"justify-center",
|
|
"w-6",
|
|
"h-full",
|
|
"outline-none",
|
|
"rounded-small",
|
|
"tap-highlight-transparent",
|
|
...dataFocusVisibleClasses
|
|
],
|
|
srOnly: ["sr-only"],
|
|
toggleIcon: [
|
|
"w-full",
|
|
"h-full",
|
|
"pointer-events-none",
|
|
"flex",
|
|
"flex-col",
|
|
"items-center",
|
|
"justify-center",
|
|
"text-inherit",
|
|
"group-data-[pressed=true]:opacity-70",
|
|
"transition-opacity",
|
|
"before:content-['']",
|
|
"before:block",
|
|
"before:h-px",
|
|
"before:w-6",
|
|
"before:bg-current",
|
|
"before:transition-transform",
|
|
"before:duration-150",
|
|
"before:-translate-y-1",
|
|
"before:rotate-0",
|
|
"group-data-[open=true]:before:translate-y-px",
|
|
"group-data-[open=true]:before:rotate-45",
|
|
"after:content-['']",
|
|
"after:block",
|
|
"after:h-px",
|
|
"after:w-6",
|
|
"after:bg-current",
|
|
"after:transition-transform",
|
|
"after:duration-150",
|
|
"after:translate-y-1",
|
|
"after:rotate-0",
|
|
"group-data-[open=true]:after:translate-y-0",
|
|
"group-data-[open=true]:after:-rotate-45"
|
|
],
|
|
brand: [
|
|
"flex",
|
|
"basis-0",
|
|
"flex-row",
|
|
"flex-grow",
|
|
"flex-nowrap",
|
|
"justify-start",
|
|
"bg-transparent",
|
|
"items-center",
|
|
"no-underline",
|
|
"text-medium",
|
|
"whitespace-nowrap",
|
|
"box-border"
|
|
],
|
|
content: [
|
|
"flex",
|
|
"gap-4",
|
|
"h-full",
|
|
"flex-row",
|
|
"flex-nowrap",
|
|
"items-center",
|
|
"data-[justify=start]:justify-start",
|
|
"data-[justify=start]:flex-grow",
|
|
"data-[justify=start]:basis-0",
|
|
"data-[justify=center]:justify-center",
|
|
"data-[justify=end]:justify-end",
|
|
"data-[justify=end]:flex-grow",
|
|
"data-[justify=end]:basis-0"
|
|
],
|
|
item: [
|
|
"text-medium",
|
|
"whitespace-nowrap",
|
|
"box-border",
|
|
"list-none",
|
|
"data-[active=true]:font-semibold"
|
|
],
|
|
menu: [
|
|
"z-30",
|
|
"px-6",
|
|
"pt-2",
|
|
"fixed",
|
|
"flex",
|
|
"max-w-full",
|
|
"top-[var(--navbar-height)]",
|
|
"inset-x-0",
|
|
"bottom-0",
|
|
"w-screen",
|
|
"flex-col",
|
|
"gap-2",
|
|
"overflow-y-auto"
|
|
],
|
|
menuItem: [
|
|
"text-large",
|
|
"data-[active=true]:font-semibold"
|
|
]
|
|
},
|
|
variants: {
|
|
position: {
|
|
static: {
|
|
base: "static"
|
|
},
|
|
sticky: {
|
|
base: "sticky top-0 inset-x-0"
|
|
}
|
|
},
|
|
maxWidth: {
|
|
sm: {
|
|
wrapper: "max-w-[640px]"
|
|
},
|
|
md: {
|
|
wrapper: "max-w-[768px]"
|
|
},
|
|
lg: {
|
|
wrapper: "max-w-[1024px]"
|
|
},
|
|
xl: {
|
|
wrapper: "max-w-[1280px]"
|
|
},
|
|
"2xl": {
|
|
wrapper: "max-w-[1536px]"
|
|
},
|
|
full: {
|
|
wrapper: "max-w-full"
|
|
}
|
|
},
|
|
hideOnScroll: {
|
|
true: {
|
|
base: ["sticky", "top-0", "inset-x-0"]
|
|
}
|
|
},
|
|
isBordered: {
|
|
true: {
|
|
base: ["border-b", "border-divider"]
|
|
}
|
|
},
|
|
isBlurred: {
|
|
false: {
|
|
base: "bg-background",
|
|
menu: "bg-background"
|
|
},
|
|
true: {
|
|
base: [
|
|
"backdrop-blur-lg",
|
|
"data-[menu-open=true]:backdrop-blur-xl",
|
|
"backdrop-saturate-150",
|
|
"bg-background/70"
|
|
],
|
|
menu: ["backdrop-blur-xl", "backdrop-saturate-150", "bg-background/70"]
|
|
}
|
|
},
|
|
disableAnimation: {
|
|
true: {
|
|
menu: ["hidden", "h-[calc(100dvh_-_var(--navbar-height))]", "data-[open=true]:flex"]
|
|
}
|
|
}
|
|
},
|
|
defaultVariants: {
|
|
maxWidth: "lg",
|
|
position: "sticky",
|
|
isBlurred: true
|
|
}
|
|
});
|
|
|
|
export {
|
|
navbar
|
|
};
|