fix hardcoded menu

qossmic · Apr 4, 2024 · c3e9390 · c3e9390
1 parent d09eb81
commit c3e9390
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 57 deletions.
diff --git a/src/Twig/TwigDocExtension.php b/src/Twig/TwigDocExtension.php
@@ -35,6 +35,7 @@ public function getFunctions(): array
             new TwigFunction('filterComponents', [$this, 'filterComponents']),
             new TwigFunction('getInvalidComponents', [$this, 'getInvalidComponents']),
             new TwigFunction('getSubCategories', [$this, 'getSubCategories']),
+            new TwigFunction('getComponentCategories', [$this, 'getCategories']),
         ];
     }
 
@@ -86,4 +87,12 @@ private function renderFallback(ComponentItem $item, array $params): string
     {
         return $this->twig->render($item->getRenderPath(), $params);
     }
+
+    /**
+     * @return ComponentCategory[]
+     */
+    public function getCategories(): array
+    {
+        return $this->categoryService->getCategories();
+    }
 }
diff --git a/templates/blocks/page_blocks.html.twig b/templates/blocks/page_blocks.html.twig
@@ -1,38 +1,66 @@
 {% block head %}
-{% block stylesheets %}
-    <style>
-        {{ include('@TwigDoc/style/style.css.twig') }}
-    </style>
-{% endblock %}
+    {% block stylesheets %}
+        <style>
+            {{ include('@TwigDoc/style/style.css.twig') }}
+        </style>
+    {% endblock %}
     <title>{% block title %}Twig Component Documentation{% endblock %}</title>
-{% block javascripts %}
-    <script type="application/javascript">
-        window.addEventListener('load', () => {
-            document.querySelectorAll('.twig-doc-variation h5').forEach(
-                function (element) {
-                    element.addEventListener('click', function () {
-                        console.log(element);
-                        let variation = element.getAttribute('data-variation');
-                        element.parentNode.querySelectorAll('.twig-doc-variation-body, h5').forEach(
-                            function (e) {
-                                e.classList.remove('active');
-                            });
-                        element.classList.add('active');
-                        element.parentNode.querySelector(`.twig-doc-variation-body[data-variation="${variation}"]`).classList.add('active');
-                    })
-                }
-            )
-            const observer = new ResizeObserver((entries) => {
-                for (const entry of entries) {
-                    entry.target.closest('.twig-doc-variation-body').querySelector('.twig-doc-viewport-width-value').innerText = entry.contentRect.width;
-                }
-            })
-            document.querySelectorAll('.twig-doc-viewport').forEach((e) => {
-                observer.observe(e);
-            })
-        });
-    </script>
+    {% block javascripts %}
+        <script type="application/javascript">
+            window.addEventListener('load', () => {
+                document.querySelectorAll('.twig-doc-variation h5').forEach(
+                    function (element) {
+                        element.addEventListener('click', function () {
+                            let variation = element.getAttribute('data-variation');
+                            element.parentNode.querySelectorAll('.twig-doc-variation-body, h5').forEach(
+                                function (e) {
+                                    e.classList.remove('active');
+                                });
+                            element.classList.add('active');
+                            element.parentNode.querySelector(`.twig-doc-variation-body[data-variation="${variation}"]`).classList.add('active');
+                        })
+                    }
+                )
+                const observer = new ResizeObserver((entries) => {
+                    for (const entry of entries) {
+                        entry.target.closest('.twig-doc-variation-body').querySelector('.twig-doc-viewport-width-value').innerText = entry.contentRect.width;
+                    }
+                })
+                document.querySelectorAll('.twig-doc-viewport').forEach((e) => {
+                    observer.observe(e);
+                })
+            });
+        </script>
+    {% endblock %}
 {% endblock %}
+
+{% block navigation %}
+    <div class="twig-doc-navigation">
+        {% for category in getComponentCategories() %}
+            {% if loop.first %}
+                <ul>
+            {% endif %}
+            <li>
+                <a href="{{ path('twig_doc_home', {filterQuery: category.name, filterType: 'category'}) }}">{{ category.name }}</a>
+                {% for subCategory in getSubCategories(category.name) %}
+                    {% if loop.first %}
+                        <ul>
+                    {% endif %}
+                    <li>
+                        <a href="{{ path('twig_doc_home', {filterQuery: subCategory.name, filterType: 'subCategory'}) }}">
+                            {{ subCategory.name }}
+                        </a>
+                    </li>
+                    {% if loop.last %}
+                        </ul>
+                    {% endif %}
+                {% endfor %}
+            </li>
+            {% if loop.last %}
+                </ul>
+            {% endif %}
+        {% endfor %}
+    </div>
 {% endblock %}
 
 {% block body %}
@@ -45,23 +73,6 @@
             </div>
         {% endif %}
         <div class="twig-doc-body">
-
-            <div class="navigation">
-                <ul>
-                    <li>
-                        <a href="?filterQuery=Atoms&filterType=category">Atoms</a>
-                        <ul>
-                            <li><a href="?filterQuery=Buttons&filterType=sub_category">Buttons</a></li>
-                            <li><a href="?filterQuery=Typography&filterType=sub_category">Typography</a></li>
-                        </ul>
-                    </li>
-                    <li><a href="?filterQuery=Commons&filterType=category">Commons</a></li>
-                    <li><a href="?filterQuery=Snippets&filterType=category">Snippets</a></li>
-                    <li><a href="?filterQuery=Blocks&filterType=category">Blocks</a></li>
-                    <li><a href="?filterQuery=Templates&filterType=category">Templates</a></li>
-                </ul>
-            </div>
-
             {% for component in components %}
                 {% include '@TwigDoc/component/_item.html.twig' with { component: component } %}
             {% endfor %}

diff --git a/templates/documentation.html.twig b/templates/documentation.html.twig
@@ -5,6 +5,7 @@
     {{ block('head') }}
 </head>
 <body>
+    {{ block('navigation') }}
     {{ block('body') }}
 </body>
 </html>
diff --git a/templates/style/style.css.twig b/templates/style/style.css.twig
@@ -1,5 +1,5 @@
 #twig-doc-container {
-    margin-top: 50px;
+    margin-top: 60px;
 }
 #twig-doc-container .breakpoints {
     position: fixed;
@@ -26,7 +26,7 @@
     flex-grow: 1;
 }
 
-#twig-doc-container .navigation {
+.twig-doc-navigation {
     position: fixed;
     left: 0;
     top: 0;
@@ -37,28 +37,28 @@
     z-index: 100;
 }
 
-#twig-doc-container .navigation ul {
+.twig-doc-navigation ul {
     display: flex;
     position: relative;
     flex-direction: row;
 {# margin-bottom: 25px; #}
 }
 
-#twig-doc-container .navigation ul ul {
+.twig-doc-navigation ul ul {
     display: none;
     position: absolute;
 }
 
-#twig-doc-container .navigation li {
+.twig-doc-navigation li {
     list-style: none;
 }
 
-#twig-doc-container .navigation li a {
+.twig-doc-navigation li a {
     padding: 5px 15px;
 }
 
 
-#twig-doc-container .navigation li:hover ul {
+.twig-doc-navigation li:hover ul {
     display: flex;
 }
 
@@ -169,4 +169,4 @@
     width: 100%;
     flex-grow: 1;
     border: 0;
-}
+}