Fix #55: Manage navigation with KnpMenuBundle

Author: netsensei

CHANGELOG.md

@@ -7,6 +7,7 @@ Updates should follow the [Keep a CHANGELOG](http://keepachangelog.com/) princip
 ## NEXT - YYYY-MM-DD
 
 ### Added
+- Menu's are now managed via KnpMenuBundle.
 - Introducing a yarn/npm based front-end workflow.
 - Adhere to phpleague/skeleton best practices.
 - Updated .editorconfig.

app/AppKernel.php

@@ -28,6 +28,7 @@ public function registerBundles()
             new Doctrine\Bundle\FixturesBundle\DoctrineFixturesBundle(),
             new Doctrine\Bundle\MongoDBBundle\DoctrineMongoDBBundle(),
             new Bazinga\Bundle\HateoasBundle\BazingaHateoasBundle(),
+            new Knp\Bundle\MenuBundle\KnpMenuBundle(),
 
             // Own bundles
             new DataHub\OAIBundle\DataHubOAIBundle(),

app/Resources/DataHubOAuthBundle/views/Default/layout.html.twig

@@ -10,13 +10,17 @@
                     </h3>
                 </div>
                 <div class="list-group">
+
+                    {% set menuItem = knp_menu_get('main', ['OAuth']) %}
+                    {{ knp_menu_render(['main', 'OAuth']) }}
+                <!--
                     <a href="{{ path('datahub_oauth_clients_index') }}" class="list-group-item">
                         {{ 'Clients' | trans }}
                     </a>
 
                     <a href="{{ path('datahub_oauth_tokens_index') }}" class="list-group-item">
                         {{ 'Tokens' | trans }}
-                    </a>
+                    </a> -->
                 </div>
             </div>
         </div>

app/Resources/FOSUserBundle/views/Default/layout.html.twig

@@ -10,9 +10,8 @@
                     </h3>
                 </div>
                 <div class="list-group">
-                    <a href="{{ path('datahub_user_users_index') }}" class="list-group-item">
-                        {{ 'Users' | trans }}
-                    </a>
+                    {% set menuItem = knp_menu_get('main', ['Users']) %}
+                    {{ knp_menu_render(['main', 'Users']) }}
                 </div>
             </div>
         </div>

app/Resources/public/sass/main.scss

@@ -35,9 +35,11 @@
   .navbar-default .navbar-nav > li > a {
     color: black;
   }
-  
-  .navbar-default .navbar-nav > li > a.active {
+
+  .navbar-default .navbar-nav > li.active > a:hover,
+  .navbar-default .navbar-nav > li.active > a {
     color: white;
+    background-color: inherit;
   }
 
   .navbar-default .navbar-brand {

app/Resources/views/app/topnav.html.twig

@@ -13,57 +13,8 @@
                     </a>
                 </div>
                 <div id="navbar" class="navbar-collapse collapse">
-                    <ul class="nav navbar-nav main-nav">
-                        <li>
-                            <a href="{{ path('datahub_shared_default_index') }}"
-                                {% if app.request.attributes.get('_route') == 'datahub_shared_default_index' %} class="active"{% endif %}>
-                                {{ 'Dashboard' | trans }}
-                            </a>
-                        </li>
-                        {% if is_granted('ROLE_USER') and is_granted('ROLE_ADMIN') %}
-                            <li>
-                                <a href="{{ path('datahub_oauth_default_index') }}"
-                                {% if app.request.attributes.get('_route') == 'datahub_oauth_default_index' %} class="active"{% endif %}>
-                                    {{ 'OAuth' | trans }}
-                                </a>
-                            </li>
-                        {% endif %}
-                        {% if is_granted('ROLE_USER') and is_granted('ROLE_ADMIN') %}
-                            <li>
-                                <a href="{{ path('datahub_user_users_index') }}"
-                                {% if app.request.attributes.get('_route') == 'datahub_user_users_index' %} class="active"{% endif %}>
-                                    {{ 'Users' | trans }}
-                                </a>
-                            </li>
-                        {% endif %}
-                        <li>
-                            <a href="{{ path('nelmio_api_doc_index') }}">
-                                {{ 'REST API' | trans }}
-                            </a>
-                        </li>
-                        <li>
-                            <a href="{{ path('datahub_static_docs_oai') }}"
-                                {% if app.request.attributes.get('_route') == 'datahub_static_docs_oai' %} class="active"{% endif %}>
-                                {{ 'OAI-PMH' | trans }}
-                            </a>
-                        </li>
-                    </ul>
-                    <ul class="nav navbar-nav navbar-right">
-                    {% if is_granted('ROLE_USER') and is_granted('ROLE_ADMIN') %}
-                        <li>
-                            <a href="{{ path('fos_user_security_logout') }}">
-                                {{ 'Logout' | trans }}
-                            </a>
-                        </li>
-                    {% else %}
-                        <li>
-                            <a href="{{ path('fos_user_security_login') }}">
-                                {{ 'Login' | trans }}
-                            </a>
-                        </li>
-                    {% endif %}
-
-                    </ul>
+                    {{ knp_menu_render('main', { 'currentClass': 'active', 'depth': 1 }) }}
+                    {{ knp_menu_render('profile', { 'currentClass': 'active' }) }}
                 </div>
             </div>
         </nav>

app/config/services.yml

@@ -23,3 +23,10 @@ services:
         class: Twig_Extensions_Extension_Text
         tags:
             - name: twig.extension
+
+    datahub.core.menu_builder:
+        class: DataHub\SharedBundle\Menu\MenuBuilder
+        arguments: ["@knp_menu.factory", "@security.authorization_checker"]
+        tags:
+            - { name: knp_menu.menu_builder, method: createMainMenu, alias: main }
+            - { name: knp_menu.menu_builder, method: createProfileMenu, alias: profile }

composer.json

@@ -40,7 +40,8 @@
         "symfony/psr-http-message-bridge": "^1.0",
         "zendframework/zend-diactoros": "^1.3",
         "sabre/xml": "^1.5",
-        "willdurand/hateoas-bundle": "^1.3"
+        "willdurand/hateoas-bundle": "^1.3",
+        "knplabs/knp-menu-bundle": "^2.0"
     },
     "require-dev": {
         "sensio/generator-bundle": "~3.0",

composer.lock

@@ -0,0 +1,72 @@
+<?php
+
+namespace DataHub\SharedBundle\Menu;
+
+use Knp\Menu\FactoryInterface;
+use Symfony\Component\Security\Core\Authorization\AuthorizationCheckerInterface;
+
+class MenuBuilder
+{
+    private $factory;
+
+    /**
+     * Constructor
+     * 
+     * @param FactoryInterface $factory MenuFactory
+     * @param AuthorizationCheckerInterface $authChecker Authentication checker
+     */
+    public function __construct(FactoryInterface $factory, AuthorizationCheckerInterface $authChecker)
+    {
+        $this->factory = $factory;
+        $this->authChecker = $authChecker;
+    }
+
+    /**
+     * Defines the profile menu
+     * 
+     * @param Array $array
+     */
+    public function createProfileMenu(array $options) {
+        $menu = $this->factory->createItem('root');
+        
+        $menu->addChild('Login', array('route' => 'fos_user_security_login'));
+
+        if ($this->authChecker->isGranted('ROLE_USER') !== false) {
+            unset($menu['Login']);
+            $menu->addChild('Logout', array('route' => 'fos_user_security_logout'));
+        }
+
+        $menu->setChildrenAttribute('class', 'nav navbar-nav navbar-right');
+
+        return $menu;
+    }
+
+    /**
+     * Defines the MainMenu menu
+     * 
+     * @param Array $array
+     */
+    public function createMainMenu(array $options)
+    {
+        $menu = $this->factory->createItem('root');
+
+        $menu->addChild('Dashboard', array('route' => 'datahub_shared_default_index'));
+
+        if ($this->authChecker->isGranted('ROLE_USER') !== false) {
+            $menu->addChild('OAuth', array('route' => 'datahub_oauth_clients_index'));
+
+            $menu['OAuth']->addChild('Clients', array('route' => 'datahub_oauth_clients_index', 'attributes' => array('class' => 'list-group-item')));
+            $menu['OAuth']->addChild('Tokens', array('route' => 'datahub_oauth_tokens_index', 'attributes' => array('class' => 'list-group-item')));
+
+            $menu->addChild('Users', array('route' => 'datahub_user_users_index'));
+            $menu['Users']->addChild('Users', array('route' => 'datahub_user_users_index', 'attributes' => array('class' => 'list-group-item')));
+        } 
+
+        $menu->addChild('REST API', array('route' => 'nelmio_api_doc_index'));
+        $menu->addChild('OAI-PMH', array('route' => 'datahub_static_docs_oai'));
+
+        $menu->setChildrenAttribute('class', 'nav navbar-nav main-nav');
+
+        return $menu;
+    }
+}