revisit navbar

Rules

@@ -40,6 +40,7 @@ end
 compile '/homepage.md' do
   filter :kramdown
   layout '/homepage.*'
+  layout '/default.*'
   layout '/base.*'
   write '/index.html'
 end

content/faq.erb

@@ -3,6 +3,7 @@ naam: FAQ
 navigable: true
 order: 3
 ---
+<div>
 <h1>FAQ — Vaakgestelde vragen</h1>
 <% @items.find_all('/faq/*').each do |question| %>
   <details>
@@ -15,3 +16,4 @@ order: 3
   </details>
 <% end %>
 <p>Geen antwoord gevonden op jouw vraag? <a href="mailto:durfdoen@gentsestudentenraad.be?Subject=Vraag Durf Doen">Contacteer ons!</a></p>
+</div>

content/homepage.md

@@ -1,5 +1,5 @@
 ---
 naam: Home
-navigable: true
+navigable: false
 order: 1
 ---

content/stylesheets/main.css

@@ -27,20 +27,139 @@ body {
   font-family: futura, Avenir Next, Verdana, Geneva, Tahoma, sans-serif;
 }
 
-.align {
+main {
+  margin-left: 5rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: calc(100%-5rem);
+
+  min-height: 100%;
+
+  padding: 2rem 2rem 0 2rem;
+}
+
+.beforeTheFold {
+  min-height: 100vh;
+}
+
+footer {
+  width: 80%;
   margin: 0 auto;
+}
+
+.align {
   max-width: 1280px;
-  padding: 0 1em;
 }
 
 .align .large {
   max-width: 1500px;
 }
 
-.beforeTheFold,
+.navbar {
-main {
+  z-index: 10;
-  position: relative;
+  position: fixed;
-  min-height: 100%;
+  background-color: var(--lightblue);
+  width: 5rem;
+  height: 100vh;
+  padding-bottom: 2rem;
+  transition: width 600ms ease;
+}
+
+.navbar-nav {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+}
+
+.nav-item {
+  width: 100%;
+}
+
+.nav-item:last-child {
+  margin-top: auto;
+}
+
+.navbar:hover {
+  width: 16rem;
+}
+
+.navbar:hover .link-text {
+  display: block;
+}
+
+.nav-link {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  height: 5rem;
+  color: var(--yellow);
+  text-decoration: none;
+  transition: 0.2s;
+}
+
+.nav-link__logo {
+  justify-content: center;
+}
+
+.nav-link:hover {
+  background: var(--yellow);
+  color: var(--lightblue);
+}
+
+.link-text {
+  display: none;
+  margin-left: 1rem;
+  overflow: hidden;
+
+  font-weight: bolder;
+}
+
+.nav-link svg {
+  width: 2rem;
+  min-width: 2rem;
+  margin: 0 1.5rem;
+}
+
+.nav-item input {
+  width: 100%;
+  border: none;
+  background-color: var(--white);
+  color: var(--darkblue);
+
+  margin: 0;
+}
+
+.nav-item input:hover,
+.nav-item input:focus {
+  border: none;
+  outline: none;
+}
+
+form {
+  padding: 0;
+}
+
+.logo__image {
+  width: 79px;
+  height: 83px;
+}
+
+.fa-primary {
+  color: #ff7eee;
+}
+
+.fa-secondary {
+  color: #df49a6;
+}
+
+.fa-primary,
+.fa-secondary {
+  transition: var(--transition-speed);
 }
 
 button,
@@ -63,37 +182,6 @@ header {
   position: relative;
   background-color: var(--lightCyan);
 }
-header.homepage {
-  background-color: transparent;
-}
-
-nav a {
-  text-decoration: none;
-  font-family: futura, Avenir Next, Verdana, Geneva, Tahoma, sans-serif;
-  color: var(--darkblue);
-  padding: 1rem 2rem;
-  margin: 0 1rem;
-}
-
-nav ul {
-  list-style: none;
-  justify-content: space-between;
-}
-nav li {
-  display: inline-block;
-}
-
-nav {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1rem 0;
-}
-
-header .logo {
-  width: 79px;
-  height: 83px;
-}
 
 h2 {
   font-family: futura, Avenir Next, Verdana, Geneva, Tahoma, sans-serif;
@@ -232,6 +320,10 @@ h2 {
   box-shadow: inset 0 -0.15em 0 var(--yellow);
 }
 
+.home_link .active_link {
+  box-shadow: inset 0 -0.1rem 0 var(--darkblue);
+}
+
 #postcodeField {
   -webkit-appearance: none;
   margin: 0;
@@ -336,9 +428,6 @@ fieldset p label input {
   min-width: 200px;
   max-width: 300px;
   flex: 1 0 calc(25% - 10px);
-  /* margin: 5px; */
-  /* background: #111; */
-
   position: relative;
 }
 

content/verenigingen.md

@@ -1,5 +1,5 @@
 ---
-naam: Ontdek verenigingen
+naam: Ontdek
 navigable: true
 order: 2
 ---

layouts/default.erb

@@ -1,9 +1,7 @@
-<header class="align homepage">
+<%= render '/partials/navbar.*' %>
-  <%= render '/partials/navbar.*' %>
+
-</header>
+<main>
-<div class="align large">
 <%= yield %>
-</div>
 <footer class="align">
   <div>
     <img src="" alt="">
@@ -19,3 +17,4 @@
     <p>Made with ♥ by <a href="https://zeus.gent">Zeus WPI</a></p>
   </div>
 </footer>
+</main>

layouts/homepage.erb

@@ -1,7 +1,4 @@
 <div class="beforeTheFold">
-  <header class="align homepage">
-    <%= render '/partials/navbar.*' %>
-  </header>
   <div class="header_photo backgroundSquare"></div>
 
 
@@ -21,7 +18,7 @@
       <div>
         <p>Durf Doen wil je helpen de vereniging te vinden waar jij je thuis zal voelen.</p>
         <div class="quizSpotlight">
-          <a href="test">Doe de test</a>
+          <a href="quiz.html">Doe de test</a>
         </div>
       </div>
     </div>
@@ -43,21 +40,4 @@
       <p>Weus ZPI is de studentenvereniging voor InFoRmAtIcA aan de UGent. Ons doel is een bullshitty omgeving te bullshitten voor bullshitted studenten die hun bullshit willen uitbreiden door zich te engageren voor bullshitprojecten.</p>
     </section>
   </article>
-
 </main>
-
-<footer class="align">
-  <div>
-    <img src="" alt="">
-    <img src="" alt="">
-    <img src="" alt="">
-    <img src="" alt="">
-    <img src="" alt="">
-    <img src="" alt="">
-    <img src="" alt="">
-  </div>
-  <p>©2020 Gentse studentenraad</p>
-  <div lang="en">
-    <p>Made with ♥ by <a href="https://zeus.gent">Zeus WPI</a></p>
-  </div>
-</footer>

layouts/partials/navbar.erb

@@ -1,22 +1,33 @@
-<nav>
+<nav class="navbar">
-  <img src="/assets/OmdatHetDurfDoenLogoSuckt.png" alt="" class="logo">
+  <ul class="navbar-nav">
-  <ul>
+    <li class="nav-item">
-    <% for i in navigables %>
+      <a href="/" class="nav-link nav-link__logo">
-      <li><%= link_to(i[:naam], i, class: "nav_link") %></li>
+        <img src="/assets/OmdatHetDurfDoenLogoSuckt.png" alt="" class="logo__image">
-    <% end %>
+      </a>
-    <script>
+    </li>
-      const nav_links = document.querySelectorAll(".nav_link");
-      nav_links.forEach(nav_link => {
-        if (nav_link.getAttribute("href") === window.location.pathname) {
-          nav_link.classList.add("active_link");
-        }
-      })
-    </script>
 
+    <% 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>
+          <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>
+    </li>
   </ul>
-  <div>
-    <form action="/search.html">
-      <input type="search" name="q" placeholder="Zoek vereniging, convent …">
-    </form>
-  </div>
 </nav>
+
+<script>
+  const nav_links = document.querySelectorAll(".nav_link");
+  nav_links.forEach(nav_link => {
+    if (nav_link.getAttribute("href") === window.location.pathname) {
+      nav_link.classList.add("active_link");
+    }
+  })
+</script>