mag/WMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fully working menu system with hughlighting now

Browse Source
This commit is contained in:
Mark Gregory
2026-06-15 14:33:33 +01:00
parent f13962b2f3
commit 91f2a7efb3
1 changed files with 113 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/layouts/app/sidebar.blade.php
+113 -12
View File
@@ -31,6 +31,8 @@
--wms-sidebar-min-width: 224px;
--wms-sidebar-max-width: 448px;
--wms-sidebar-collapsed-width: 76px;
--wms-active-parent-blue: #4164dc;
--wms-active-child-gold: #e8b52c;
}
.wms-app-shell {
@@ -115,6 +117,19 @@
text-align: left;
}
.wms-sidebar-heading-content {
display: inline-flex;
align-items: center;
gap: 0.75rem;
min-width: 0;
}
.wms-sidebar-heading-content > span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wms-sidebar-heading-chevron {
font-size: 0.7rem;
opacity: 0.65;
@@ -134,6 +149,58 @@
display: block;
}
.wms-sidebar-group[data-wms-menu-open="true"] > .wms-sidebar-heading-button,
.wms-sidebar-group:has(.wms-sidebar-link.is-active) > .wms-sidebar-heading-button {
position: relative;
margin: 0.25rem 0.5rem;
width: calc(100% - 1rem);
min-height: 3.5rem;
padding: 0.75rem 1rem;
border-radius: 9999px;
background: var(--wms-active-parent-blue);
color: #ffffff;
font-weight: 700;
box-shadow: 0 12px 24px rgba(65, 100, 220, 0.22);
}
.wms-sidebar-group[data-wms-menu-open="true"] > .wms-sidebar-heading-button .wms-sidebar-icon,
.wms-sidebar-group:has(.wms-sidebar-link.is-active) > .wms-sidebar-heading-button .wms-sidebar-icon,
.wms-sidebar-group[data-wms-menu-open="true"] > .wms-sidebar-heading-button .wms-sidebar-heading-chevron,
.wms-sidebar-group:has(.wms-sidebar-link.is-active) > .wms-sidebar-heading-button .wms-sidebar-heading-chevron {
color: #ffffff;
}
.wms-sidebar-link.is-active {
position: relative;
margin: 0.25rem 0.75rem 0.25rem 1.25rem;
min-height: 3.75rem;
padding: 0.75rem 1.25rem;
border-radius: 9999px 0 0 9999px;
background: var(--wms-active-child-gold);
color: #ffffff;
font-weight: 700;
box-shadow: 0 12px 24px rgba(232, 181, 44, 0.22);
}
.wms-sidebar-link.is-active::after {
position: absolute;
top: 0;
right: -1.25rem;
width: 2rem;
height: 100%;
content: "";
background: var(--wms-active-child-gold);
clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.wms-sidebar-link.is-active .wms-sidebar-icon,
.wms-sidebar-link.is-active i,
.wms-sidebar-link.is-active span {
position: relative;
z-index: 1;
color: #ffffff;
}
html[data-wms-sidebar="collapsed"] .wms-sidebar-heading-chevron,
html[data-wms-sidebar="collapsed"] .wms-sidebar-group-items {
display: none;
@@ -143,6 +210,21 @@
pointer-events: none;
}
html[data-wms-sidebar="collapsed"] .wms-sidebar-group[data-wms-menu-open="true"] > .wms-sidebar-heading-button,
html[data-wms-sidebar="collapsed"] .wms-sidebar-group:has(.wms-sidebar-link.is-active) > .wms-sidebar-heading-button,
html[data-wms-sidebar="collapsed"] .wms-sidebar-link.is-active {
margin: 0.25rem auto;
width: 3rem;
min-height: 3rem;
justify-content: center;
border-radius: 9999px;
padding: 0.75rem;
}
html[data-wms-sidebar="collapsed"] .wms-sidebar-link.is-active::after {
display: none;
}
@media (max-width: 1023px) {
.wms-app-shell {
display: block;
@@ -204,7 +286,11 @@
<nav class="wms-sidebar-nav" aria-label="{{ __('Main navigation') }}">
<div class="wms-sidebar-group" data-wms-menu-group="platform">
<button type="button" class="wms-sidebar-heading wms-sidebar-heading-button" data-wms-menu-toggle data-wms-sidebar-label aria-expanded="true">
<span>{{ __('Platform') }}</span>
<span class="wms-sidebar-heading-content">
<i class="fa-solid fa-screwdriver-wrench wms-sidebar-icon" aria-hidden="true"></i>
<span>{{ __('Platform') }}</span>
</span>
<i class="fa-solid fa-chevron-down wms-sidebar-heading-chevron" aria-hidden="true"></i>
</button>
@@ -225,7 +311,11 @@
<div class="wms-sidebar-group" data-wms-menu-group="operations">
<button type="button" class="wms-sidebar-heading wms-sidebar-heading-button" data-wms-menu-toggle data-wms-sidebar-label aria-expanded="false">
<span>{{ __('Operations') }}</span>
<span class="wms-sidebar-heading-content">
<i class="fa-solid fa-chart-simple wms-sidebar-icon" aria-hidden="true"></i>
<span>{{ __('Operations') }}</span>
</span>
<i class="fa-solid fa-chevron-down wms-sidebar-heading-chevron" aria-hidden="true"></i>
</button>
@@ -303,7 +393,11 @@
@if($helpdeskEnabled || $documentationEnabled)
<div class="wms-sidebar-group" data-wms-menu-group="support">
<button type="button" class="wms-sidebar-heading wms-sidebar-heading-button" data-wms-menu-toggle data-wms-sidebar-label aria-expanded="false">
<span>{{ __('Support') }}</span>
<span class="wms-sidebar-heading-content">
<i class="fa-solid fa-headset wms-sidebar-icon" aria-hidden="true"></i>
<span>{{ __('Support') }}</span>
</span>
<i class="fa-solid fa-chevron-down wms-sidebar-heading-chevron" aria-hidden="true"></i>
</button>
@@ -369,7 +463,11 @@
<div class="wms-sidebar-group" data-wms-menu-group="integration-reporting">
<button type="button" class="wms-sidebar-heading wms-sidebar-heading-button" data-wms-menu-toggle data-wms-sidebar-label aria-expanded="false">
<span>{{ __('Integration & Reporting') }}</span>
<span class="wms-sidebar-heading-content">
<i class="fa-solid fa-plug-circle-bolt wms-sidebar-icon" aria-hidden="true"></i>
<span>{{ __('Integration & Reporting') }}</span>
</span>
<i class="fa-solid fa-chevron-down wms-sidebar-heading-chevron" aria-hidden="true"></i>
</button>
@@ -406,7 +504,11 @@
<div class="wms-sidebar-group" data-wms-menu-group="administration">
<button type="button" class="wms-sidebar-heading wms-sidebar-heading-button" data-wms-menu-toggle data-wms-sidebar-label aria-expanded="false">
<span>{{ __('Administration') }}</span>
<span class="wms-sidebar-heading-content">
<i class="fa-solid fa-sliders wms-sidebar-icon" aria-hidden="true"></i>
<span>{{ __('Administration') }}</span>
</span>
<i class="fa-solid fa-chevron-down wms-sidebar-heading-chevron" aria-hidden="true"></i>
</button>
@@ -458,7 +560,11 @@
@if(auth()->user()?->isMpbaPlatformAdmin())
<div class="wms-sidebar-group" data-wms-menu-group="platform-administration">
<button type="button" class="wms-sidebar-heading wms-sidebar-heading-button" data-wms-menu-toggle data-wms-sidebar-label aria-expanded="false">
<span>{{ __('Platform Administration') }}</span>
<span class="wms-sidebar-heading-content">
<i class="fa-solid fa-building-shield wms-sidebar-icon" aria-hidden="true"></i>
<span>{{ __('Platform Administration') }}</span>
</span>
<i class="fa-solid fa-chevron-down wms-sidebar-heading-chevron" aria-hidden="true"></i>
</button>
@@ -665,15 +771,10 @@
}
function applyMenuState() {
document.querySelectorAll('[data-wms-menu-group]').forEach((group) => {
const key = group.dataset.wmsMenuGroup;
const hasActiveLink = group.querySelector('.wms-sidebar-link.is-active') !== null;
/*
* Platform is always expanded.
* Any group containing the currently selected menu entry remains expanded.
* All other groups stay collapsed by default.
*/
setMenuGroupOpen(group, key === 'platform' || hasActiveLink);
});
}