feat: drawer menu level indention and new toggler (#1368)

michaelclaesson · Sebastian Thulin · web-flow · commit c919136b05da · 2025-04-11T11:54:47.000+02:00
* Support for indenting drawer menu on each level and having plus/minus toggle instead of caret

* fix: move indentation &amp; icons to a separate panel (vertical).

* fix: use select field to provide setting for indentation of vertical nav menus

* fix: set defaults

* fix: correct icon

* fix: remove hardcoded modifier. Add reactive icon for toggle button.

* fix: use a switch

can be used due to new param in component.

* fix: set a resonable default value.

* fix: rename tab menu.

* chore: update styleguide

* chore: add swedish translations.

---------

Co-authored-by: Sebastian Thulin &lt;sebastian.thulin@helsingborg.se&gt;
diff --git a/languages/sv_SE.mo b/languages/sv_SE.mo
diff --git a/languages/sv_SE.po b/languages/sv_SE.po
diff --git a/library/Api/Navigation/ChildrenRender.php b/library/Api/Navigation/ChildrenRender.php
@@ -36,7 +36,7 @@ public function handleRequest(WP_REST_Request $request): WP_REST_Response
             $parentId   = !empty($params['pageId']) ? $params['pageId'] : null;
             $viewPath   = !empty($params['viewPath']) ? $params['viewPath'] : false;
             $identifier = !empty($params['identifier']) ? $params['identifier'] : '';
-            $depth      = !empty($params['depth']) ? $params['depth'] : '0';
+            $depth      = !empty($params['depth']) ? $params['depth'] : '1';
             $lang       = TranslatedLabels::getLang();
 
             if (!empty($parentId)) {
diff --git a/library/Controller/Navigation/Decorators/Menu/PageTreeAppendMenuItemsFetchUrl.php b/library/Controller/Navigation/Decorators/Menu/PageTreeAppendMenuItemsFetchUrl.php
@@ -41,10 +41,12 @@ public function getMenu(): array
 
         $homeUrl = $this->wpService->applyFilters('Municipio/homeUrl', $this->wpService->escUrl($this->wpService->getHomeUrl()));
 
+        $depth = isset($_GET['depth']) ? intval($_GET['depth']) + 1 : 2;
+
         foreach ($menu['items'] as &$menuItem) {
             $fetchUrl = $homeUrl
             . '/wp-json/municipio/v1/navigation/children/render'
-            . '?' . 'pageId=' .  $menuItem['id'] . '&viewPath=' . 'partials.navigation.'
+            . '?' . 'pageId=' .  $menuItem['id'] . '&depth=' . $depth . '&viewPath=' . 'partials.navigation.'
             . $targetMenuIdentifiers[$identifier] . '&identifier='
             . $targetMenuIdentifiers[$identifier];
 
diff --git a/library/Customizer/PanelsRegistry.php b/library/Customizer/PanelsRegistry.php
@@ -459,6 +459,11 @@ public static function registerNavMenusPanel()
                     ->setID('municipio_customizer_section_header_panel_tab_menu')
                     ->setTitle(esc_html__('Tab menu', 'municipio'))
                     ->setFieldsCallback(fn() => new \Municipio\Customizer\Sections\Menu\Tabmenu('municipio_customizer_section_header_panel_tab_menu'))
+            )->addSection(
+                KirkiPanelSection::create()
+                    ->setID('municipio_customizer_section_vertical')
+                    ->setTitle(esc_html__('General: Menu Settings (vertical)', 'municipio'))
+                    ->setFieldsCallback(fn() => new \Municipio\Customizer\Sections\Menu\Vertical('municipio_customizer_section_vertical'))
             )
             ->register();
     }
diff --git a/library/Customizer/Sections/Menu/Vertical.php b/library/Customizer/Sections/Menu/Vertical.php
@@ -0,0 +1,66 @@
+<?php
+
+namespace Municipio\Customizer\Sections\Menu;
+
+use Municipio\Customizer\KirkiField;
+
+class Vertical
+{
+    public const SECTION_ID = "municipio_customizer_section_vertical";
+
+    public function __construct(string $sectionID)
+    {
+    
+        KirkiField::addField([
+            'type'        => 'select',
+            'settings'    => 'vertical_menu_sublevel_trigger_icon',
+            'label'       => esc_html__('Submenu expand icon', 'municipio'),
+            'description' => esc_html__('The icon that will indicate that a submenu can be expanded', 'municipio'),
+            'section'     => $sectionID,
+            'default'     => 'expand_more',
+            'priority'    => 10,
+            'choices'     => [
+                'expand_more' => esc_html__('Directional Caret', 'municipio'), //Standard material icon class
+                'toggleAriaPressedPlusMinus' => esc_html__('Plus/Minus', 'municipio'), //Custom svg
+            ],
+            'output'      => [
+                [
+                    'type'    => 'component_data',
+                    'dataKey' => 'expandIcon',
+                    'context' => [
+                        [
+                            'context'  => 'component.nav',
+                            'operator' => '==',
+                        ]
+                    ]
+                ]
+            ],
+        ]);
+
+        KirkiField::addField([
+            'type'        => 'switch',
+            'settings'    => 'vetical_menu_indent_sublevels',
+            'label'       => esc_html__('Indent each level', 'municipio'),
+            'description' => esc_html__('Submenus will indent one step for every level down', 'municipio'),
+            'section'     => $sectionID,
+            'default'     => false,
+            'choices'   => [
+                true  => esc_html__('Enabled', 'municipio'),
+                false => esc_html__('Disabled', 'municipio'),
+            ],
+            'priority'    => 10,
+            'output'      => [
+                [
+                    'type'    => 'component_data',
+                    'dataKey' => 'indentSubLevels',
+                    'context' => [
+                        [
+                            'context'  => 'component.nav',
+                            'operator' => '==',
+                        ]
+                    ]
+                ]
+            ],
+        ]);
+    }
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/views/v3/partials/navigation/drawer.blade.php b/views/v3/partials/navigation/drawer.blade.php
@@ -5,7 +5,7 @@
         'color' => $customizer->headerTriggerButtonColor,
         'style' => $customizer->headerTriggerButtonType,
         'size' => $customizer->headerTriggerButtonSize,
-        'icon' => 'menu',
+        'icon' => 'toggleAriaPressedHamburgerClose',
         'context' => ['site.header.menutrigger', 'site.header.casual.menutrigger'],
         'classList' => ['mobile-menu-trigger', 'u-order--10', 's-header-button'],
         'text' => $lang->menu,
@@ -64,7 +64,8 @@
                     'direction' => 'vertical',
                     'includeToggle' => true,
                     'height' => 'sm',
-                    'expandLabel' => $lang->expand
+                    'expandLabel' => $lang->expand,
+                    'context' => 'site.mobile-menu'
                 ])
             @endnav  
         @endslot
diff --git a/views/v3/partials/navigation/mobile.blade.php b/views/v3/partials/navigation/mobile.blade.php
@@ -6,7 +6,8 @@
         'includeToggle' => true,
         'classList' => $classList,
         'depth' => $depth ?? 1,
-        'expandLabel' => $lang->expand
+        'expandLabel' => $lang->expand,
+        'context' => 'site.mobile-menu'
     ])
     @endnav
 @else

Original file line number	Diff line number	Diff line change
`@@ -459,6 +459,11 @@ public static function registerNavMenusPanel()`
`459`	`459`	`->setID('municipio_customizer_section_header_panel_tab_menu')`
`460`	`460`	`->setTitle(esc_html__('Tab menu', 'municipio'))`
`461`	`461`	`->setFieldsCallback(fn() => new \Municipio\Customizer\Sections\Menu\Tabmenu('municipio_customizer_section_header_panel_tab_menu'))`
	`462`	`+ )->addSection(`
	`463`	`+ KirkiPanelSection::create()`
	`464`	`+ ->setID('municipio_customizer_section_vertical')`
	`465`	`+ ->setTitle(esc_html__('General: Menu Settings (vertical)', 'municipio'))`
	`466`	`+ ->setFieldsCallback(fn() => new \Municipio\Customizer\Sections\Menu\Vertical('municipio_customizer_section_vertical'))`
`462`	`467`	`)`
`463`	`468`	`->register();`
`464`	`469`	`}`