From 9372ea7343856dd279df589e620e4639f4ef91d9 Mon Sep 17 00:00:00 2001
From: Sebastian Kippe <sebastian@kip.pe>
Date: Sun, 27 Dec 2020 14:14:53 +0100
Subject: [PATCH] Add small-screen layout for main navigation

---
 app/assets/stylesheets/main_nav.scss | 24 ++++++++++++++++++++++--
 app/views/shared/_main_nav.html.erb  |  4 ----
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/main_nav.scss b/app/assets/stylesheets/main_nav.scss
index cd84cc5..eaa1756 100644
--- a/app/assets/stylesheets/main_nav.scss
+++ b/app/assets/stylesheets/main_nav.scss
@@ -1,4 +1,5 @@
 @import "variables";
+@import "mediaqueries";
 
 #main-nav {
   width: 100%;
@@ -12,15 +13,34 @@
   }
 
   ul {
+    @include media-max(large) {
+      display: grid;
+      grid-template-columns: repeat(1fr);
+      grid-template-columns: 1fr 1fr 1fr;
+    }
+
     li {
-      display: inline;
+      @include media-min(large) {
+        display: inline;
+      }
+
+      @include media-max(large) {
+        display: block;
+      }
 
       a {
         display: inline-block;
-        padding: 1.5rem;
+        padding: 1.5rem 2rem;
         text-decoration: none;
         color: $text-color-discreet;
 
+        @include media-max(large) {
+          display: block;
+          text-align: center;
+          padding-left: 0;
+          padding-right: 0;
+        }
+
         &.active {
           color: $text-color-body;
           border-bottom: 2px solid #ffd000;
diff --git a/app/views/shared/_main_nav.html.erb b/app/views/shared/_main_nav.html.erb
index 05a6b41..719a723 100644
--- a/app/views/shared/_main_nav.html.erb
+++ b/app/views/shared/_main_nav.html.erb
@@ -1,7 +1,5 @@
 <nav id="main-nav">
   <div class="wrapper">
-    <div class="site">
-    </div>
     <ul class="pages">
       <li>
         <%= link_to "Services", root_path,
@@ -16,7 +14,5 @@
               class: @current_section == "invitations" ? "active" : nil %>
       </li>
     </ul>
-    <div class="user">
-    </div>
   </div>
 </nav>