feat: extra margin setting for flexible menu items

assets/source/3.0/js/admin/flexibleHeader/helpers/defaultEditValues.ts

@@ -1,5 +1,6 @@
 import { Settings } from "../interfaces"
 
 export const defaultEditValues: Settings = {
-    align: 'right'
+    align: 'right',
+    margin: 'none'
 }

assets/source/3.0/js/admin/flexibleHeader/helpers/html.ts

@@ -16,6 +16,14 @@ export function getDropdownHtml(settings: Settings, translations: any) {
                     <option value="center" ${settings.align === 'center' ? 'selected' : ''}>${translations.center ?? 'Center'}</option>
                     <option value="right" ${settings.align === 'right' ? 'selected' : ''}>${translations.right ?? 'Right'}</option>
                 </select>
+
+                <h3>${translations.margin ?? 'Margin'}</h3>
+                <select data-js-flexible-setting="margin">
+                    <option value="none" ${settings.margin === 'none' ? 'selected' : ''}>${translations.none ?? 'None'}</option>
+                    <option value="both" ${settings.margin === 'both' ? 'selected' : ''}>${translations.both ?? 'Both'}</option>
+                    <option value="left" ${settings.margin === 'left' ? 'selected' : ''}>${translations.left ?? 'Left'}</option>
+                    <option value="right" ${settings.margin === 'right' ? 'selected' : ''}>${translations.right ?? 'Right'}</option>
+                </select>
             </div>
         </div>
     `;

library/Controller/Header/Flexible.php

@@ -7,6 +7,7 @@
 use Municipio\Controller\Header\AlignmentTransformer;
 use Municipio\Controller\Header\FlipKeyValueTransformer;
 use Municipio\Controller\Header\HeaderVisibilityClasses;
+use Municipio\Controller\Header\MarginTransformer;
 
 /**
  * Class Flexible
@@ -21,6 +22,7 @@ class Flexible implements HeaderInterface
     private FlipKeyValueTransformer $flipKeyValueTransformer;
     private MenuVisibilityTransformer $menuVisibilityTransformerInstance;
     private HeaderVisibilityClasses $headerVisibilityClassesInstance;
+    private MarginTransformer $marginTransformerInstance;
     private IsResponsiveMenuTransformer $isResponsiveMenu;
     private string $headerSettingKey           = 'header_sortable_section_';
     private string $headerSettingKeyResponsive = 'Responsive';
@@ -39,6 +41,7 @@ public function __construct(private object $customizer)
         $this->isResponsiveMenu                  = new IsResponsiveMenuTransformer();
         $this->menuVisibilityTransformerInstance = new MenuVisibilityTransformer();
         $this->menuOrderTransformerInstance      = new MenuOrderTransformer('@md');
+        $this->marginTransformerInstance         = new MarginTransformer($this->getHiddenMenuItemsData());
         $this->alignmentTransformerInstance      = new AlignmentTransformer($this->getHiddenMenuItemsData());
     }
 
@@ -131,6 +134,7 @@ private function getItems(string $section): array
         $items = $this->isResponsiveMenu->transform($items, $this->isResponsive);
         $items = $this->menuOrderTransformerInstance->transform($items);
         $items = $this->menuVisibilityTransformerInstance->transform($items);
+        $items = $this->marginTransformerInstance->transform($items, $setting);
         $items = $this->alignmentTransformerInstance->transform($items, $setting);
 
         return $items;

library/Controller/Header/MarginTransformer.php

@@ -0,0 +1,72 @@
+<?php
+
+namespace Municipio\Controller\Header;
+
+/**
+ * MarginTransformer class.
+ *
+ * This class is responsible for transforming the margin data.
+ */
+class MarginTransformer 
+{
+    /**
+     * Class MarginTransformer
+     *
+     * This class is responsible for transforming the margin data of the header.
+     */
+    public function __construct(private object $data)
+    {}
+
+    /**
+     * Transforms the header menu items by applying margin classes based on the settings.
+     *
+     * @param array $items The header menu items.
+     * @param mixed $settings The settings for applying margin classes.
+     * @return array The transformed header menu items.
+     */
+    public function transform($items, $settings): array
+    {
+        if (empty($items['modified'])) {
+            return $items;
+        }
+
+        foreach ($items['modified'] as $menu => &$classes) {
+            if (!empty($this->data->{$settings}->{$menu}->margin)) {
+                $classes = $this->getMarginClass($classes, $this->data->{$settings}->{$menu}->margin);
+            }
+        }
+
+        return $items;
+    }
+
+    /**
+     * Returns an array of margin classes based on the given margin value.
+     *
+     * @param array $classes The existing classes.
+     * @param string $margin The margin value ('none', 'both', or any other value).
+     * @return array The updated array of classes.
+     */
+    private function getMarginClass(array $classes, string $marginDirection)
+    {
+        if ($marginDirection === 'none') {
+        } elseif ($marginDirection === 'both') {
+            $classes[] = $this->buildMarginUtility('left');
+            $classes[] = $this->buildMarginUtility('right');
+        } else {
+            $classes[] = $this->buildMarginUtility($marginDirection);
+        }
+
+        return $classes;
+    }
+
+    /**
+     * Builds a margin utility class based on the given margin direction.
+     *
+     * @param string $marginDirection The direction of the margin.
+     * @return string The generated margin utility class.
+     */
+    private function buildMarginUtility(string $marginDirection)
+    {
+        return "u-margin__$marginDirection--2";
+    }
+}

library/Theme/Enqueue.php

@@ -99,6 +99,11 @@ public function customizeScript()
                 'hiddenValue' => get_theme_mod('header_sortable_hidden_storage'),
                 'lang'        => [
                     'alignment' => __('Alignment', 'municipio'),
+                    'margin'    => __('Margin', 'municipio'),
+                    'left'      => __('Left', 'municipio'),
+                    'right'     => __('Right', 'municipio'),
+                    'both'      => __('Both', 'municipio'),
+                    'none'      => __('None', 'municipio'),
                 ]
             ]
         );