Use app header

chialab · Apr 23, 2024 · c001db8 · c001db8
1 parent e609671
commit c001db8
Show file tree

Hide file tree

Showing 6 changed files with 110 additions and 257 deletions.
diff --git a/theme/albe/classes/admin_settingspage_tabs.php b/theme/albe/classes/admin_settingspage_tabs.php
diff --git a/theme/albe/scss/preset/extra.scss b/theme/albe/scss/preset/extra.scss
@@ -3,10 +3,35 @@ body {
 }
 
 idp-login {
-  flex: none;
-  height: auto !important;
+	position: fixed;
+	top: 0;
+	z-index: 21;
+	height: auto !important;
+}
+
+idp-login + * {
+	margin-top: 48px;
+}
+
+zanichelli-footer {
+	display: block;
+	margin-top: calc(var(--grid-margin) * 2);
 }
 
 .btn {
   font-family: inherit;
+}
+
+z-menu > a:hover {
+  text-decoration: none;
+}
+
+z-menu > a.focus,
+z-menu > a:not([class]):focus {
+  background-color: transparent;
+  box-shadow: none;
+}
+
+z-menu > a {
+  color: var(--color-text01);
 }
diff --git a/theme/albe/settings.php b/theme/albe/settings.php
diff --git a/theme/albe/templates/navbar_menu.mustache b/theme/albe/templates/navbar_menu.mustache
@@ -0,0 +1,64 @@
+{{#haschildren}}
+    <z-menu slot="menu" floating>
+        <a active="{{#isactive}}active{{/isactive}}" id="drop-down-{{moremenuid}}">{{{text}}}</a>
+    </z-menu>
+    <z-menu slot="menu" floating>
+        <div active="{{#isactive}}active{{/isactive}}">{{{text}}}</div>
+        {{#children}}
+            {{^divider}}
+                {{#is_action_link}}
+                    <a slot="item" {{#actionattributes}}{{name}}="{{value}}" {{/actionattributes}} href="{{{url}}}{{{action}}}">
+                        {{{text}}}
+                    </a>
+                    {{#action_link_actions}}
+                        {{> core/actions }}
+                    {{/action_link_actions}}
+                {{/is_action_link}}
+                {{^is_action_link}}
+                    <a slot="item" href="{{{url}}}{{{action}}}" {{#isactive}}aria-current="true"{{/isactive}}>
+                        {{{text}}}
+                    </a>
+                {{/is_action_link}}
+            {{/divider}}
+            {{#divider}}
+                <div class="dropdown-divider"></div>
+            {{/divider}}
+        {{/children}}
+    </z-menu>
+{{/haschildren}}
+{{^haschildren}}
+    <z-menu slot="menu">
+        {{#istablist}}
+            {{#is_action_link}}
+                <a href="{{tab}}">{{{text}}}</a>
+                {{#action_link_actions}}
+                    {{> core/actions }}
+                {{/action_link_actions}}
+            {{/is_action_link}}
+            {{^is_action_link}}
+                <a {{#isactive}}active{{/isactive}} href="{{tab}}" {{#title}}title="{{.}}"{{/title}}>
+                    {{{text}}}
+                </a>
+            {{/is_action_link}}
+        {{/istablist}}
+        {{^istablist}}
+            {{#is_action_link}}
+                <a {{#actionattributes}}{{name}}="{{value}}" {{/actionattributes}} href="{{{url}}}{{{action}}}" {{#title}}title="{{.}}"{{/title}}>
+                    {{{text}}}
+                </a>
+                {{#action_link_actions}}
+                    {{> core/actions }}
+                {{/action_link_actions}}
+            {{/is_action_link}}
+            {{^is_action_link}}
+                <a href="{{{url}}}{{{action}}}"
+                    {{#title}}title="{{.}}"{{/title}}
+                    {{#isactive}}aria-current="true"{{/isactive}}
+                    {{^isactive}}tabindex="-1"{{/isactive}}
+                >
+                    {{{text}}}
+                </a>
+            {{/is_action_link}}
+        {{/istablist}}
+    </z-menu>
+{{/haschildren}}
diff --git a/theme/albe/templates/navbar_menubar.mustache b/theme/albe/templates/navbar_menubar.mustache
@@ -0,0 +1,12 @@
+{{#nodecollection}}
+  {{#children}}
+    {{> theme_albe/navbar_menu}}
+  {{/children}}
+{{/nodecollection}}
+{{#nodearray}}
+    {{> theme_albe/navbar_menu}}
+{{/nodearray}}
+
+<div slot="menu">
+  {{{ output.edit_switch }}}
+</div>
diff --git a/theme/albe/templates/theme_boost/navbar.mustache b/theme/albe/templates/theme_boost/navbar.mustache
@@ -59,51 +59,10 @@
     id="idp-login-bar"
 ></idp-login>
 
-<nav class="navbar navbar-light bg-white navbar-expand" aria-label="{{#str}}sitemenubar, admin{{/str}}">
-    <div class="container-fluid">
-        <button class="navbar-toggler aabtn d-block d-md-none px-1 my-1 border-0" data-toggler="drawers" data-action="toggle" data-target="theme_boost-drawers-primary">
-            <span class="navbar-toggler-icon"></span>
-            <span class="sr-only">{{#str}}sidepanel, core{{/str}}</span>
-        </button>
-
-        <a href="{{{ config.homeurl }}}" class="navbar-brand d-none d-md-flex align-items-center m-0 mr-4 p-0 aabtn">
-
-            {{# output.should_display_navbar_logo }}
-                <img src="{{output.get_compact_logo_url}}" class="logo mr-1" alt="{{sitename}}">
-            {{/ output.should_display_navbar_logo }}
-            {{^ output.should_display_navbar_logo }}
-                {{{ sitename }}}
-            {{/ output.should_display_navbar_logo }}
-        </a>
-        {{#primarymoremenu}}
-            <div class="primary-navigation">
-                {{> core/moremenu}}
-            </div>
-        {{/primarymoremenu}}
-
-        <ul class="navbar-nav d-none d-md-flex my-1 px-1">
-            <!-- page_heading_menu -->
-            {{{ output.page_heading_menu }}}
-        </ul>
-
-        <div id="usernavigation" class="navbar-nav ml-auto">
-            {{# output.search_box }}
-                {{{ output.search_box }}}
-                <div class="divider border-left h-75 align-self-center mx-1"></div>
-            {{/output.search_box}}
-            {{#langmenu}}
-                {{> theme_boost/language_menu }}
-                <div class="divider border-left h-75 align-self-center mx-1"></div>
-            {{/langmenu}}
-            {{{ output.navbar_plugin_output }}}
-            <div class="d-flex align-items-stretch usermenu-container" data-region="usermenu">
-                {{#usermenu}}
-                    {{> core/user_menu }}
-                {{/usermenu}}
-            </div>
-            {{{ output.edit_switch }}}
-        </div>
-    </div>
-</nav>
-
-{{> theme_boost/primary-drawer-mobile }}
+<z-app-header>
+    <h1 slot="title">{{{ sitename }}}</h1>
+    {{#primarymoremenu}}
+        {{> theme_albe/navbar_menubar }}
+    {{/primarymoremenu}}
+    {{{ output.page_heading_menu }}}
+</z-app-header>