EP/myep-team
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP: Implement menu/navigation

Browse Source
This commit is contained in:
Björn Fromme
2023-09-25 18:02:27 +02:00
parent c3c2e1ae2d
commit 3e0353c79b
24 changed files with 475 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/_partials/_menu.html.twig
+13
View File
@@ -12,3 +12,16 @@
{% endif %}
{% endapply %}
{% endblock %}
{% block spanElement %}
<div class="icon-section" role="button">
{% if item.extras.icon is defined %}
{{ icon(item.extras.icon, 'w-5 h-5') }}
{% if item.extras.icon_only is defined and false == item.extras.icon_only %}
<span class="flex-1">{{ item.label|raw }}</span>
{% endif %}
{% else %}
{{ item.label|raw }}
{% endif %}
</div>
{% endblock %}
templates/_partials/_mobile_menu.html.twig
-18
View File
@@ -1,18 +0,0 @@
<div id="mobilenav"
class="fixed z-50 top-0 left-0 inset-0 pr-16 bg-black/70 -translate-x-full"
{{ stimulus_controller('mobilenav', [], { 'closed': '-translate-x-full' }, { 'mobilenav': '#mobilenav' }) }}
>
<div class="h-screen w-full bg-white">
<div class="flex justify-between px-8 pt-4">
<img src="{{ asset('build/images/logo.svg') }}" alt="" class="block w-auto h-8">
<button type="button"
{{ stimulus_action('mobilenav', 'trigger', null, { 'mode': 'close' }) }}>
{{ icon('close', 'w-8 h-8') }}
</button>
</div>
<div class="w-full h-full p-8 pt-4 overflow-y-scroll">
{% set mobileMenu = knp_menu_get('main', [], { 'mobile': true }) %}
{{ knp_menu_render(mobileMenu, { 'firstClass': null, 'lastClass': null, 'ancestorClass': 'active', 'compressed': true }) }}
</div>
</div>
</div>
templates/_partials/_page_header.html.twig
+1 -2
View File
@@ -6,8 +6,7 @@
</div>
</a>
<nav class="hidden md:block font-medium">
{% set menu = knp_menu_get('main') %}
{{ knp_menu_render(menu, { 'firstClass': null, 'lastClass': null, 'ancestorClass': 'active', 'compressed': true }) }}
{% block header_menu %}{% endblock %}
</nav>
<button type="button"
class="md:hidden"
templates/_partials/_sidebar_menu.html.twig
+68
View File
@@ -0,0 +1,68 @@
<div class="flex grow flex-col gap-y-5 overflow-y-scroll md:border-r border-gray-200 bg-white px-6">
<nav class="flex flex-1 flex-col">
<ul role="list" class="-mx-2 space-y-1">
<li>
<!-- Current: "bg-gray-50", Default: "hover:bg-gray-50" -->
<a href="#" class="bg-gray-50 block rounded-md py-2 pr-2 pl-10 text-sm leading-6 font-semibold text-gray-700">Dashboard</a>
</li>
<li>
<div>
<button type="button" class="hover:bg-gray-50 flex items-center w-full text-left rounded-md p-2 gap-x-3 text-sm leading-6 font-semibold text-gray-700" aria-controls="sub-menu-1" aria-expanded="false">
<!-- Expanded: "rotate-90 text-gray-500", Collapsed: "text-gray-400" -->
<svg class="text-gray-400 h-5 w-5 shrink-0" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
</svg>
Teams
</button>
<!-- Expandable link section, show/hide based on state. -->
<ul class="mt-1 px-2" id="sub-menu-1">
<li>
<a href="#" class="hover:bg-gray-50 block rounded-md py-2 pr-2 pl-9 text-sm leading-6 text-gray-700">Engineering</a>
</li>
<li>
<a href="#" class="hover:bg-gray-50 block rounded-md py-2 pr-2 pl-9 text-sm leading-6 text-gray-700">Human Resources</a>
</li>
<li>
<a href="#" class="hover:bg-gray-50 block rounded-md py-2 pr-2 pl-9 text-sm leading-6 text-gray-700">Customer Success</a>
</li>
</ul>
</div>
</li>
<li>
<div>
<button type="button" class="hover:bg-gray-50 flex items-center w-full text-left rounded-md p-2 gap-x-3 text-sm leading-6 font-semibold text-gray-700" aria-controls="sub-menu-2" aria-expanded="false">
<!-- Expanded: "rotate-90 text-gray-500", Collapsed: "text-gray-400" -->
<svg class="text-gray-400 h-5 w-5 shrink-0" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
</svg>
Projects
</button>
<!-- Expandable link section, show/hide based on state. -->
<ul class="mt-1 px-2" id="sub-menu-2">
<li>
<a href="#" class="hover:bg-gray-50 block rounded-md py-2 pr-2 pl-9 text-sm leading-6 text-gray-700">GraphQL API</a>
</li>
<li>
<a href="#" class="hover:bg-gray-50 block rounded-md py-2 pr-2 pl-9 text-sm leading-6 text-gray-700">iOS App</a>
</li>
<li>
<a href="#" class="hover:bg-gray-50 block rounded-md py-2 pr-2 pl-9 text-sm leading-6 text-gray-700">Android App</a>
</li>
<li>
<a href="#" class="hover:bg-gray-50 block rounded-md py-2 pr-2 pl-9 text-sm leading-6 text-gray-700">New Customer Portal</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#" class="hover:bg-gray-50 block rounded-md py-2 pr-2 pl-10 text-sm leading-6 font-semibold text-gray-700">Calendar</a>
</li>
<li>
<a href="#" class="hover:bg-gray-50 block rounded-md py-2 pr-2 pl-10 text-sm leading-6 font-semibold text-gray-700">Documents</a>
</li>
<li>
<a href="#" class="hover:bg-gray-50 block rounded-md py-2 pr-2 pl-10 text-sm leading-6 font-semibold text-gray-700">Reports</a>
</li>
</ul>
</nav>
</div>