From 91f2a7efb3aa5a10ae2064c5783b9ee13fce5c53 Mon Sep 17 00:00:00 2001
From: Mark Gregory <mark.gregory@mpba.co.uk>
Date: Mon, 15 Jun 2026 14:33:33 +0100
Subject: [PATCH] fully working menu system with hughlighting now

---
 resources/views/layouts/app/sidebar.blade.php | 125 ++++++++++++++++--
 1 file changed, 113 insertions(+), 12 deletions(-)

diff --git a/resources/views/layouts/app/sidebar.blade.php b/resources/views/layouts/app/sidebar.blade.php
index 1a502418..6717fe3e 100644
--- a/resources/views/layouts/app/sidebar.blade.php
+++ b/resources/views/layouts/app/sidebar.blade.php
@@ -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);
             });
         }