Skip to content

Commit

Permalink
Collapsible menu type, highlight current page
Browse files Browse the repository at this point in the history
  • Loading branch information
@jeppekroghitk
jeppekroghitk committed Jan 23, 2024
1 parent 689450f commit cca5823
Show file tree
Hide file tree
Showing 2 changed files with 140 additions and 72 deletions.
211 changes: 139 additions & 72 deletions templates/components/navigation.html.twig
View file
Original file line number Diff line number Diff line change
@@ -1,74 +1,141 @@
<style>
.submenu-content {
padding: 0 18px;
display: none;
overflow: hidden;
}
.submenu-content.shown {
display: block;
}
.collapsible:has(+ .submenu-content):after {
content: '▲';
font-size: 10px;
}
.collapsible:has(+ .submenu-content.shown):after {
content: '▼';
font-size: 10px;
}
.current {
background-color: rgb(15, 23, 42);
}
</style>
<aside class="w-full sm:w-1/3 md:w-1/4 px-2">
<div class="sticky top-0 p-4 w-full">
<a href="/" class="flex items-center mb-5">
<img src="{{ asset('img/itk-economics.png') }}" class="h-6 ml-3 sm:h-9" alt="{{ 'navigation.title'|trans }}" />
</a>
<!-- navigation -->
<ul class="flex flex-col overflow-hidden">
<li>
<a href="{{ path('index') }}" class="navigation-item">
<svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"></path>
</svg>
<span class="flex-1 ml-3 whitespace-nowrap">{{ 'navigation.home'|trans }}</span>
</a>
</li>
<li>
<a href="{{ path('app_invoices_index') }}" class="navigation-item">
<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span class="flex-1 ml-3 whitespace-nowrap">{{ 'navigation.invoices'|trans }}</span>
</a>
</li>
<li>
<a href="{{ path('app_project_billing_index') }}" class="navigation-item">
<svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M14.25 7.756a4.5 4.5 0 100 8.488M7.5 10.5h5.25m-5.25 3h5.25M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span class="flex-1 ml-3 whitespace-nowrap">{{ 'navigation.project_billing'|trans }}</span>
</a>
</li>
<li>
<a href="{{ path('app_planning') }}" class="navigation-item">
<svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M6.429 9.75L2.25 12l4.179 2.25m0-4.5l5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0l4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0l-5.571 3-5.571-3"></path>
</svg>
<span class="flex-1 ml-3 whitespace-nowrap">{{ 'navigation.planning'|trans }}</span>
</a>
</li>
<li>
<a href="{{ path('app_sprint_report') }}" class="navigation-item">
<svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M6.72 13.829c-.24.03-.48.062-.72.096m.72-.096a42.415 42.415 0 0110.56 0m-10.56 0L6.34 18m10.94-4.171c.24.03.48.062.72.096m-.72-.096L17.66 18m0 0l.229 2.523a1.125 1.125 0 01-1.12 1.227H7.231c-.662 0-1.18-.568-1.12-1.227L6.34 18m11.318 0h1.091A2.25 2.25 0 0021 15.75V9.456c0-1.081-.768-2.015-1.837-2.175a48.055 48.055 0 00-1.913-.247M6.34 18H5.25A2.25 2.25 0 013 15.75V9.456c0-1.081.768-2.015 1.837-2.175a48.041 48.041 0 011.913-.247m10.5 0a48.536 48.536 0 00-10.5 0m10.5 0V3.375c0-.621-.504-1.125-1.125-1.125h-8.25c-.621 0-1.125.504-1.125 1.125v3.659M18 10.5h.008v.008H18V10.5zm-3 0h.008v.008H15V10.5z"></path>
</svg>
<span class="flex-1 ml-3 whitespace-nowrap">{{ 'navigation.sprint_report'|trans }}</span>
</a>
</li>
<li>
<a href="{{ path('app_project_index') }}" class="navigation-item">
<svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 00-1.883 2.542l.857 6a2.25 2.25 0 002.227 1.932H19.05a2.25 2.25 0 002.227-1.932l.857-6a2.25 2.25 0 00-1.883-2.542m-16.5 0V6A2.25 2.25 0 016 3.75h3.879a1.5 1.5 0 011.06.44l2.122 2.12a1.5 1.5 0 001.06.44H18A2.25 2.25 0 0120.25 9v.776"></path>
</svg>
<span class="flex-1 ml-3 whitespace-nowrap">{{ 'navigation.projects'|trans }}</span>
</a>
</li>
<li>
<a href="{{ path('app_client_index') }}" class="navigation-item">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
</svg>
<span class="flex-1 ml-3 whitespace-nowrap">{{ 'navigation.client'|trans }}</span>
</a>
</li>
<li>
<a href="{{ path('app_account_index') }}" class="navigation-item">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
</svg>
<span class="flex-1 ml-3 whitespace-nowrap">{{ 'navigation.account'|trans }}</span>
</a>
</li>
</ul>
</div>
<div class="sticky top-0 p-4 w-full">
<a href="/" class="flex items-center mb-5">
<img src="{{ asset('img/itk-economics.png') }}" class="h-6 ml-3 sm:h-9" alt="{{ 'navigation.title'|trans }}"/>
</a>
<!-- navigation -->
<ul class="flex flex-col overflow-hidden">
<li>
<a href="{{ path('index') }}" class="navigation-item">
<svg fill="none" stroke="currentColor" stroke-width="1.5" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"></path>
</svg>
<span class="flex-1 ml-3 whitespace-nowrap">{{ 'navigation.home'|trans }}</span>
</a>
</li>
<li>
<a href="{{ path('app_invoices_index') }}" class="navigation-item">
<svg fill="none" stroke="currentColor" stroke-width="2" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span class="flex-1 ml-3 whitespace-nowrap">{{ 'navigation.invoices'|trans }}</span>
</a>
</li>
<li>
<a href="{{ path('app_project_billing_index') }}" class="navigation-item">
<svg fill="none" stroke="currentColor" stroke-width="1.5" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M14.25 7.756a4.5 4.5 0 100 8.488M7.5 10.5h5.25m-5.25 3h5.25M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span class="flex-1 ml-3 whitespace-nowrap">{{ 'navigation.project_billing'|trans }}</span>
</a>
</li>
<li>
<a href="{{ path('app_planning') }}" class="navigation-item">
<svg fill="none" stroke="currentColor" stroke-width="1.5" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M6.429 9.75L2.25 12l4.179 2.25m0-4.5l5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0l4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0l-5.571 3-5.571-3"></path>
</svg>
<span class="flex-1 ml-3 whitespace-nowrap">{{ 'navigation.planning'|trans }}</span>
</a>
</li>
<li>
<a href="{{ path('app_sprint_report') }}" class="navigation-item">
<svg fill="none" stroke="currentColor" stroke-width="1.5" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M6.72 13.829c-.24.03-.48.062-.72.096m.72-.096a42.415 42.415 0 0110.56 0m-10.56 0L6.34 18m10.94-4.171c.24.03.48.062.72.096m-.72-.096L17.66 18m0 0l.229 2.523a1.125 1.125 0 01-1.12 1.227H7.231c-.662 0-1.18-.568-1.12-1.227L6.34 18m11.318 0h1.091A2.25 2.25 0 0021 15.75V9.456c0-1.081-.768-2.015-1.837-2.175a48.055 48.055 0 00-1.913-.247M6.34 18H5.25A2.25 2.25 0 013 15.75V9.456c0-1.081.768-2.015 1.837-2.175a48.041 48.041 0 011.913-.247m10.5 0a48.536 48.536 0 00-10.5 0m10.5 0V3.375c0-.621-.504-1.125-1.125-1.125h-8.25c-.621 0-1.125.504-1.125 1.125v3.659M18 10.5h.008v.008H18V10.5zm-3 0h.008v.008H15V10.5z"></path>
</svg>
<span class="flex-1 ml-3 whitespace-nowrap">{{ 'navigation.sprint_report'|trans }}</span>
</a>
</li>
<li>
<a href="#" class="navigation-item collapsible">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125"/>
</svg>
<span class="flex-1 ml-3 whitespace-nowrap">{{ 'navigation.data'|trans }}</span>
</a>
<ul class="submenu-content">
<li>
<a href="{{ path('app_project_index') }}" class="navigation-item">
<svg fill="none" stroke="currentColor" stroke-width="1.5" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 00-1.883 2.542l.857 6a2.25 2.25 0 002.227 1.932H19.05a2.25 2.25 0 002.227-1.932l.857-6a2.25 2.25 0 00-1.883-2.542m-16.5 0V6A2.25 2.25 0 016 3.75h3.879a1.5 1.5 0 011.06.44l2.122 2.12a1.5 1.5 0 001.06.44H18A2.25 2.25 0 0120.25 9v.776"></path>
</svg>
<span class="flex-1 ml-3 whitespace-nowrap">{{ 'navigation.projects'|trans }}</span>
</a>
</li>
<li>
<a href="{{ path('app_client_index') }}" class="navigation-item">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"/>
</svg>
<span class="flex-1 ml-3 whitespace-nowrap">{{ 'navigation.client'|trans }}</span>
</a>
</li>
<li>
<a href="{{ path('app_account_index') }}" class="navigation-item">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/>
</svg>
<span class="flex-1 ml-3 whitespace-nowrap">{{ 'navigation.account'|trans }}</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
</aside>

<script>
var collapsible = document.querySelector('.collapsible');
var collapsibleContent = document.querySelector('.submenu-content');
collapsible.addEventListener('click', function () {
collapsible.nextElementSibling.classList.toggle('shown');
});
// Find active menupoint
var currentPath = window.location.pathname;
var regexPattern = /\/admin\/([^\/]+)/;
var match = currentPath.match(regexPattern);
if (match) {
var currentPage = document.querySelector(('a[href*="/admin/' + match[1] + '/"]'));
} else {
var currentPage = document.querySelector(('a[href*="/admin/"]'));
}
currentPage.classList.add('current');
var activeElementIsChild = findClosestParentWithClass(currentPage, "submenu-content");
// Expand collapsible if active menu point is child
if (activeElementIsChild) {
collapsibleContent.classList.add('shown');
}
function findClosestParentWithClass(element, className) {
while (element && (element.nodeType !== 1 || ! element.classList.contains(className))) {
element = element.parentNode;
}
return element;
}
</script>

1 change: 1 addition & 0 deletions translations/messages.da.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ navigation:
client: "Kunder"
account: "Konti"
pricelist: "Prisliste"
data: "Data"

planning:
title: "Planlægning"
Expand Down

0 comments on commit cca5823

Please sign in to comment.