From b2104b8f697daa96ee6e83cab3a87ae5fd70a5f8 Mon Sep 17 00:00:00 2001
From: ajuvercr <arthur.vercruysse@ugent.be>
Date: Sun, 13 Sep 2020 11:59:34 +0200
Subject: [PATCH] make navbar mobile friendly

---
 content/assets/navbar_icons/FAQ.svg    |  1 +
 content/assets/navbar_icons/Ontdek.svg |  1 +
 content/assets/navbar_icons/Quiz.svg   |  1 +
 content/assets/navbar_icons/search.svg |  1 +
 content/stylesheets/main.css           | 79 +++++++++++++++++++++-----
 layouts/partials/navbar.erb            | 11 ++--
 6 files changed, 77 insertions(+), 17 deletions(-)
 create mode 100644 content/assets/navbar_icons/FAQ.svg
 create mode 100644 content/assets/navbar_icons/Ontdek.svg
 create mode 100644 content/assets/navbar_icons/Quiz.svg
 create mode 100644 content/assets/navbar_icons/search.svg

diff --git a/content/assets/navbar_icons/FAQ.svg b/content/assets/navbar_icons/FAQ.svg
new file mode 100644
index 0000000..2a3a5c6
--- /dev/null
+++ b/content/assets/navbar_icons/FAQ.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="question" class="svg-inline--fa fa-question fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M202.021 0C122.202 0 70.503 32.703 29.914 91.026c-7.363 10.58-5.093 25.086 5.178 32.874l43.138 32.709c10.373 7.865 25.132 6.026 33.253-4.148 25.049-31.381 43.63-49.449 82.757-49.449 30.764 0 68.816 19.799 68.816 49.631 0 22.552-18.617 34.134-48.993 51.164-35.423 19.86-82.299 44.576-82.299 106.405V320c0 13.255 10.745 24 24 24h72.471c13.255 0 24-10.745 24-24v-5.773c0-42.86 125.268-44.645 125.268-160.627C377.504 66.256 286.902 0 202.021 0zM192 373.459c-38.196 0-69.271 31.075-69.271 69.271 0 38.195 31.075 69.27 69.271 69.27s69.271-31.075 69.271-69.271-31.075-69.27-69.271-69.27z"></path></svg>
\ No newline at end of file
diff --git a/content/assets/navbar_icons/Ontdek.svg b/content/assets/navbar_icons/Ontdek.svg
new file mode 100644
index 0000000..5723dc7
--- /dev/null
+++ b/content/assets/navbar_icons/Ontdek.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="compass" class="svg-inline--fa fa-compass fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M347.94 129.86L203.6 195.83a31.938 31.938 0 0 0-15.77 15.77l-65.97 144.34c-7.61 16.65 9.54 33.81 26.2 26.2l144.34-65.97a31.938 31.938 0 0 0 15.77-15.77l65.97-144.34c7.61-16.66-9.54-33.81-26.2-26.2zm-77.36 148.72c-12.47 12.47-32.69 12.47-45.16 0-12.47-12.47-12.47-32.69 0-45.16 12.47-12.47 32.69-12.47 45.16 0 12.47 12.47 12.47 32.69 0 45.16zM248 8C111.03 8 0 119.03 0 256s111.03 248 248 248 248-111.03 248-248S384.97 8 248 8zm0 448c-110.28 0-200-89.72-200-200S137.72 56 248 56s200 89.72 200 200-89.72 200-200 200z"></path></svg>
\ No newline at end of file
diff --git a/content/assets/navbar_icons/Quiz.svg b/content/assets/navbar_icons/Quiz.svg
new file mode 100644
index 0000000..cb4dc56
--- /dev/null
+++ b/content/assets/navbar_icons/Quiz.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="pencil-alt" class="svg-inline--fa fa-pencil-alt fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"></path></svg>
\ No newline at end of file
diff --git a/content/assets/navbar_icons/search.svg b/content/assets/navbar_icons/search.svg
new file mode 100644
index 0000000..f41bbdd
--- /dev/null
+++ b/content/assets/navbar_icons/search.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="search" class="svg-inline--fa fa-search fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg>
\ No newline at end of file
diff --git a/content/stylesheets/main.css b/content/stylesheets/main.css
index 95956de..0f6d107 100644
--- a/content/stylesheets/main.css
+++ b/content/stylesheets/main.css
@@ -34,8 +34,6 @@ main {
   justify-content: space-between;
   width: calc(100%-5rem);
 
-  min-height: 100%;
-
   padding: 2rem 2rem 0 2rem;
 }
 
@@ -84,14 +82,6 @@ footer {
   margin-top: auto;
 }
 
-.navbar:hover {
-  width: 16rem;
-}
-
-.navbar:hover .link-text {
-  display: block;
-}
-
 .nav-link {
   width: 100%;
   display: flex;
@@ -99,11 +89,12 @@ footer {
   height: 5rem;
   color: var(--yellow);
   text-decoration: none;
-  transition: 0.2s;
+  transition: 0.4s;
+  padding-right: 0.5rem;
 }
 
-.nav-link__logo {
-  justify-content: center;
+.nav-link a {
+  color: inherit;
 }
 
 .nav-link:hover {
@@ -140,6 +131,68 @@ footer {
   outline: none;
 }
 
+/* Small screens */
+@media only screen and (max-width: 600px) {
+  .navbar {
+    bottom: 0;
+    width: 100vw;
+    height: 5rem;
+    padding: 0;
+  }
+
+  .navbar-nav {
+    flex-direction: row;
+  }
+
+  .nav-link {
+    justify-content: center;
+  }
+
+  main {
+    margin: 0;
+    width: 100%;
+
+    padding: 0.5rem;
+  }
+}
+
+/* Large screens */
+@media only screen and (min-width: 600px) {
+  .navbar {
+    top: 0;
+    width: 5rem;
+    height: 100vh;
+  }
+
+  .nav-link__logo {
+    justify-content: center;
+    transform: rotate(-90deg);
+    transition: 0.4s;
+  }
+
+  .navbar:hover,
+  .navbar:focus,
+  .navbar:focus-within {
+    width: 16rem;
+  }
+
+  .navbar:hover .link-text,
+  .navbar:focus .link-text,
+  .navbar:focus-within .link-text {
+    display: block;
+  }
+
+  .navbar:hover .nav-link__logo,
+  .navbar:focus .nav-link__logo,
+  .navbar:focus-within .nav-link__logo {
+    transform: rotate(0deg);
+  }
+
+  main {
+    min-height: 100%;
+  }
+}
+
 form {
   padding: 0;
 }
diff --git a/layouts/partials/navbar.erb b/layouts/partials/navbar.erb
index e99e145..4384048 100644
--- a/layouts/partials/navbar.erb
+++ b/layouts/partials/navbar.erb
@@ -9,16 +9,19 @@
     <% for i in navigables %>
       <li class="nav-item">
         <a href="<%= i.path %>" class="nav-link">
-          <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="font-awesome-flag" class="svg-inline--fa fa-font-awesome-flag fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M444.373 359.424c0 7.168-6.144 10.24-13.312 13.312-28.672 12.288-59.392 23.552-92.16 23.552-46.08 0-67.584-28.672-122.88-28.672-39.936 0-81.92 14.336-115.712 29.696-2.048 1.024-4.096 1.024-6.144 2.048v77.824c0 21.405-16.122 34.816-33.792 34.816-19.456 0-34.816-15.36-34.816-34.816V102.4C12.245 92.16 3.029 75.776 3.029 57.344 3.029 25.6 28.629 0 60.373 0s57.344 25.6 57.344 57.344c0 18.432-8.192 34.816-22.528 45.056v31.744c4.124-1.374 58.768-28.672 114.688-28.672 65.27 0 97.676 27.648 126.976 27.648 38.912 0 81.92-27.648 92.16-27.648 8.192 0 15.36 6.144 15.36 13.312v240.64z"></path></svg>
+          <%= @items["/assets/navbar_icons/"+i[:naam]+".svg"].compiled_content %>
           <span class="link-text"><%= i[:naam] %> </span>
         </a>
       </li>
     <% end %>
 
     <li class="nav-item">
-      <form class="nav-link" action="/search.html">
-        <input type="search" name="q" placeholder="Zoek…">
-      </form>
+      <div class="nav-link">
+        <a href="/search.html"><%= @items["/assets/navbar_icons/search.svg"].compiled_content %></a>
+        <form class="link-text" action="/search.html">
+          <input type="search" name="q" placeholder="Zoek…">
+        </form>
+      </a>
     </li>
   </ul>
 </nav>