Merge pull request #31 from contao-themes-net/feature/megamenu

Feature/megamenu
contao-themes-net · Oct 22, 2021 · 388d167 · 388d167
2 parents 5b73baa + f9a976a
commit 388d167
Show file tree

Hide file tree

Showing 8 changed files with 185 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## [1.6.0](https://github.com/contao-themes-net/nature-theme-bundle/tree/1.6.0) – 2021-10-14
+
+- [feature] megamenu
+
 ## [1.5.1](https://github.com/contao-themes-net/nature-theme-bundle/tree/1.5.1) – 2021-09-24
 
 - [fix] responsive columns

diff --git a/src/Module/NatureThemeSetup.php b/src/Module/NatureThemeSetup.php
@@ -4,7 +4,7 @@
 
 class NatureThemeSetup extends \BackendModule
 {
-    const VERSION = '1.5.1';
+    const VERSION = '1.6.0';
 
     protected $strTemplate = 'be_naturetheme_setup';
 

diff --git a/src/Resources/contao/templates/modules/mod_navigation_nature_megamenu.html5 b/src/Resources/contao/templates/modules/mod_navigation_nature_megamenu.html5
@@ -0,0 +1,31 @@
+
+<!-- indexer::stop -->
+<nav class="<?= $this->class ?> navbar megamenu block"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?> itemscope itemtype="http://schema.org/SiteNavigationElement" aria-label="main navigation">
+
+<div class="navbar-brand">
+    <a class="navbar-item" href="{{env::path}}">
+        {{theme::content::NATURE01/01}}
+    </a>
+
+    <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarMain">
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+    </a>
+</div>
+
+<?php if ($this->headline): ?>
+<<?= $this->hl ?>><?= $this->headline ?></<?= $this->hl ?>>
+<?php endif; ?>
+
+<a href="<?= $this->request ?>#<?= $this->skipId ?>" class="invisible"><?= $this->skipNavigation ?></a>
+
+<div id="navbarMain" class="navbar-menu is-primary">
+    <?= $this->items ?>
+</div>
+
+<a id="<?= $this->skipId ?>" class="invisible">&nbsp;</a>
+
+</nav>
+
+<!-- indexer::continue -->
diff --git a/src/Resources/public/scss/_custom_variables.scss b/src/Resources/public/scss/_custom_variables.scss
@@ -180,3 +180,19 @@
 //$tabs-link-hover-border-bottom-color: $primary;
 
 /* More variables: https://bulma.io/documentation/components/tabs/#variables */
+
+/* ====================== */
+/*      Megamenu          */
+/* ====================== */
+
+//$megamenu-width: 100%;
+//$megamenu-right: 0px;
+//$megamenu-background-color: $boxes-background;
+//$megamenu-background-color-home: $megamenu-background-color;
+//$megamenu-item-width: 20%;
+//$megamenu-padding: 20px 60px 5px 30px;
+//$megamenu-link-lvl2-color: #000;
+//$megamenu-link-lvl2-color-hover: $primary;
+//$megamenu-link-lvl3-color: #4a4a4a;
+//$megamenu-link-lvl3-color-hover: $link-hover;
+//$megamenu-border-color: $primary;
diff --git a/src/Resources/public/scss/_nature_variables.scss b/src/Resources/public/scss/_nature_variables.scss
@@ -116,3 +116,16 @@ $button-border-color: $grey-lighter !default;
 $button-border-width: 1px !default;
 $button-hover-color: $link-hover !default;
 $button-hover-border-color: $link-hover !default;
+
+/* Megamenu */
+$megamenu-width: 100% !default;
+$megamenu-right: 0px !default;
+$megamenu-background-color: $boxes-background !default;
+$megamenu-background-color-home: $megamenu-background-color !default;
+$megamenu-item-width: 20% !default;
+$megamenu-padding: 20px 60px 5px 30px !default;
+$megamenu-link-lvl2-color: #000 !default;
+$megamenu-link-lvl2-color-hover: $primary !default;
+$megamenu-link-lvl3-color: #4a4a4a !default;
+$megamenu-link-lvl3-color-hover: $link-hover !default;
+$megamenu-border-color: $primary !default;
diff --git a/src/Resources/public/scss/color_schemes/nature_dark_mode.scss b/src/Resources/public/scss/color_schemes/nature_dark_mode.scss
@@ -478,6 +478,26 @@ $darkMode_input-focus-border-color: $grey-darker;
       background: $darkMode_boxes-background;
       color: $darkMode_boxes-color;
     }
+
+    .megamenu .navbar-item {
+      .navbar-dropdown.level_2 {
+        background: $black-ter;
+
+        > a.navbar-item, > div.navbar-item > a {
+          color: $white;
+        }
+      }
+
+      .navbar-dropdown.level_3 {
+        > a.navbar-item, > div.navbar-item > a {
+          color: $white;
+        }
+      }
+    }
+
+    &.home .megamenu .navbar-item .navbar-dropdown.level_2 {
+      background: $black-ter;
+    }
   }
 
   @media screen and (min-width: 1024px) {

diff --git a/src/Resources/public/scss/nature_style.scss b/src/Resources/public/scss/nature_style.scss
@@ -6,6 +6,7 @@
 @import "parts/footer";
 @import "parts/header";
 @import "parts/modules";
+@import "parts/megamenu";
 
 @import "parts/responsive";
 

diff --git a/src/Resources/public/scss/parts/megamenu.scss b/src/Resources/public/scss/parts/megamenu.scss
@@ -0,0 +1,99 @@
+@media screen and (min-width: $navbar-breakpoint) {
+  .home .megamenu .navbar-item .navbar-dropdown.level_2 {
+    background: $megamenu-background-color-home;
+  }
+
+  .megamenu {
+    &.mod_navigation.navbar .navbar-dropdown.open {
+      display: flex !important;
+    }
+
+    .navbar-item {
+      position: static;
+      height: 100%;
+
+      &:hover .navbar-dropdown.level_2 {
+        display: flex;
+      }
+
+      .navbar-dropdown.level_2 {
+        position: absolute;
+        left: inherit;
+        right: $megamenu-right;
+        max-width: calc(100% - #{$megamenu-right});
+        width: $megamenu-width;
+        flex-wrap: wrap;
+        padding: $megamenu-padding;
+        background: $megamenu-background-color;
+
+        @media (max-width: calc(#{$megamenu-width} + #{$megamenu-right})) {
+          max-width: 100%;
+          right: inherit;
+          left: 0;
+        }
+
+        > .navbar-item, > .navbar-link {
+          width: calc(#{$megamenu-item-width} - 40px);
+          margin: 0 20px 20px;
+        }
+
+        > a.navbar-item, > div.navbar-item > a {
+          font-size: 1.2em;
+          font-weight: 700;
+          color: $megamenu-link-lvl2-color;
+          padding: 5px 20px;
+          white-space: normal;
+          border-bottom: 2px solid $megamenu-border-color;
+          margin-bottom: 10px;
+          font-family: $family-heading;
+
+          &:hover, &.active {
+            color: $megamenu-link-lvl2-color-hover;
+          }
+        }
+
+        .navbar-link:after, .toggle-more, .toggle-less {
+          display: none;
+        }
+      }
+
+      .navbar-dropdown.level_3 {
+        background: none;
+        padding: 0;
+        min-width: 100%;
+
+        > a.navbar-item, > div.navbar-item > a {
+          color: $megamenu-link-lvl3-color;
+          padding: 5px 20px;
+          white-space: normal;
+
+          &:hover, &.active {
+            color: $megamenu-link-lvl3-color-hover;
+          }
+        }
+      }
+    }
+
+    &.mod_navigation.navbar .has-dropdown .has-dropdown .level_3, &.mod_navigation.navbar .has-dropdown .has-dropdown .level_4 {
+      position: relative;
+      top: inherit;
+      left: inherit;
+      display: block !important;
+    }
+
+    .navbar-dropdown.level_2 {
+      .navbar-item {
+        display: block;
+      }
+    }
+
+    .navbar-dropdown {
+      box-shadow: none;
+    }
+
+    &.navbar .navbar-start {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+  }
+}