sidebar menu - Githubissues

lucas-net-pl commented 9 years ago

Hello I;m new in Yii, so i can't itegrate my solutios, by i thihk thet it will be usefull for others im write sam Nav widget for render adminLTE sidebar easly

here a code:

<?php 
/**
 * @link http://www.lucas.net.pl/
 * @copyright Copyright (c) 2014 Łukasz A. Grabowski
 * @license LGPLv3
 */

namespace common\components;

use Yii;
use yii\base\InvalidConfigException;
use yii\helpers\ArrayHelper;
use yii\helpers\Html;
use yii\bootstrap\Nav;

class NavLTE extends Nav {

    /**
     * @var string default icon for menu items.
     * @see renderITem
     */
    public $iconDefault = 'chevron-right';

    /**
     * @var string default icon for sub menu items.
     * @see renderITem
     */
    public $iconSubDefault = 'angle-double-right';

    /**
     * @var string default badge background.
     * @see renderITem
     */
    public $badgeColorDefault = '';

    /**
     * @var array available badge background colors.
     * @see renderITem
     */
    public $badgeColorAvailable = [ 'gray', 'black', 'red', 'yellow', 'aqua', 'blue', 'light-blue', 'green', 'navy', 'teal', 'olive', 'lime', 'orange', 'fuchsia', 'purple', 'maroon' ];

    /**
     * Initializes the widget.
     */
    public function init()
    {
        parent::init();
        Html::addCssClass($this->options, 'sidebar-menu');
    }

    /**
     * Renders a widget's item.
     * @param string|array $item the item to render.
     * @return string the rendering result.
     * @throws InvalidConfigException
     */
    public function renderItem($item, $sub = false)
    {
        if (is_string($item)) {
            return $item;
        }
        if (!isset($item['label'])) {
            throw new InvalidConfigException("The 'label' option is required.");
        }
        $encodeLabel = isset($item['encode']) ? $item['encode'] : $this->encodeLabels;
        $label = $encodeLabel ? Html::encode($item['label']) : $item['label'];
        $options = ArrayHelper::getValue($item, 'options', []);
        if(!$sub) $items = ArrayHelper::getValue($item, 'items');
        $ico = ArrayHelper::getValue($item, 'ico');
        $textClass = ArrayHelper::getValue($item, 'textClass');
        $badge = ArrayHelper::getValue($item, 'badge');
        $url = ArrayHelper::getValue($item, 'url', '#');
        $linkOptions = ArrayHelper::getValue($item, 'linkOptions', []);

        if (isset($item['active'])) {
            $active = ArrayHelper::remove($item, 'active', false);
        } else {
            $active = $this->isItemActive($item);
        }

        $submenu = '';
        if (!$sub && $items !== null) {
            Html::addCssClass($options, 'treeview');
            $submenuClass = array();
            Html::addCssClass($submenuClass, 'fa');
            Html::addCssClass($submenuClass, 'fa-angle-left');
            Html::addCssClass($submenuClass, 'pull-right');
            $submenu = ' ' . Html::tag('i', '', $submenuClass);
            if (is_array($items)) {
                if ($this->activateItems) {
                    $items = $this->isChildActive($items, $active);
                }
                $items = $this->renderSubItems($items);
            }
        }

        if (!$ico) {
            $ico = $sub ? $this->iconSubDefault : $this->iconDefault;
        };

        if ($this->activateItems && $active) {
            Html::addCssClass($options, 'active');
        }

         $icoOptions = array();
        Html::addCssClass($icoOptions, 'fa');
        Html::addCssClass($icoOptions, 'fa-'.$ico);
          $textOptions = array();
          if (is_array($textClass)) {
            foreach($textClass as $tc) if (is_string($tc) && $tc != '') {
                Html::addCssClass($textOptions, $tc);
            };
          } else if (is_string($textClass) && $textClass != '') {
            Html::addCssClass($textOptions, $textClass);
          };
        $badgeStr = '';
        if ($badge) {
            if (is_string($badge) && $badge != '') $badge = [ 'text' => $badge ];
            if (is_array($badge) && (isset($badge['text']) || isset($badge['ico']))) {
                if (!isset($badge['text'])) $badge['text'] = '';
                $infoTagOptions = array();
                Html::addCssClass($infoTagOptions, 'badge');
                Html::addCssClass($infoTagOptions, 'pull-right');
                if (isset($badge['color']) && in_array($badge['color'], $this->badgeColorAvailable)) {
                    Html::addCssClass($infoTagOptions, 'bg-'.$badge['color']);
                } else {
                    if($this->badgeColorDefault != '') Html::addCssClass($infoTagOptions, 'bg-'.$this->badgeColorDefault);
                };
                if (isset($badge['ico'])) {
                    $baio = array();
                    Html::addCssClass($baio, 'fa');
                    Html::addCssClass($baio, 'fa-'.$badge['ico']);
                    $badge['text'] = Html::tag('i', '', $baio) . ($badge['text'] ? ' ' . $badge['text'] : '');
                };
                $badgeStr = ' ' .Html::tag('small', $badge['text'], $infoTagOptions);
            };
        };
        if(!$sub) {
            $label = Html::tag('i', '', $icoOptions) . ' ' . Html::tag('span', $label, $textOptions) . $submenu . $badgeStr;
        } else {
            $label = Html::tag('i', '', $icoOptions) . ' ' . $label . $badgeStr;
        };

        if(!isset($items)) $items = '';
        return Html::tag('li', Html::a($label, $url, $linkOptions) . $items, $options);
    }

    /**
     * Renders widget subitems
     * @param string|array $item the item to render.
     * @return string the rendering result.
     */
    public function renderSubItems($items) {
        $it = [];
        foreach ($items as $item) {
            if (!isset($item['visible']) || $item['visible'])  {
                $it[] = $this->renderItem($item, true);
            }
        }

        return Html::tag('ul', implode("\n", $it), ['class' => 'treeview-menu']);
    }

};

If You think, ith usable for others, pleas integrate it.

Here are example of usage in left.php:

<?php
use yii\bootstrap\Nav;
use common\components\NavLTE;

?>
<aside class="left-side sidebar-offcanvas">

    <section class="sidebar">

        <?php if (!Yii::$app->user->isGuest) : ?>
            <div class="user-panel">
                <div class="pull-left image">
                    <img src="<?= $directoryAsset ?>/img/avatar5.png" class="img-circle" alt="User Image"/>
                </div>
                <div class="pull-left info">
                    <p>Hello, <?= @Yii::$app->user->identity->username ?></p>
                    <a href="<?= $directoryAsset ?>/#">
                        <i class="fa fa-circle text-success"></i> Online
                    </a>
                </div>
            </div>
        <?php endif ?>

        <form action="#" method="get" class="sidebar-form">
            <div class="input-group">
                <input type="text" name="q" class="form-control" placeholder="Search..."/>
                            <span class="input-group-btn">
                                <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i
                                        class="fa fa-search"></i></button>
                            </span>
            </div>
        </form>

        <?=
        NavLTE::widget(
            [
                'encodeLabels' => false,
                'items' => [
                    [
                        'label' => 'Menu Yii2',
                        'url' => '#',
                        'ico' => 'angle-down',
                        'textClass'=> ['text-info']
                    ],
                    ['label' => 'Gii', 'url' => ['/gii'], 'ico' => 'file-code-o' ],
                    ['label' => 'Debug', 'url' => ['/debug'], 'ico' => 'dashboard' ],
                ],
            ]
        );
        ?>
        <!-- You can delete next ul.sidebar-menu. It's just demo. -->
        <?=
        NavLTE::widget(
            [
                'items' => [
                    [
                        'label' => 'Menu AdminLTE',
                        'url' => '#',
                        'ico' => 'angle-down',
                        'textClass'=> ['text-info']
                    ],
                    ['label' => 'Dashboard', 'url' => $directoryAsset.'/index.html', 'ico' => 'dashboard' ],
                    ['label' => 'Widgets', 'url' => $directoryAsset.'/pages/widgets.html', 'ico' => 'th', 'badge' => [ 'text' => 'new', 'color' => 'green', 'ico' => 'check' ] ],
                    [
                        'label' => 'Charts',
                        'url' => $directoryAsset.'/#',
                        'ico' => 'bar-chart-o',
                        'items' => [
                            ['label' => 'Morris', 'url' => $directoryAsset.'/pages/charts/morris.html'],
                            ['label' => 'Flot', 'url' => $directoryAsset.'/pages/charts/flot.html'],
                            ['label' => 'Inline chart', 'url' => $directoryAsset.'/pages/charts/inline.html', 'ico' => 'circle'],
                        ],
                    ],
                    [
                        'label' => 'UI Elements',
                        'url' => $directoryAsset.'/#',
                        'ico' => 'laptop',
                        'items' => [
                            ['label' => 'General', 'url' => $directoryAsset.'/pages/UI/general.html'],
                            ['label' => 'Icons', 'url' => $directoryAsset.'/pages/UI/icons.html', 'badge' => '11'],
                            ['label' => 'Buttons', 'url' => $directoryAsset.'/pages/UI/buttons.html'],
                            ['label' => 'Sliders', 'url' => $directoryAsset.'/pages/UI/sliders.html', 'badge' => [ 'ico' => 'th' ] ],
                            ['label' => 'Timeline', 'url' => $directoryAsset.'/pages/UI/timeline.html'],
                        ],
                    ],
                    [
                        'label' => 'Forms',
                        'url' => $directoryAsset.'/#',
                        'ico' => 'edit',
                        'items' => [
                            ['label' => 'General Elements', 'url' => $directoryAsset.'/pages/forms/general.html'],
                            ['label' => 'Advanced Elements', 'url' => $directoryAsset.'/pages/forms/advanced.html'],
                            ['label' => 'Editors', 'url' => $directoryAsset.'/pages/forms/editors.html'],
                        ],
                    ],
                    [
                        'label' => 'Tables',
                        'url' => $directoryAsset.'/#',
                        'ico' => 'table',
                        'items' => [
                            ['label' => 'Simple tables', 'url' => $directoryAsset.'/pages/tables/simple.html'],
                            ['label' => 'Data tables', 'url' => $directoryAsset.'/pages/tables/data.html'],
                        ],
                    ],
                    ['label' => 'Calendar', 'url' => $directoryAsset.'/pages/calendar.html', 'ico' => 'calendar', 'badge' => [ 'text' => '3', 'color' => 'red' ] ],
                    ['label' => 'Mailbox', 'url' => $directoryAsset.'/pages/mailbox.html', 'ico' => 'envelope', 'badge' => [ 'text' => '12', 'color' => 'yellow' ] ],
                    [
                        'label' => 'Examples',
                        'url' => $directoryAsset.'/#',
                        'ico' => 'folder',
                        'items' => [
                            ['label' => 'Invoice', 'url' => $directoryAsset.'/pages/examples/invoice.html'],
                            ['label' => 'Login', 'url' => $directoryAsset.'/pages/examples/login.html'],
                            ['label' => 'Register', 'url' => $directoryAsset.'/pages/examples/register.html'],
                            ['label' => 'Lockscreen', 'url' => $directoryAsset.'/pages/examples/lockscreen.html'],
                            ['label' => '404 Error', 'url' => $directoryAsset.'/pages/examples/404.html'],
                            ['label' => '500 Error', 'url' => $directoryAsset.'/pages/examples/500.html'],
                            ['label' => 'Blank Page', 'url' => $directoryAsset.'/pages/examples/blank.html'],
                        ],
                    ],
                ],
            ]
        );
        ?>
    </section>

</aside>

kressly commented 9 years ago

Hello Thanks but Please can you give us a link showing a demo of this and what exactly does it do or does it add to the AdminLte ?

lucas-net-pl commented 9 years ago

I no have demo. I begin working with Yii and make it in free time (what is mean free time? :D ) If i finish, then i;ll publicate demo, but it may take lonk tiem.

This class Help to generate left side main adminLTE menu - like Nav::widget, but support speciach adminLTE classe (by defautl) icons, and badge, thent can be defined in array passing to widget .. like in sampe left.php file attached. With this Class You dont heed to "manualy" wride this menu

almasaeed2010 commented 9 years ago

Hello, This is a very nice contribution. However, I don't think this is the appropriate place to post this. To reach a wider audience, you might want to post this in the Yii forums or a blog post such as this http://www.yiiframework.com/wiki/729/tutorial-about-how-to-integrate-yii2-with-fantastic-theme-adminlte/

Nonetheless, thank you for the contribution and good luck!

Valonix commented 9 years ago

hello, tell me pls how i can add class active to item and parent item in current page? http://c2n.me/3cghUgd

i add your code in left.php and edit urls [ 'label' => 'Content', 'url' => $directoryAsset.'/#', 'ico' => 'bar-chart-o', 'items' => [ ['label' => 'Products', 'url' => Url::toRoute('products/index')], ['label' => 'Category', 'url' => Url::toRoute('category/index')], ['label' => 'Cities', 'url' => Url::toRoute('citys/index')], ], ],

then after click for example on Products. Menu item hasn`t class active.

lucas-net-pl commented 9 years ago

W dniu 11.02.2015 o 16:52, Valeriy pisze:

hello, tell me pls how i can add class active to item and parent item in current page? http://c2n.me/3cghUgd

— Reply to this email directly or view it on GitHub https://github.com/almasaeed2010/AdminLTE/issues/190#issuecomment-73904518.

Hello

Thist is done by function: protected function isItemActive($item) of NavLTE class, thent is similar to same function in Nav class.

So thist class will automaticly set active. Ele You cent overwrite this funcjion.

pozdrawiam

Łukasz A. Grabowski ul. Jana Czerskiego 12

PGP key ID: 27160538 ldap://keyserver.pgp.com http://lucas.net.pl/pgp/lucas.asc

Valonix commented 9 years ago

but why its not worked ? if i copying your code and changed urls ? use backend\components\NavLTE;

http://c2n.me/3cgEbfJ http://c2n.me/3cgEIdi

lucas-net-pl commented 9 years ago

I cant replay it Yet. Fo mi it working fine, i must try to debug it and find solutions. By i cen't do it erlier in end of next weak. Sory.

But i'l try to do it

W dniu 11.02.2015 o 18:17, Valeriy pisze:

but why its not worked ? if i copying your code and changed urls ? use backend\components\NavLTE;

<?= NavLTE::widget( [ 'items' => [ [ 'label' => 'Menu AdminLTE', 'url' => '#', 'ico' => 'angle-down', 'textClass'=> ['text-info'] ], ['label' => 'Dashboard', 'url' => $directoryAsset.'/index.html', 'ico' => 'dashboard' ], ['label' => 'Widgets', 'url' => $directoryAsset.'/pages/widgets.html', 'ico' => 'th', 'badge' => [ 'text' => 'new', 'color' => 'green', 'ico' => 'check' ] ], [ 'label' => 'Content', 'url' => $directoryAsset.'/#', 'ico' => 'bar-chart-o', 'items' => [ ['label' => 'Products', 'url' => Url::toRoute('products/index')], ['label' => 'Category', 'url' => Url::toRoute('category/index')], ['label' => 'Cities', 'url' => Url::toRoute('cities/index')], ], ], ......................other items

— Reply to this email directly or view it on GitHub https://github.com/almasaeed2010/AdminLTE/issues/190#issuecomment-73921892.

pozdrawiam

Łukasz A. Grabowski ul. Jana Czerskiego 12 44-105 Gliwice tel.: +48 604 466601 E-Mail: lucas@lucas.net.pl www.lucas.net.pl

PGP key ID: 27160538 ldap://keyserver.pgp.com http://lucas.net.pl/pgp/lucas.asc

Valonix commented 9 years ago

ty, i try to find what i doing wrong by my self. But if i can`t i will be visit this page again :))

liviuk2 commented 7 years ago

Hi, thanks for this!

hello, tell me pls how i can add class active to item and parent item in current page?

If someone still need this the solution is to add $this->activateParents = true; at the beginning of the function init()

ColorlibHQ / AdminLTE

sidebar menu #190