Merge pull request #286 from dotkernel/issue-282

Issue #282: Show current page as active/open in left menu

Author: arhimede

config/autoload/templates.global.php

@@ -2,6 +2,7 @@
 
 declare(strict_types=1);
 
+use Admin\App\Twig\Extension\RouteExtension;
 use Dot\Twig\Extension\DateExtension;
 use Dot\Twig\Extension\TranslationExtension;
 use Laminas\ServiceManager\Factory\InvokableFactory;
@@ -31,6 +32,7 @@
         'cache_dir'       => 'data/cache/twig',
         'extensions'      => [
             DateExtension::class,
+            RouteExtension::class,
             TranslationExtension::class,
         ],
         'globals'         => [

public/css/app.css

@@ -1,3 +1,5 @@
 $(document).ready(function () {
     $('[data-toggle="tooltip"]').tooltip();
+
+    $('.current-route').closest('.nav-group').addClass('open');
 });

public/js/app.js

@@ -17,3 +17,4 @@ import './components/_googleMaps';
 import './components/_util';
 import './components/_bsTable';
 import './components/_admin';
+import './components/_main';

src/App/assets/js/components/_main.js

@@ -10,6 +10,7 @@
 use Admin\App\Factory\FormsPluginFactory;
 use Admin\App\Plugin\FormsPlugin;
 use Admin\App\Resolver\EntityListenerResolver;
+use Admin\App\Twig\Extension\RouteExtension;
 use Doctrine\ORM\EntityManager;
 use Doctrine\ORM\EntityManagerInterface;
 use Doctrine\ORM\Mapping\Driver\AttributeDriver;
@@ -44,6 +45,7 @@ public function getDependencies(): array
                 PageController::class                 => AttributedServiceFactory::class,
                 PluginManager::class                  => PluginManagerFactory::class,
                 FormsPlugin::class                    => FormsPluginFactory::class,
+                RouteExtension::class                 => AttributedServiceFactory::class,
             ],
             'aliases'    => [
                 EntityManager::class          => 'doctrine.entity_manager.orm_default',

src/App/assets/js/index.js

@@ -0,0 +1,31 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Admin\App\Twig\Extension;
+
+use Dot\DependencyInjection\Attribute\Inject;
+use Mezzio\Helper\UrlHelper;
+use Twig\Extension\AbstractExtension;
+use Twig\TwigFunction;
+
+class RouteExtension extends AbstractExtension
+{
+    #[Inject(UrlHelper::class)]
+    public function __construct(
+        private readonly UrlHelper $urlHelper,
+    ) {
+    }
+
+    public function getFunctions(): array
+    {
+        return [
+            new TwigFunction('getCurrentRoute', [$this, 'getCurrentRoute']),
+        ];
+    }
+
+    public function getCurrentRoute(): ?string
+    {
+        return $this->urlHelper->getRequest()?->getUri()?->getPath();
+    }
+}

src/App/src/ConfigProvider.php

@@ -1,3 +1,4 @@
+{% set currentRoute = getCurrentRoute() %}
 <div class="sidebar">
     <div class="sidebar-inner">
         <div class="sidebar-logo">
@@ -19,7 +20,7 @@
                 </div>
                 <div class="peer">
                     <div class="mobile-toggle sidebar-toggle">
-                        <a href="" class="td-n">
+                        <a class="td-n cur-p">
                             <i class="ti-arrow-circle-left"></i>
                         </a>
                     </div>
@@ -28,15 +29,15 @@
         </div>
         <ul class="sidebar-menu scrollable pos-r">
             <li class="nav-item mT-30">
-                <a class="sidebar-link" href="{{ path('dashboard') }}">
+                <a class="sidebar-link{{ currentRoute == path('dashboard') ? ' text-primary fw-medium current-route' }}" href="{{ path('dashboard') }}">
                     <span class="icon-holder">
                         <i class="c-blue-500 ti-home"></i>
                     </span>
                     <span class="title">Dashboard</span>
                 </a>
             </li>
-            <li class="nav-item dropdown">
-                <a class="dropdown-toggle" href="javascript:void(0);">
+            <li class="nav-item dropdown nav-group">
+                <a class="dropdown-toggle cur-p">
                     <span class="icon-holder">
                         <i class="c-teal-500 ti-view-list-alt"></i>
                     </span>
@@ -47,24 +48,24 @@
                 </a>
                 <ul class="dropdown-menu">
                     <li class="nav-item dropdown">
-                        <a href="{{ path('admin', {action: 'manage'}) }}">
+                        <a href="{{ path('admin', {action: 'manage'}) }}" class="{{ currentRoute == path('admin', {action: 'manage'}) ? 'text-primary fw-medium current-route' }}">
                             <span>List</span>
                         </a>
                     </li>
                     <li class="nav-item dropdown">
-                        <a href="{{ path('admin', {action: 'logins'}) }}">
+                        <a href="{{ path('admin', {action: 'logins'}) }}" class="{{ currentRoute == path('admin', {action: 'logins'}) ? 'text-primary fw-medium current-route' }}">
                             <span>View logins</span>
                         </a>
                     </li>
                     <li class="nav-item dropdown">
-                        <a href="{{ path('admin', {action: 'simple-logins'}) }}">
+                        <a href="{{ path('admin', {action: 'simple-logins'}) }}" class="{{ currentRoute == path('admin', {action: 'simple-logins'}) ? 'text-primary fw-medium current-route' }}">
                             <span>View logins v2</span>
                         </a>
                     </li>
                 </ul>
             </li>
             <li class="nav-item dropdown">
-                <a class="sidebar-link" href="{{ path('page', {action: 'components'}) }}">
+                <a class="sidebar-link{{ currentRoute == path('page', {action: 'components'}) ? ' text-primary fw-medium current-route' }}" href="{{ path('page', {action: 'components'}) }}">
                     <span class="icon-holder">
                         <i class="c-pink-500 ti-palette"></i>
                     </span>

src/App/src/Twig/Extension/RouteExtension.php

@@ -0,0 +1,65 @@
+<?php
+
+declare(strict_types=1);
+
+namespace AdminTest\Unit\App\Twig\Extension;
+
+use Admin\App\Twig\Extension\RouteExtension;
+use AdminTest\Unit\UnitTest;
+use Laminas\Diactoros\ServerRequest;
+use Laminas\Diactoros\Uri;
+use Mezzio\Helper\UrlHelper;
+use Mezzio\Router\RouterInterface;
+use PHPUnit\Framework\MockObject\Exception;
+use Twig\TwigFunction;
+
+use function method_exists;
+
+class RouteExtensionTest extends UnitTest
+{
+    /**
+     * @throws Exception
+     */
+    public function testWillInstantiate(): void
+    {
+        $urlHelper      = $this->createMock(UrlHelper::class);
+        $routeExtension = new RouteExtension($urlHelper);
+        $this->assertInstanceOf(RouteExtension::class, $routeExtension);
+    }
+
+    /**
+     * @throws Exception
+     */
+    public function testWillAddExistingFunctions(): void
+    {
+        $routeExtension = new RouteExtension(
+            $this->createMock(UrlHelper::class)
+        );
+
+        $functions = $routeExtension->getFunctions();
+        $this->assertCount(1, $functions);
+
+        $twigFunction = $functions[0];
+        $this->assertInstanceOf(TwigFunction::class, $twigFunction);
+
+        $callable = $twigFunction->getCallable();
+        $this->assertIsArray($callable);
+        $this->assertCount(2, $callable);
+        $this->assertInstanceOf(RouteExtension::class, $callable[0]);
+        $this->assertTrue(method_exists($routeExtension, $callable[1]));
+        $this->assertSame($twigFunction->getName(), $callable[1]);
+    }
+
+    /**
+     * @throws Exception
+     */
+    public function testWillGetCurrentRoute(): void
+    {
+        $router    = $this->createMock(RouterInterface::class);
+        $request   = new ServerRequest(uri: new Uri('/test'));
+        $urlHelper = new UrlHelper($router);
+        $urlHelper->setRequest($request);
+        $routeExtension = new RouteExtension($urlHelper);
+        $this->assertSame('/test', $routeExtension->getCurrentRoute());
+    }
+}