Skip to content

Commit 7799307

Browse files
silveltmansilveltman
committed
Merge pull request #176 from larsb-dev/fix/header-block-active-state
2 parents da13872 + c052c13 commit 7799307

3 files changed

Lines changed: 8 additions & 2 deletions

File tree

‎.changeset/fast-needles-tap.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"fulldev-ui": patch
3+
---
4+
5+
Add active navigation item support to the Header 1 block.

‎public/r/header-1.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"files": [
1313
{
1414
"path": "src/components/blocks/header-1.astro",
15-
"content": "---\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n NavigationMenu,\n NavigationMenuItem,\n NavigationMenuLink,\n NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n Sheet,\n SheetClose,\n SheetContent,\n SheetDescription,\n SheetHeader,\n SheetTitle,\n SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = {\n class?: string\n logo: {\n label: string\n href: string\n src?: any\n srcLight?: any\n srcDark?: any\n alt?: string\n }\n navigation: {\n label: string\n href: string\n links?: {\n label: string\n href: string\n }[]\n }[]\n buttons: {\n label: string\n href: string\n icon?: string\n variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n }[]\n}\n\nconst { class: className, logo, navigation, buttons } = Astro.props\n---\n\n<Header class={cn(\"\", className)}>\n <HeaderContainer class=\"items-center justify-between gap-4\">\n <HeaderGroup>\n <Logo href={logo.href}>\n <LogoImage\n src={logo.src}\n srcLight={logo.srcLight}\n srcDark={logo.srcDark}\n alt={logo.alt}\n />\n {logo.label && <LogoText>{logo.label}</LogoText>}\n </Logo>\n </HeaderGroup>\n <NavigationMenu class=\"hidden flex-none justify-start lg:flex\">\n <NavigationMenuList class=\"justify-start\">\n {\n navigation.map((item, index) => (\n <NavigationMenuItem value={`nav-${index}`}>\n <NavigationMenuLink href={item.href}>\n {item.label}\n </NavigationMenuLink>\n </NavigationMenuItem>\n ))\n }\n </NavigationMenuList>\n </NavigationMenu>\n <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n <slot />\n {\n buttons.map(({ label, icon, ...button }) => (\n <Button\n as=\"a\"\n size={icon && !label ? \"icon-sm\" : \"sm\"}\n aria-label={label}\n target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n {...button}\n >\n {icon && <Icon name={icon} />}\n {label}\n </Button>\n ))\n }\n </HeaderGroup>\n <Sheet class=\"lg:hidden\">\n <SheetTrigger\n variant=\"ghost\"\n size=\"icon-sm\"\n class=\"ml-auto\"\n aria-label=\"Open menu\"\n >\n <Icon name=\"menu\" />\n </SheetTrigger>\n <SheetContent side=\"right\" class=\"p-0\">\n <SheetHeader class=\"sr-only\">\n <SheetTitle>Menu</SheetTitle>\n <SheetDescription>Site navigation and actions.</SheetDescription>\n </SheetHeader>\n <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n <nav aria-label=\"Main navigation\" class=\"flex flex-col gap-1\">\n {\n navigation.map((item) => (\n <SheetClose variant=\"ghost\" class=\"justify-start\">\n {item.label}\n </SheetClose>\n ))\n }\n </nav>\n <div class=\"mt-auto flex flex-col gap-2\">\n <slot />\n </div>\n </div>\n </SheetContent>\n </Sheet>\n </HeaderContainer>\n</Header>\n",
15+
"content": "---\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n NavigationMenu,\n NavigationMenuItem,\n NavigationMenuLink,\n NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n Sheet,\n SheetClose,\n SheetContent,\n SheetDescription,\n SheetHeader,\n SheetTitle,\n SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = {\n class?: string\n logo: {\n label: string\n href: string\n src?: any\n srcLight?: any\n srcDark?: any\n alt?: string\n }\n navigation: {\n label: string\n href: string\n active?: boolean\n links?: {\n label: string\n href: string\n }[]\n }[]\n buttons: {\n label: string\n href: string\n icon?: string\n variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n }[]\n}\n\nconst { class: className, logo, navigation, buttons } = Astro.props\n---\n\n<Header class={cn(\"\", className)}>\n <HeaderContainer class=\"items-center justify-between gap-4\">\n <HeaderGroup>\n <Logo href={logo.href}>\n <LogoImage\n src={logo.src}\n srcLight={logo.srcLight}\n srcDark={logo.srcDark}\n alt={logo.alt}\n />\n {logo.label && <LogoText>{logo.label}</LogoText>}\n </Logo>\n </HeaderGroup>\n <NavigationMenu class=\"hidden flex-none justify-start lg:flex\">\n <NavigationMenuList class=\"justify-start\">\n {\n navigation.map((item, index) => (\n <NavigationMenuItem value={`nav-${index}`}>\n <NavigationMenuLink href={item.href} active={item.active}>\n {item.label}\n </NavigationMenuLink>\n </NavigationMenuItem>\n ))\n }\n </NavigationMenuList>\n </NavigationMenu>\n <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n <slot />\n {\n buttons.map(({ label, icon, ...button }) => (\n <Button\n as=\"a\"\n size={icon && !label ? \"icon-sm\" : \"sm\"}\n aria-label={label}\n target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n {...button}\n >\n {icon && <Icon name={icon} />}\n {label}\n </Button>\n ))\n }\n </HeaderGroup>\n <Sheet class=\"lg:hidden\">\n <SheetTrigger\n variant=\"ghost\"\n size=\"icon-sm\"\n class=\"ml-auto\"\n aria-label=\"Open menu\"\n >\n <Icon name=\"menu\" />\n </SheetTrigger>\n <SheetContent side=\"right\" class=\"p-0\">\n <SheetHeader class=\"sr-only\">\n <SheetTitle>Menu</SheetTitle>\n <SheetDescription>Site navigation and actions.</SheetDescription>\n </SheetHeader>\n <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n <nav aria-label=\"Main navigation\" class=\"flex flex-col gap-1\">\n {\n navigation.map((item) => (\n <SheetClose variant=\"ghost\" class=\"justify-start\">\n {item.label}\n </SheetClose>\n ))\n }\n </nav>\n <div class=\"mt-auto flex flex-col gap-2\">\n <slot />\n </div>\n </div>\n </SheetContent>\n </Sheet>\n </HeaderContainer>\n</Header>\n",
1616
"type": "registry:block"
1717
}
1818
],

‎src/components/blocks/header-1.astro‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ type Props = {
3333
navigation: {
3434
label: string
3535
href: string
36+
active?: boolean
3637
links?: {
3738
label: string
3839
href: string
@@ -67,7 +68,7 @@ const { class: className, logo, navigation, buttons } = Astro.props
6768
{
6869
navigation.map((item, index) => (
6970
<NavigationMenuItem value={`nav-${index}`}>
70-
<NavigationMenuLink href={item.href}>
71+
<NavigationMenuLink href={item.href} active={item.active}>
7172
{item.label}
7273
</NavigationMenuLink>
7374
</NavigationMenuItem>

0 commit comments

Comments
 (0)