From 90b736aaf019b0c3ee43a791525c7ec952b03057 Mon Sep 17 00:00:00 2001
From: Philipp Seibt <seibt@pdir.de>
Date: Thu, 14 Oct 2021 14:02:27 +0200
Subject: [PATCH 1/4] add megamenu

---
 .../mod_navigation_nature_megamenu.html5      | 31 ++++++
 .../public/scss/_custom_variables.scss        | 15 +++
 .../public/scss/_nature_variables.scss        | 12 +++
 .../scss/color_schemes/nature_dark_mode.scss  | 20 ++++
 src/Resources/public/scss/nature_style.scss   |  1 +
 src/Resources/public/scss/parts/megamenu.scss | 96 +++++++++++++++++++
 6 files changed, 175 insertions(+)
 create mode 100644 src/Resources/contao/templates/modules/mod_navigation_nature_megamenu.html5
 create mode 100644 src/Resources/public/scss/parts/megamenu.scss

diff --git a/src/Resources/contao/templates/modules/mod_navigation_nature_megamenu.html5 b/src/Resources/contao/templates/modules/mod_navigation_nature_megamenu.html5
new file mode 100644
index 0000000..dca7104
--- /dev/null
+++ 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
index aac7c1b..3ed1d2a 100644
--- a/src/Resources/public/scss/_custom_variables.scss
+++ b/src/Resources/public/scss/_custom_variables.scss
@@ -180,3 +180,18 @@
 //$tabs-link-hover-border-bottom-color: $primary;
 
 /* More variables: https://bulma.io/documentation/components/tabs/#variables */
+
+/* ====================== */
+/*      Megamenu          */
+/* ====================== */
+
+//$megamenu-width: 900px;
+//$megamenu-right: 70px;
+//$megamenu-background-color: $navbar-background-color;
+//$megamenu-background-color-home: rgba(#eaeaea, .9);
+//$megamenu-item-width: 33.33%;
+//$megamenu-padding: 20px 60px 5px 30px;
+//$megamenu-link-lvl2-color: #000;
+//$megamenu-link-lvl2-color-hover: $primary;
+//$megamenu-link-lvl3-color: #000;
+//$megamenu-link-lvl3-color-hover: $primary;
diff --git a/src/Resources/public/scss/_nature_variables.scss b/src/Resources/public/scss/_nature_variables.scss
index 4b56a82..3a575ed 100644
--- a/src/Resources/public/scss/_nature_variables.scss
+++ b/src/Resources/public/scss/_nature_variables.scss
@@ -116,3 +116,15 @@ $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: 900px !default;
+$megamenu-right: 70px !default;
+$megamenu-background-color: $navbar-background-color !default;
+$megamenu-background-color-home: rgba(#eaeaea, .9) !default;
+$megamenu-item-width: 33.33% !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: #000 !default;
+$megamenu-link-lvl3-color-hover: $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
index 1e81dae..005e438 100644
--- 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
index cf9e9fa..48a43e5 100644
--- 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
new file mode 100644
index 0000000..f781872
--- /dev/null
+++ b/src/Resources/public/scss/parts/megamenu.scss
@@ -0,0 +1,96 @@
+@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;
+          white-space: normal;
+
+          &:hover {
+            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;
+          white-space: normal;
+
+          &:hover {
+            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;
+    }
+  }
+}

From 2e7a9aeb408a2e3067bd8cd7a3216b77dbaffcf4 Mon Sep 17 00:00:00 2001
From: Philipp Seibt <seibt@pdir.de>
Date: Thu, 14 Oct 2021 14:04:55 +0200
Subject: [PATCH 2/4] update changelog and version

---
 CHANGELOG.md                    | 4 ++++
 src/Module/NatureThemeSetup.php | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 12a21ac..d10bb87 100644
--- 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
index 34f5396..e3c5456 100644
--- 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';
 

From 2712204b09eb918d9573eeb789c85e8ebfdce134 Mon Sep 17 00:00:00 2001
From: Philipp Seibt <seibt@pdir.de>
Date: Thu, 14 Oct 2021 14:10:18 +0200
Subject: [PATCH 3/4] update active navbar item color

---
 src/Resources/public/scss/parts/megamenu.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Resources/public/scss/parts/megamenu.scss b/src/Resources/public/scss/parts/megamenu.scss
index f781872..5c8c564 100644
--- a/src/Resources/public/scss/parts/megamenu.scss
+++ b/src/Resources/public/scss/parts/megamenu.scss
@@ -44,7 +44,7 @@
           padding: 5px;
           white-space: normal;
 
-          &:hover {
+          &:hover, &.active {
             color: $megamenu-link-lvl2-color-hover;
           }
         }
@@ -64,7 +64,7 @@
           padding: 5px;
           white-space: normal;
 
-          &:hover {
+          &:hover, &.active {
             color: $megamenu-link-lvl3-color-hover;
           }
         }

From f9a976a7dce9dc6e1993b3f817dce1cb7889d94d Mon Sep 17 00:00:00 2001
From: Philipp Seibt <seibt@pdir.de>
Date: Mon, 18 Oct 2021 13:34:36 +0200
Subject: [PATCH 4/4] update megamenu styling

---
 src/Resources/public/scss/_custom_variables.scss | 15 ++++++++-------
 src/Resources/public/scss/_nature_variables.scss | 15 ++++++++-------
 src/Resources/public/scss/parts/megamenu.scss    |  7 +++++--
 3 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/Resources/public/scss/_custom_variables.scss b/src/Resources/public/scss/_custom_variables.scss
index 3ed1d2a..454b76d 100644
--- a/src/Resources/public/scss/_custom_variables.scss
+++ b/src/Resources/public/scss/_custom_variables.scss
@@ -185,13 +185,14 @@
 /*      Megamenu          */
 /* ====================== */
 
-//$megamenu-width: 900px;
-//$megamenu-right: 70px;
-//$megamenu-background-color: $navbar-background-color;
-//$megamenu-background-color-home: rgba(#eaeaea, .9);
-//$megamenu-item-width: 33.33%;
+//$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: #000;
-//$megamenu-link-lvl3-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
index 3a575ed..2d73390 100644
--- a/src/Resources/public/scss/_nature_variables.scss
+++ b/src/Resources/public/scss/_nature_variables.scss
@@ -118,13 +118,14 @@ $button-hover-color: $link-hover !default;
 $button-hover-border-color: $link-hover !default;
 
 /* Megamenu */
-$megamenu-width: 900px !default;
-$megamenu-right: 70px !default;
-$megamenu-background-color: $navbar-background-color !default;
-$megamenu-background-color-home: rgba(#eaeaea, .9) !default;
-$megamenu-item-width: 33.33% !default;
+$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: #000 !default;
-$megamenu-link-lvl3-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/parts/megamenu.scss b/src/Resources/public/scss/parts/megamenu.scss
index 5c8c564..0bf9afc 100644
--- a/src/Resources/public/scss/parts/megamenu.scss
+++ b/src/Resources/public/scss/parts/megamenu.scss
@@ -41,8 +41,11 @@
           font-size: 1.2em;
           font-weight: 700;
           color: $megamenu-link-lvl2-color;
-          padding: 5px;
+          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;
@@ -61,7 +64,7 @@
 
         > a.navbar-item, > div.navbar-item > a {
           color: $megamenu-link-lvl3-color;
-          padding: 5px;
+          padding: 5px 20px;
           white-space: normal;
 
           &:hover, &.active {