From 8e6e3dddd34546dc35c61a6845091592fb39abc3 Mon Sep 17 00:00:00 2001
From: Silvio Giebl <silvio.giebl@hivemq.com>
Date: Sat, 10 Aug 2019 22:22:57 +0200
Subject: [PATCH] Improved navigation for mobile: larger nav items

(cherry picked from commit 5dce2adc2871e6814dbf42a658e6b364f4dc6641)
---
 _sass/navigation.scss         | 34 +++++++++++++++++++++++++---------
 _sass/support/_variables.scss |  1 +
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/_sass/navigation.scss b/_sass/navigation.scss
index 43efed5..6a60926 100644
--- a/_sass/navigation.scss
+++ b/_sass/navigation.scss
@@ -10,6 +10,7 @@
 
   .nav-list-item {
     @include fs-4;
+    position: relative;
     margin: 0;
 
     @include mq(md) {
@@ -18,12 +19,18 @@
 
     .nav-list-link {
       display: block;
-      min-height: $nav-list-item-height;
-      line-height: #{$nav-list-item-height - 2 * $sp-1};
+      min-height: $nav-list-item-height-sm;
+      line-height: #{$nav-list-item-height-sm - 2 * $sp-1};
       padding-top: $sp-1;
       padding-right: $gutter-spacing-sm;
       padding-bottom: $sp-1;
-      padding-left: $nav-list-item-height;
+      padding-left: $nav-list-item-height-sm;
+
+      @include mq(md) {
+        min-height: $nav-list-item-height;
+        line-height: #{$nav-list-item-height - 2 * $sp-1};
+        padding-left: $nav-list-item-height;
+      }
 
       &.active {
         font-weight: 600;
@@ -38,14 +45,23 @@
 
     .nav-list-expander {
       position: absolute;
-      width: $nav-list-item-height;
-      height: $nav-list-item-height;
-      padding-top: #{$nav-list-item-height / 4};
-      padding-right: #{$nav-list-item-height / 4};
-      padding-bottom: #{$nav-list-item-height / 4};
-      padding-left: #{$nav-list-item-height / 4};
+      width: $nav-list-item-height-sm;
+      height: $nav-list-item-height-sm;
+      padding-top: #{$nav-list-item-height-sm / 4};
+      padding-right: #{$nav-list-item-height-sm / 4};
+      padding-bottom: #{$nav-list-item-height-sm / 4};
+      padding-left: #{$nav-list-item-height-sm / 4};
       fill: $link-color;
 
+      @include mq(md) {
+        width: $nav-list-item-height;
+        height: $nav-list-item-height;
+        padding-top: #{$nav-list-item-height / 4};
+        padding-right: #{$nav-list-item-height / 4};
+        padding-bottom: #{$nav-list-item-height / 4};
+        padding-left: #{$nav-list-item-height / 4};
+      }
+
       &:hover {
         background-color: $feedback-color;
       }
diff --git a/_sass/support/_variables.scss b/_sass/support/_variables.scss
index 7f067a9..ad8cdd1 100644
--- a/_sass/support/_variables.scss
+++ b/_sass/support/_variables.scss
@@ -114,6 +114,7 @@ $gutter-spacing-sm: $sp-4 !default;
 $nav-width: 264px !default;
 $nav-width-md: 248px !default;
 $nav-list-item-height: $sp-6 !default;
+$nav-list-item-height-sm: $sp-8 !default;
 $content-width: 800px !default;
 $header-height: 60px !default;
 $search-results-width: 500px !default;