overhauled sidenav

Author: MacGyer

src/widgets/navigation/Nav.php

@@ -110,32 +110,6 @@ class Nav extends BaseWidget
      */
     public $dropDownCaret;
 
-    /**
-     * @var array the options for the underlying JS sideNav() plugin.
-     * The following options are supported:
-     * - menuWidth: 300, // Default is 240
-     * - edge: 'right', // Choose the horizontal origin
-     * - closeOnClick: true, // Closes side-nav on `<a>` clicks, useful for Angular/Meteor
-     * - draggable: true // Choose whether you can drag to open on touch screens
-     *
-     * @see http://materializecss.com/side-nav.html#options
-     */
-    public $sideNavClientOptions = [];
-
-    /**
-     * @var array the configuration options for the toggle button.
-     * The toggle button is rendered by the [[\macgyer\yii2materializecss\widgets\Button|Button]] widget. See the docs for all available options.
-     *
-     * @see \macgyer\yii2materializecss\widgets\Button|Button
-     */
-    public $sideNavToggleButtonOptions = [];
-
-    /**
-     * @var boolean whether to render a side navigation.
-     * Set this option to `false` if you do not want the side navigation to be rendered automatically.
-     */
-    public $renderSideNav = true;
-
     /**
      * Initializes the widget.
      */
@@ -161,10 +135,6 @@ public function run()
         MaterializeAsset::register($this->getView());
         $html[] = $this->renderItems();
 
-        if ($this->renderSideNav === true) {
-            $html[] = $this->renderSideNav();
-        }
-
         return implode("\n", $html);
     }
 
@@ -214,7 +184,7 @@ protected function renderItem($item)
         if (empty($items)) {
             $items = '';
         } else {
-            $toggleTarget = 'dropdown_' . md5(uniqid());
+            $toggleTarget = $this->getUniqueId('dropdown_');
             $linkOptions['data-target'] = $toggleTarget;
             Html::addCssClass($options, ['widget' => 'dropdown']);
             Html::addCssClass($linkOptions, ['widget' => 'dropdown-trigger']);
@@ -260,22 +230,6 @@ protected function renderDropdown($items, $parentItem, $targetId)
             'items' => $items,
             'encodeLabels' => $this->encodeLabels,
             'toggleButtonOptions' => false,
-//            'clientOptions' => false,
-//            'view' => $this->getView(),
-        ]);
-    }
-
-    /**
-     * Renders the side navigation and corresponding toggle button.
-     * @return string the rendered side navigation markup.
-     * @throws \Exception
-     */
-    protected function renderSideNav()
-    {
-        return SideNav::widget([
-            'items' => $this->items,
-            'toggleButtonOptions' => $this->sideNavToggleButtonOptions,
-            'clientOptions' => $this->sideNavClientOptions,
         ]);
     }
 

src/widgets/navigation/NavBar.php

@@ -10,7 +10,10 @@
 use macgyer\yii2materializecss\assets\MaterializePluginAsset;
 use macgyer\yii2materializecss\lib\BaseWidget;
 use macgyer\yii2materializecss\lib\Html;
+use macgyer\yii2materializecss\widgets\Button;
+use macgyer\yii2materializecss\widgets\Icon;
 use Yii;
+use yii\helpers\ArrayHelper;
 
 /**
  * NavBar renders a navbar HTML component.
@@ -99,13 +102,56 @@ class NavBar extends BaseWidget
      */
     public $wrapperOptions = [];
 
+    /**
+     * @var array the side nav configuration options.
+     * See SideNav|SideNav for details.
+     */
+    public $sidenavOptions = [];
+
+    /**
+     * @var bool whether the side nav shall be rendered.
+     */
+    public $renderSidenav = true;
+
+    /**
+     * @var array the options for the underlying JS sideNav() plugin.
+     * @see https://materializecss.com/sidenav.html#options
+     */
+    public $sidenavClientOptions = [];
+
+    /**
+     * @var array the configuration options for the toggle button.
+     * The toggle button is rendered by the [[\macgyer\yii2materializecss\widgets\Button|Button]] widget. See the docs for all available options.
+     *
+     * @see \macgyer\yii2materializecss\widgets\Button|Button
+     */
+    public $sidenavToggleButtonOptions = [];
+
+    /**
+     * @var array list of items in the nav widget. Each array element represents a single
+     * menu item which can be either a string or an array with the following structure:
+     *
+     * - label: string, required, the nav item label.
+     * - url: optional, the item's URL. Defaults to "#".
+     * - visible: boolean, optional, whether this menu item is visible. Defaults to true.
+     * - linkOptions: array, optional, the HTML attributes of the item's link.
+     * - options: array, optional, the HTML attributes of the item container (LI).
+     * - active: boolean, optional, whether the item should be on active state or not.
+     * - dropDownOptions: array, optional, the HTML options that will passed to the [[Dropdown]] widget.
+     * - items: array|string, optional, the configuration array for creating a [[Dropdown]] widget,
+     *   or a string representing the dropdown menu. Note that Bootstrap does not support sub-dropdown menus.
+     * - encode: boolean, optional, whether the label will be HTML-encoded. If set, supersedes the $encodeLabels option for only this item.
+     *
+     * If a menu item is a string, it will be rendered directly without HTML encoding.
+     */
+    public $sidenavItems = [];
+
     /**
      * Initializes the widget.
      */
     public function init()
     {
         parent::init();
-        $this->clientOptions = false;
         $html = [];
 
         if (empty($this->options['role'])) {
@@ -140,9 +186,18 @@ public function init()
      */
     public function run()
     {
+        if ($this->renderSidenav) {
+            $sidenavId = $this->getUniqueId('sidenav_');
+            $this->initSidenav($sidenavId);
+        }
+
         $html = [];
         $html[] = Html::endTag('div'); // container
 
+        if ($this->renderSidenav) {
+            $html[] = $this->renderSidenavToggleButton();
+        }
+
         $html[] = Html::endTag('div'); // nav-wrapper
 
         $html[] = Html::endTag('nav');
@@ -151,8 +206,48 @@ public function run()
             $html[] = Html::endTag('div');
         }
 
-        MaterializePluginAsset::register($this->getView());
+        if ($this->renderSidenav) {
+            $html[] = $this->renderSidenav($sidenavId);
+        }
 
         return implode("\n", $html);
     }
+
+    protected function initSidenav($sidenavId)
+    {
+        $this->sidenavToggleButtonOptions = ArrayHelper::merge([
+            'label' => false,
+            'icon' => [
+                'name' => 'menu'
+            ],
+            'type' => Button::TYPE_FLAT,
+        ], $this->sidenavToggleButtonOptions);
+
+        if (!isset($this->sidenavToggleButtonOptions['options']['data-target'])) {
+            $this->sidenavToggleButtonOptions['options']['data-target'] = $sidenavId;
+        }
+
+        Html::addCssClass($this->sidenavToggleButtonOptions['options'], ['trigger' => 'sidenav-trigger']);
+    }
+
+    /**
+     * Renders the side navigation and corresponding toggle button.
+     * @param $sidenavId
+     * @return string the rendered side navigation markup.
+     * @throws \Exception
+     */
+    protected function renderSidenav($sidenavId)
+    {
+        return SideNav::widget([
+            'items' => $this->sidenavItems,
+            'renderToggleButton' => false,
+            'clientOptions' => $this->sidenavClientOptions,
+            'options' => ['id' => $sidenavId],
+        ]);
+    }
+
+    protected function renderSidenavToggleButton()
+    {
+        return Button::widget($this->sidenavToggleButtonOptions);
+    }
 }