feat: refactor header menu structure and enhance menu item attributes…

… for improved accessibility
arodu · Dec 28, 2024 · 1b0da33 · 1b0da33
1 parent 6f60cd0
commit 1b0da33
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 13 deletions.
diff --git a/src/View/CakeLteTrait.php b/src/View/CakeLteTrait.php
@@ -43,16 +43,16 @@ public function initializeCakeLte(array $options = []): void
                 'divider' => '<li><hr class="dropdown-divider"></li>',
 
                 'menuContainer' => '<ul class="nav sidebar-menu flex-column" data-lte-toggle="treeview" role="menu" data-accordion="false">{{items}}</ul>',
-                'menuItem' => '<li class="nav-item{{class}}{{dropdownOpenClass}}">{{text}}{{nest}}</li>',
-                'menuItemDisabled' => '<li class="nav-item"><a class="nav-link disabled" aria-disabled="true">{{icon}}<p>{{text}}</p></a></li>',
-                'menuItemLink' => '<a href="{{url}}" class="nav-link{{class}}{{activeClass}}">{{icon}}<p>{{text}}{{append}}</p></a>',
-                'menuItemLinkNest' => '<a href="{{url}}" class="nav-link{{class}}{{activeClass}}">{{icon}}<p>{{text}}{{append}}<i class="nav-arrow bi bi-chevron-right"></i></p></a>',
+                'menuItem' => '<li class="nav-item{{class}}{{dropdownOpenClass}}"{{attrs}}>{{text}}{{nest}}</li>',
+                'menuItemDisabled' => '<li class="nav-item"><a class="nav-link disabled" aria-disabled="true"{{attrs}}>{{icon}}<p>{{text}}</p></a></li>',
+                'menuItemLink' => '<a href="{{url}}" class="nav-link{{class}}{{activeClass}}"{{attrs}}>{{icon}}<p>{{text}}{{append}}</p></a>',
+                'menuItemLinkNest' => '<a href="{{url}}" class="nav-link{{class}}{{activeClass}}"{{attrs}}>{{icon}}<p>{{text}}{{append}}<i class="nav-arrow bi bi-chevron-right"></i></p></a>',
 
                 'dropdownContainer' => '<ul class="nav nav-treeview">{{items}}</ul>',
-                'dropdownItem' => '<li class="nav-item">{{text}}{{nest}}</li>',
-                'dropdownItemDisabled' => '<li class="nav-item">{{text}}{{nest}}</li>',
-                'dropdownItemLink' => '<a href="{{url}}" class="nav-link{{activeClass}}">{{icon}}<p>{{text}}{{append}}</p></a>',
-                'dropdownItemLinkNest' => '<a href="{{url}}" class="nav-link{{activeClass}}">{{icon}}<p>{{text}}{{append}}<i class="nav-arrow bi bi-chevron-right"></i></p></a>',
+                'dropdownItem' => '<li class="nav-item"{{attrs}}>{{text}}{{nest}}</li>',
+                'dropdownItemDisabled' => '<li class="nav-item"{{attrs}}>{{text}}{{nest}}</li>',
+                'dropdownItemLink' => '<a href="{{url}}" class="nav-link{{activeClass}}"{{attrs}}>{{icon}}<p>{{text}}{{append}}</p></a>',
+                'dropdownItemLinkNest' => '<a href="{{url}}" class="nav-link{{activeClass}}"{{attrs}}>{{icon}}<p>{{text}}{{append}}<i class="nav-arrow bi bi-chevron-right"></i></p></a>',
             ],
         ]);
     }

diff --git a/templates/element/header/menu.php b/templates/element/header/menu.php
@@ -1,5 +1,51 @@
-<ul class="navbar-nav">
-    <li class="nav-item"> <a class="nav-link" data-lte-toggle="sidebar" href="#" role="button"> <i class="bi bi-list"></i> </a> </li>
-    <li class="nav-item d-none d-md-block"> <a href="#" class="nav-link">Home</a> </li>
-    <li class="nav-item d-none d-md-block"> <a href="#" class="nav-link">Contact</a> </li>
-</ul> <!--end::Start Navbar Links--> <!--begin::End Navbar Links-->
+<?php
+
+/**
+ * @var \App\View\AppView $this
+ */
+
+$headerMenu = [
+    [
+        'label' => '<i class="bi bi-list"></i>',
+        'url' => '#',
+        'data-lte-toggle' => 'sidebar',
+        'role' => 'button',
+    ],
+    [
+        'label' => __('Home'),
+        'url' => '/',
+        'container' => [
+            'class' => 'd-none d-md-block',
+        ]
+    ],
+    [
+        'label' => __('Contact'),
+        'url' => '#',
+        'container' => [
+            'class' => 'd-none d-md-block',
+        ]
+    ],
+    'debug' => [
+        'label' => __('Debug'),
+        'url' => 'cakelte/debug',
+        'container' => [
+            'class' => 'd-none d-md-block',
+        ]
+    ],
+    'theme' => [
+        'label' => __('Theme'),
+        'url' => 'adminlte',
+        'container' => [
+            'class' => 'd-none d-md-block',
+        ]
+    ],
+    'logout' => [
+        'label' => __('Logout'),
+        'url' => '#',
+        'container' => [
+            'class' => 'd-none d-md-block',
+        ]
+    ],
+];
+
+echo $this->Menu->render($headerMenu, ['menuClass' => 'navbar-nav']);