Add "vertical layout" template

config/packages/tabler.yaml

@@ -10,6 +10,10 @@ tabler:
         dark_mode: true
         # condensed = one nav-bar, false = two nav-bars
         navbar_condensed: true
+        # true = dark mode, false = light mode (on header)
+        header_dark: false
+        # true = dark mode, false = light mode (on menu)
+        navbar_dark: false
         # overlap = https://preview.tabler.io/layout-navbar-overlap.html
         navbar_overlap: false
         # true = boxed layout, false = full-screen

docs/layout.md

@@ -1,8 +1,15 @@
 # Using the layout
 
-In order to use the layout, your views should extend from the provided `layout`
+In order to use the layout, your views should extend from the provided `layouts`
+
+```twig
+{% extends '@Tabler/layout-horizontal.html.twig' %}
+```
+
+OR
+
 ```twig
-{% extends '@Tabler/layout.html.twig' %}
+{% extends '@Tabler/layout-vertical.html.twig' %}
 ```
 
 ## Layout files
@@ -11,9 +18,9 @@ This bundle ships with two main template files which you can extend in your them
 
 **For all your admin pages**
 
-The default `layout.html.twig` file can be used with:   
+The default `layout-horizontal.html.twig` can be used with:
 ```
-{% extends '@Tabler/layout.html.twig' %}
+{% extends '@Tabler/layout-horizontal.html.twig' %}
 ```
 
 **For your security screens**

docs/migration_guide.md

@@ -29,7 +29,7 @@ Search and replace
 ```
 with
 ```
-{% extends '@Tabler/layout.html.twig' %}
+{% extends '@Tabler/layout-horizontal.html.twig' %}
 ```
 
 Search and replace:
@@ -86,7 +86,7 @@ Replace
 ```
 with
 ```
-{% extends '@Tabler/layout.html.twig' %}
+{% extends '@Tabler/layout-horizontal.html.twig' %}
 ```
 
 The file:

src/DependencyInjection/Configuration.php

@@ -128,6 +128,12 @@ private function getOptionsConfig(): NodeDefinition
                 ->booleanNode('dark_mode')
                     ->defaultFalse()
                 ->end()
+                ->booleanNode('header_dark')
+                    ->defaultFalse()
+                ->end()
+                ->booleanNode('navbar_dark')
+                    ->defaultFalse()
+                ->end()
                 ->booleanNode('navbar_condensed')
                     ->defaultTrue()
                 ->end()

src/Helper/ContextHelper.php

@@ -71,6 +71,26 @@ public function setIsDarkMode(bool $isDarkMode): void
         $this->setOption('dark_mode', $isDarkMode);
     }
 
+    public function isHeaderDark(): bool
+    {
+        return (bool) $this->getOption('header_dark');
+    }
+
+    public function setIsHeaderDark(bool $isHeaderDark): void
+    {
+        $this->setOption('header_dark', $isHeaderDark);
+    }
+
+    public function isNavbarDark(): bool
+    {
+        return (bool) $this->getOption('navbar_dark');
+    }
+
+    public function setIsNavbarDark(bool $isNavbarDark): void
+    {
+        $this->setOption('navbar_dark', $isNavbarDark);
+    }
+
     public function isBoxedLayout(): bool
     {
         return (bool) $this->getOption('boxed_layout');

src/Model/MenuItemModel.php

@@ -189,6 +189,11 @@ public function getActiveChild(): ?MenuItemInterface
         return null;
     }
 
+    public function hasActiveChild(): bool
+    {
+        return null !== $this->getActiveChild();
+    }
+
     public function isActive(): bool
     {
         return $this->isActive;

templates/includes/menu.html.twig

@@ -1,47 +1,95 @@
 {% if menu is not defined %}
     {% set menu = tabler_menu(app.request) %}
 {% endif %}
+
 {% if menu is defined and menu is not null %}
-<ul class="navbar-nav">
-    {% for item in menu %}
-        <li id="{{ item.identifier }}" class="nav-item {{ item.isActive ? 'active' : '' }} {{ item.hasChildren? 'dropdown' : '' }}">
-            <a {% if item.hasChildren -%}
-                class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false"
-                {%- else -%}
-                class="nav-link" href="{{ '/' in item.route ? item.route : path(item.route|tabler_route, item.routeArgs) }}"
-                {%- endif -%}>
-                    {% if item.icon %}
-                        <span class="nav-link-icon d-md-none d-lg-inline-block text-center">
-                            {{ tabler_icon(item.icon, false, item.icon) }}
-                        </span>
-                    {% endif %}
-                <span class="nav-link-title">{{ item.label|trans }}</span>
-                {% if item.badge is not null or item.badgeColor is not null %}
-                    <span class="badge bg-{{ item.badgeColor|default('blue') }}">{{ item.badge }}</span>
-                {% endif %}
-            </a>
-
-            {% if item.hasChildren %}
-                <div class="dropdown-menu">
+    <ul class="navbar-nav {{ navbar_class | default('') }}">
+        {% for item in menu %}
+            <li id="{{ item.identifier }}" class="nav-item {{ item.isActive ? 'active' : '' }} {{ item.hasChildren? 'dropdown' : '' }}">
+                <a
+                        {% if item.hasChildren %}
+                            class="nav-link dropdown-toggle" role="button"
+                            data-bs-toggle="dropdown" data-bs-auto-close="{{ tabler_layoutType is same as "vertical" ? 'false' : 'outside' }}"
+                            aria-expanded="{{ tabler_layoutType is same as "vertical" }}"
+                        {% else %}
+                            class="nav-link" href="{{ '/' in item.route ? item.route : path(item.route|tabler_route, item.routeArgs) }}"
+                        {% endif %}
+                >
+                    {{ _self.item_icon(item) }}
+                    <span class="nav-link-title">{{ item.label|trans }}</span>
+                    {{ _self.item_badge(item) }}
+                </a>
+
+                {{ _self.item_childs(item, tabler_layoutType) }}
+
+            </li>
+        {% endfor %}
+    </ul>
+{% endif %}
+
+
+
+
+
+
+{% macro item_childs(item, tabler_layoutType) %}
+    {% if item.hasChildren %}
+        <div class="dropdown-menu {{ tabler_layoutType is same as "vertical" and item.isActive ? 'show':'' }}" data-bs-popper="none">
+            <div class="dropdown-menu-columns">
+                <div class="dropdown-menu-column">
+
                     {% for child in item.children %}
-                        {% if child.divider %}
-                            {% if not loop.last -%}
-                                <hr class="dropdown-divider">
-                            {%- endif %}
+
+                        {% if child.hasChildren %}
+                            <div class="dropend">
+                                <a class="dropdown-item dropdown-toggle" role="button"
+                                   data-bs-toggle="dropdown" data-bs-auto-close="{{ tabler_layoutType is same as "vertical" ? 'false' : 'outside' }}"
+                                   aria-expanded="{{ tabler_layoutType is same as "vertical" }}"
+                                >
+                                    {{ _self.item_icon(child) }}
+                                    {{ child.label|trans }}
+                                    {{ _self.item_badge(child) }}
+                                </a>
+
+                                {{ _self.item_childs(child, tabler_layoutType) }}
+
+                            </div>
                         {% else %}
-                        <a class="dropdown-item {{ child.isActive ? 'active':'' }}" href="{{ '/' in child.route ? child.route : path(child.route|tabler_route, child.routeArgs) }}">
-                            {% if child.icon %}
-                                <span class="nav-link-icon d-md-none d-lg-inline-block text-center">
-                                    {{ tabler_icon(child.icon, false, child.icon) }}
-                                </span>
-                            {% endif %}
-                            {{ child.label|trans }}
-                        </a>
+                            {{ _self.child_item(child) }}
                         {% endif %}
+
                     {% endfor %}
                 </div>
-            {% endif %}
-        </li>
-    {% endfor %}
-</ul>
-{% endif %}
+            </div>
+        </div>
+    {% endif %}
+{% endmacro %}
+
+{% macro child_item(child) %}
+    {% if child.divider %}
+        {% if not loop.last -%}
+            <hr class="dropdown-divider">
+        {%- endif %}
+    {% else %}
+        <a
+                class="dropdown-item {{ child.isActive ? 'active':'' }}"
+                {% if not child.hasChildren %}href="{{ '/' in child.route ? child.route : path(child.route|tabler_route, child.routeArgs) }}"{% endif %}
+        >
+            {{ _self.item_icon(child) }}
+            {{ child.label|trans }}
+            {{ _self.item_badge(child) }}
+        </a>
+    {% endif %}
+{% endmacro %}
+
+{% macro item_icon(item) %}
+    {% if item.icon %}
+        <span class="nav-link-icon d-md-none d-lg-inline-block text-center">{{ tabler_icon(item.icon, false, item.icon) }}</span>
+    {% endif %}
+{% endmacro %}
+
+{% macro item_badge(item) %}
+    {% if item.badge is not null or item.badgeColor is not null %}
+        <span class="badge bg-{{ item.badgeColor|default('blue') }}">{{ item.badge }}</span>
+    {% endif %}
+{% endmacro %}