From 4358e648fdea78d3891dd3bf585ca4a190032bba Mon Sep 17 00:00:00 2001
From: Sonny Le <sonlv@templaza.com>
Date: Mon, 10 Jun 2024 11:52:31 +0700
Subject: [PATCH] Improve Navigation Widget

---
 framework/elements/navigation/navigation.php | 11 ++++++++++-
 framework/elements/navigation/navigation.xml | 16 ++++++++++++----
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/framework/elements/navigation/navigation.php b/framework/elements/navigation/navigation.php
index c395874b..dbf36b3f 100644
--- a/framework/elements/navigation/navigation.php
+++ b/framework/elements/navigation/navigation.php
@@ -34,16 +34,19 @@
 $alignment      = $alignment !== '' ? ' '. $alignment : '';
 $color          = Style::getColor($params->get('color', ''));
 $color_hover    = Style::getColor($params->get('color_hover', ''));
+$color_active   = Style::getColor($params->get('color_active', ''));
 $bgcolor        = Style::getColor($params->get('bgcolor', ''));
 $bgcolor_hover  = Style::getColor($params->get('bgcolor_hover', ''));
+$bgcolor_active = Style::getColor($params->get('bgcolor_active', ''));
 echo '<nav class="nav' . $alignment . $list_style . '">';
 foreach ($menu_items as $item) {
     $menu_params    =   Style::getSubFormParams($item->params);
     $target         =   isset($menu_params['target']) && $menu_params['target'] ? ' target="'.$menu_params['target'].'"' : '';
     $show_title     =   isset($menu_params['show_title']) && intval($menu_params['show_title']) ? ' title="'.$menu_params['title'].'"' : '';
+    $active         =   isset($menu_params['active']) && intval($menu_params['active']) ? ' active' : '';
     $rel            =   isset($menu_params['rel']) && $menu_params['rel'] ? ' rel="'.$menu_params['rel'].'"' : '';
     $icon           =   $menu_params['icon'] !== '' ? '<i class="me-2 '.$menu_params['icon'].'"></i>' : '';
-    echo '<a id="item-'.$item->id.'"  class="nav-link" href="' .$menu_params['link']. '"'. $show_title . $target . $rel . '>'.$icon.$menu_params['title'].'</a>';
+    echo '<a id="item-'.$item->id.'"  class="nav-link'.$active.'" href="' .$menu_params['link']. '"'. $show_title . $target . $rel . '>'.$icon.$menu_params['title'].'</a>';
 }
 echo '</nav>';
 
@@ -60,11 +63,17 @@
 $style_dark->child('.nav-link')->addCss('color', $color['dark']);
 $style->child('.nav-link')->hover()->addCss('color', $color_hover['light']);
 $style_dark->child('.nav-link')->hover()->addCss('color', $color_hover['dark']);
+$style->child('.nav-link')->active('.active')->addCss('color', $color_active['light']);
+$style_dark->child('.nav-link')->active('.active')->addCss('color', $color_active['dark']);
+
 // Background color style
 $style->child('.nav-link')->addCss('background-color', $bgcolor['light']);
 $style_dark->child('.nav-link')->addCss('background-color', $bgcolor['dark']);
 $style->child('.nav-link')->hover()->addCss('background-color', $bgcolor_hover['light']);
 $style_dark->child('.nav-link')->hover()->addCss('background-color', $bgcolor_hover['dark']);
+$style->child('.nav-link')->active('.active')->addCss('background-color', $bgcolor_active['light']);
+$style_dark->child('.nav-link')->active('.active')->addCss('background-color', $bgcolor_active['dark']);
+
 // Item Margin
 if (!empty($item_margin)) {
     $margin = \json_decode($item_margin, false);
diff --git a/framework/elements/navigation/navigation.xml b/framework/elements/navigation/navigation.xml
index 0e4fa47a..601730f8 100644
--- a/framework/elements/navigation/navigation.xml
+++ b/framework/elements/navigation/navigation.xml
@@ -19,6 +19,7 @@
                                 <field type="astroidtext" class="form-control" label="JGLOBAL_TITLE" name="title"/>
                                 <field type="astroidtext" label="ASTROID_WIDGET_LINK_LABEL" description="ASTROID_WIDGET_NAV_LINK_DESC" name="link" hint="https://astroidframe.work/"/>
                                 <field description="ASTROID_WIDGET_SHOW_TITLE_DESC" name="show_title" type="astroidradio" astroid-switch="true" default="1" label="ASTROID_WIDGET_SHOW_TITLE_LABEL"/>
+                                <field name="active" type="astroidradio" astroid-switch="true" default="0" label="ASTROID_WIDGET_ACTIVE"/>
                                 <field type="astroidicons" label="ASTROID_WIDGET_ICON_LABEL" name="icon"/>
                                 <field type="astroidlist" name="target" label="ASTROID_WIDGET_LINK_TARGET_LABEL" default="">
                                     <option value="">Default</option>
@@ -42,11 +43,18 @@
                 </field>
                 <field astroidgroup="misc_options" name="font_style" label="ASTROID_WIDGET_FONT_STYLES_LABEL" type="astroidtypography" columns="1" preview="false" color-picker="false"/>
 
-                <field astroidgroup="color_options" name="color" type="astroidcolor" label="ASTROID_WIDGET_COLOR_LABEL"/>
-                <field astroidgroup="color_options" name="color_hover" type="astroidcolor" label="ASTROID_WIDGET_COLOR_HOVER_LABEL"/>
+                <field astroidgroup="color_options" name="color_settings" type="astroidradio" width="full" default="color">
+                    <option value="color">TPL_ASTROID_COLOR</option>
+                    <option value="hover">TPL_ASTROID_COLOR_HOVER</option>
+                    <option value="active">TPL_ASTROID_COLOR_ACTIVE</option>
+                </field>
+                <field astroidgroup="color_options" ngShow="[color_settings]=='color'" name="color" type="astroidcolor" label="ASTROID_WIDGET_COLOR_LABEL"/>
+                <field astroidgroup="color_options" ngShow="[color_settings]=='hover'" name="color_hover" type="astroidcolor" label="ASTROID_WIDGET_COLOR_LABEL"/>
+                <field astroidgroup="color_options" ngShow="[color_settings]=='active'" name="color_active" type="astroidcolor" label="ASTROID_WIDGET_COLOR_LABEL"/>
 
-                <field astroidgroup="bgcolor_options" name="bgcolor" type="astroidcolor" label="ASTROID_WIDGET_COLOR_LABEL"/>
-                <field astroidgroup="bgcolor_options" name="bgcolor_hover" type="astroidcolor" label="ASTROID_WIDGET_COLOR_HOVER_LABEL"/>
+                <field astroidgroup="color_options" ngShow="[color_settings]=='color'" name="bgcolor" type="astroidcolor" label="TPL_ASTROID_BACKGROUND_COLOR_LABEL"/>
+                <field astroidgroup="color_options" ngShow="[color_settings]=='hover'" name="bgcolor_hover" type="astroidcolor" label="TPL_ASTROID_BACKGROUND_COLOR_LABEL"/>
+                <field astroidgroup="color_options" ngShow="[color_settings]=='active'" name="bgcolor_active" type="astroidcolor" label="TPL_ASTROID_BACKGROUND_COLOR_LABEL"/>
 
                 <field astroidgroup="spacing_options" name="item_margin" type="astroidspacing" label="ASTROID_WIDGET_MARGIN_LABEL" />
                 <field astroidgroup="spacing_options" name="item_padding" type="astroidspacing" label="ASTROID_WIDGET_PADDING_LABEL" />