feat: mark current page in menu (#137)

strangebuzz · Dec 20, 2024 · a0525b9 · a0525b9
1 parent dd4c4b0
commit a0525b9
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 7 deletions.
diff --git a/src/Twig/Extension/RoutingExtension.php b/src/Twig/Extension/RoutingExtension.php
@@ -31,6 +31,7 @@ public function getFunctions(): array
     {
         return [
             new TwigFunction('ctrl_fqcn', $this->getControllerFqcn(...)),
+            new TwigFunction('attr_if', $this->getAttributeIf(...)),
         ];
     }
 
@@ -70,4 +71,18 @@ public function getControllerFqcn(string $ctrlShortname): string
 
         throw new \InvalidArgumentException('No controller found for the "'.$ctrlShortname.'" shortname.');
     }
+
+    /**
+     * Returns an HTML attribute with a given value only if a condition is met.
+     *
+     * @see templates/base.html.twig
+     */
+    public function getAttributeIf(bool $condition, string $attribute, string $value): string
+    {
+        if (!$condition) {
+            return '';
+        }
+
+        return \sprintf(' %s="%s"', $attribute, $value);
+    }
 }
diff --git a/templates/base.html.twig b/templates/base.html.twig
@@ -42,13 +42,14 @@
                                 Menu
                             </summary>
                             <ul role="group-menu">
-                                <li><a href="{{ path(ctrl_fqcn('HomeAction')) }}">📒 README</a></li>
-                                <li><a href="{{ path(ctrl_fqcn('HelloWorldAction')) }}">Hello world! 👻</a></li>
-                                <li><a href="{{ path('App\\Controller\\StimulusAction') }}"><b>J</b>ava<b>S</b>cript with Stimulus</a></li>
-                                <li><a href="{{ path(ctrl_fqcn('ComposerAction')) }}">The <code>composer.json</code> file</a></li>
-                                <li><a href="{{ path(ctrl_fqcn('FormAction')) }}">📝 Form example</a></li>
+                                <li><a href="{{ path(ctrl_fqcn('HomeAction')) }}"
+                                            {{ attr_if(app.current_route == ctrl_fqcn('HomeAction'), 'aria-current', 'page')|raw }}>📒 README</a></li>
+                                <li><a href="{{ path(ctrl_fqcn('HelloWorldAction')) }}"{{ attr_if(app.current_route == ctrl_fqcn('HelloWorldAction'), 'aria-current', 'page')|raw }}>Hello world! 👻</a></li>
+                                <li><a href="{{ path('App\\Controller\\StimulusAction') }}"{{ attr_if(app.current_route == 'App\\Controller\\StimulusAction', 'aria-current', 'page')|raw }}><b>J</b>ava<b>S</b>cript with Stimulus</a></li>
+                                <li><a href="{{ path(ctrl_fqcn('ComposerAction')) }}"{{ attr_if(app.current_route == ctrl_fqcn('ComposerAction'), 'aria-current', 'page')|raw }}>The <code>composer.json</code> file</a></li>
+                                <li><a href="{{ path(ctrl_fqcn('FormAction')) }}"{{ attr_if(app.current_route == ctrl_fqcn('FormAction'), 'aria-current', 'page')|raw }}>📝 Form example</a></li>
                                 <li><a href="{{ app.environment == 'dev' ? '/_error/404.html' : '/404' }}">❌ Custom error page</a></li>
-                                <li><a href="https://picocss.com/docs" target="_blank" >✨ Pico CSS documentation</a></li>
+                                <li><a href="https://picocss.com/docs" target="_blank">✨ Pico CSS documentation</a></li>
                             </ul>
                         </details>
                     </li>
@@ -57,7 +58,7 @@
                     </li>
                     <li>
                         <a class="theme-icon" {{ stimulus_target('header', 'lightEmoji') }} {{ stimulus_action('header', 'setDarkMode', 'click') }} data-tooltip="Switch to dark mode" data-placement="bottom">🌞</a>
-                        <a class="theme-icon" {{ stimulus_target('header', 'darkEmoji') }} {{ stimulus_action('header', 'setLightMode', 'click') }} data-tooltip="Switch to light mode" data-placement="bottom" >🌘 </a>
+                        <a class="theme-icon" {{ stimulus_target('header', 'darkEmoji') }} {{ stimulus_action('header', 'setLightMode', 'click') }} data-tooltip="Switch to light mode" data-placement="bottom">🌘 </a>
                     </li>
                 </ul>
             </nav>