Skip to content

Commit 46fb58a

Browse files
AmoifrAmoifr
committed
[Toolkit][Shadcn] Add navigation-menu recipe
1 parent d9fb053 commit 46fb58a

12 files changed

Lines changed: 196 additions & 0 deletions

‎src/Toolkit/CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
- [Shadcn] Add `collapsible` recipe
1414
- [Shadcn] Add `typography` recipe
1515
- [Shadcn] Add `toggle-group` recipe
16+
- [Shadcn] Add `navigation-menu` recipe
1617

1718
## 2.35
1819

‎src/Toolkit/kits/shadcn/navigation-menu/examples/Demo.html.twig‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<twig:NavigationMenu>
2+
<twig:NavigationMenu:List>
3+
<twig:NavigationMenu:Item>
4+
<twig:NavigationMenu:Trigger>Getting started</twig:NavigationMenu:Trigger>
5+
<twig:NavigationMenu:Content class="w-[420px]">
6+
<div class="grid gap-1">
7+
<a class="rounded-md p-3 hover:bg-accent" href="/docs/install">
8+
<div class="text-sm font-medium">Installation</div>
9+
<p class="text-xs text-muted-foreground">How to install the Toolkit.</p>
10+
</a>
11+
<a class="rounded-md p-3 hover:bg-accent" href="/docs/primitives">
12+
<div class="text-sm font-medium">Primitives</div>
13+
<p class="text-xs text-muted-foreground">Building blocks of the Toolkit.</p>
14+
</a>
15+
</div>
16+
</twig:NavigationMenu:Content>
17+
</twig:NavigationMenu:Item>
18+
<twig:NavigationMenu:Item>
19+
<twig:NavigationMenu:Trigger>Components</twig:NavigationMenu:Trigger>
20+
<twig:NavigationMenu:Content>
21+
<ul class="grid gap-1">
22+
<li><a class="block rounded-md p-2 hover:bg-accent" href="/docs/components/alert">Alert</a></li>
23+
<li><a class="block rounded-md p-2 hover:bg-accent" href="/docs/components/button">Button</a></li>
24+
<li><a class="block rounded-md p-2 hover:bg-accent" href="/docs/components/dialog">Dialog</a></li>
25+
</ul>
26+
</twig:NavigationMenu:Content>
27+
</twig:NavigationMenu:Item>
28+
<twig:NavigationMenu:Item>
29+
<twig:NavigationMenu:Link href="/docs">Documentation</twig:NavigationMenu:Link>
30+
</twig:NavigationMenu:Item>
31+
</twig:NavigationMenu:List>
32+
</twig:NavigationMenu>

‎src/Toolkit/kits/shadcn/navigation-menu/examples/Usage.html.twig‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<twig:NavigationMenu>
2+
<twig:NavigationMenu:List>
3+
<twig:NavigationMenu:Item>
4+
<twig:NavigationMenu:Link href="/">Home</twig:NavigationMenu:Link>
5+
</twig:NavigationMenu:Item>
6+
<twig:NavigationMenu:Item>
7+
<twig:NavigationMenu:Link href="/docs">Docs</twig:NavigationMenu:Link>
8+
</twig:NavigationMenu:Item>
9+
</twig:NavigationMenu:List>
10+
</twig:NavigationMenu>

‎src/Toolkit/kits/shadcn/navigation-menu/manifest.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"$schema": "../../../schema-kit-recipe-v1.json",
3+
"type": "component",
4+
"name": "Navigation Menu",
5+
"description": "A collection of navigation links with optional hover-triggered submenus.",
6+
"copy-files": {
7+
"templates/": "templates/"
8+
},
9+
"dependencies": {
10+
"composer": ["tales-from-a-dev/twig-tailwind-extra:^1.0.0"]
11+
}
12+
}

‎src/Toolkit/kits/shadcn/navigation-menu/templates/components/NavigationMenu.html.twig‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{# @block content A `NavigationMenu:List` containing `NavigationMenu:Item` children #}
2+
<nav
3+
class="{{ ('relative flex max-w-max flex-1 items-center justify-center ' ~ attributes.render('class'))|tailwind_merge }}"
4+
{{ attributes.defaults({
5+
'data-slot': 'navigation-menu',
6+
'aria-label': 'Main',
7+
}) }}
8+
>
9+
{%- block content %}{% endblock -%}
10+
</nav>

‎src/Toolkit/kits/shadcn/navigation-menu/templates/components/NavigationMenu/Content.html.twig‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{# @block content The submenu revealed on hover or focus #}
2+
<div
3+
class="{{ ('invisible opacity-0 group-hover/nav-item:visible group-hover/nav-item:opacity-100 group-focus-within/nav-item:visible group-focus-within/nav-item:opacity-100 transition-opacity absolute left-0 top-full z-50 mt-1.5 min-w-48 rounded-md border bg-popover p-2 text-popover-foreground shadow-md ' ~ attributes.render('class'))|tailwind_merge }}"
4+
{{ attributes.defaults({
5+
'data-slot': 'navigation-menu-content',
6+
}) }}
7+
>
8+
{%- block content %}{% endblock -%}
9+
</div>

‎src/Toolkit/kits/shadcn/navigation-menu/templates/components/NavigationMenu/Item.html.twig‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{# @block content The trigger and optional submenu content #}
2+
<li
3+
class="{{ ('group/nav-item relative ' ~ attributes.render('class'))|tailwind_merge }}"
4+
{{ attributes.defaults({
5+
'data-slot': 'navigation-menu-item',
6+
}) }}
7+
>
8+
{%- block content %}{% endblock -%}
9+
</li>

‎src/Toolkit/kits/shadcn/navigation-menu/templates/components/NavigationMenu/Link.html.twig‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{# @prop href string Target URL #}
2+
{# @block content The link label #}
3+
{%- props href -%}
4+
<a
5+
href="{{ href }}"
6+
class="{{ ('inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 ' ~ attributes.render('class'))|tailwind_merge }}"
7+
{{ attributes.defaults({
8+
'data-slot': 'navigation-menu-link',
9+
}) }}
10+
>
11+
{%- block content %}{% endblock -%}
12+
</a>

‎src/Toolkit/kits/shadcn/navigation-menu/templates/components/NavigationMenu/List.html.twig‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{# @block content The `NavigationMenu:Item` children #}
2+
<ul
3+
class="{{ ('group flex flex-1 list-none items-center justify-center gap-1 ' ~ attributes.render('class'))|tailwind_merge }}"
4+
{{ attributes.defaults({
5+
'data-slot': 'navigation-menu-list',
6+
}) }}
7+
>
8+
{%- block content %}{% endblock -%}
9+
</ul>

‎src/Toolkit/kits/shadcn/navigation-menu/templates/components/NavigationMenu/Trigger.html.twig‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{# @block content The trigger label #}
2+
<button
3+
type="button"
4+
class="{{ ('inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 ' ~ attributes.render('class'))|tailwind_merge }}"
5+
{{ attributes.defaults({
6+
'data-slot': 'navigation-menu-trigger',
7+
}) }}
8+
>
9+
{%- block content %}{% endblock -%}
10+
</button>

0 commit comments

Comments
 (0)