feat: Top menu (mega menu) structure in template reworked.

bin/css/style.css

@@ -636,6 +636,11 @@ a.toTop:before {
 
 /** Mega Menu
  ===================================== */
+.quiqqer-menu-megaMenu nav {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+}
 
 .cologne-header-nav {
     height: 100%;
@@ -651,7 +656,8 @@ a.toTop:before {
     position: initial;
 }
 
-.quiqqer-menu-megaMenu a {
+.quiqqer-menu-megaMenu-list a,
+.quiqqer-menu-megaMenu-list-item-menu a {
     color: inherit;
     text-decoration: none;
 }
@@ -736,6 +742,7 @@ a.toTop:before {
     display: flex;
     position: relative;
     z-index: 2;
+    height: 100%;
 }
 
 .cologne-header-control-basket {
@@ -789,16 +796,6 @@ a.toTop:before {
     width: 17px;
 }
 
-/*
-.quiqqer-order-basketButton-batch.quiqqer-order-basketButton-batch-custom {
-    background: none;
-    color: inherit;
-    display: inline-block;
-    min-width: 2em;
-    position: initial;
-}*/
-
-
 /****************/
 /* basket popup */
 /****************/

bin/javascript/init.js

@@ -191,7 +191,7 @@ window.addEvent('domready', function () {
                             height.y = 0;
 
                             Basket.$BasketContainer.setStyles({
-                                right: 20 // right margin from .cologne-header-control-basket
+                                right: 0 // right margin from .cologne-header-control-basket
                             });
 
                             // Do not scroll the page

index.php

@@ -15,6 +15,16 @@
     'Project'                     => $Site->getProject()
 ]);
 
+// header logo
+$EngineForMenu = QUI::getTemplateManager()->getEngine();
+
+$EngineForMenu->assign([
+    'Logo' => $Project->getMedia()->getLogoImage()
+]);
+
+$Menu->prependHTML($EngineForMenu->fetch(dirname(__FILE__) . '/template/menu/menuPrefix.html'));
+$Menu->appendHTML($EngineForMenu->fetch(dirname(__FILE__) . '/template/menu/menuSuffix.html'));
+
 /* user avatar */
 $Avatar = new QUI\FrontendUsers\Controls\UserIcon([
     'showLogout' => false, // template cologne use own logout popup (see bin/javascript/init.js)

template/mainMenu.html

 <header class="cologne-header cologne-header-menu template-columns">
+    <div class="template-column cologne-header-nav">
+        {$Menu->create()}
+    </div>
+</header>
+
+{*<header class="cologne-header cologne-header-menu template-columns">
     <div class="template-column cologne-header-logo hide-on-mobile">
         <a href="/" class="cologne-header-logo-link">
             {image image=$Project->getMedia()->getLogoImage() class="logo"}
@@ -14,4 +20,4 @@
     <div class="cologne-header-control">
         <div class="template-column cologne-header-control-basket"></div>
     </div>
-</header>
\ No newline at end of file
+</header>*}
\ No newline at end of file

template/menu/menuPrefix.html

+<div class="cologne-header-logo">
+    <a href="/" class="cologne-header-logo-link">
+        {image image=$Logo class="logo"}
+    </a>
+</div>
\ No newline at end of file

template/menu/menuSuffix.html

+<div class="cologne-header-control">
+    <div class="cologne-header-control-basket"></div>
+</div>
\ No newline at end of file

template/topBar.html

 <div class="topbar template-columns">
-    <a href="/" class="topbar-mobile-logo hide-on-desktop">
+    {*<!--<a href="/" class="topbar-mobile-logo hide-on-desktop">
         {image image=$Project->getMedia()->getLogoImage() class="logo"}
-    </a>
+    </a>-->*}
 
     <div class="template-column topbar-left hide-on-mobile">
         {locale group="quiqqer/template-cologne" var="template.topbar.content.left"}
@@ -9,11 +9,8 @@
 
     <div class="topbar-right template-column">
 
-        {*$Flags->create()*}
-
         {$LangCurrencySwitch->create()}
 
-
         <span class="cologne-header-control-user">
             {if $User->getId()}
                 {$Avatar->create()}
@@ -25,7 +22,5 @@
             </span>
         </span>
 
-        <!--<span class="template-column cologne-header-control-currencies"></span>-->
-
     </div>
 </div>
\ No newline at end of file