Adds hamburger menu on mobile to match design (#65)

* Stacks menu items on mobile and reorders so that the about dropdown menu is on the bottom for easier clicking of dropdown items * Adds menu to match mobile from designs * Add missing icon * Simple implementation for a responsive menu --------- Co-authored-by: Cristián Maureira-Fredes <[email protected]> Co-authored-by: Cristián Maureira-Fredes <[email protected]>
pyladies · Nov 4, 2023 · ee5732a · ee5732a
1 parent ccce9a5
commit ee5732a
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 32 deletions.
diff --git a/css/style.css b/css/style.css
@@ -63,6 +63,16 @@ h1, h2, h3, h4, h5 {
   height: 48px;
 }
 
+.hamburger-logo {
+  width: 32px;
+  height: 32px;
+}
+
+.hamburger-menu {
+  width: 35px;
+  height: 35px;
+}
+
 .bg-pink {
   background: var(--py-lady-pink);
 }

diff --git a/generate_site/templates/header.html b/generate_site/templates/header.html
@@ -1,35 +1,43 @@
 <header class="site-header sticky-top py-1">
-  <ul class="nav nav-pills container d-flex flex-column flex-md-row justify-content-around align-items-center">
-    <a class="py-2" href="index.html" aria-label="PyLadiesCon">
-      <img class="menu-logo" src="img/icon.png"/>
-    </a>
-    <li class="nav-item dropdown">
-      <a class="nav-link dropdown-toggle menu-font" data-toggle="dropdown" href="index.html" role="button" aria-haspopup="true" aria-expanded="false">About</a>
-      <div class="dropdown-menu">
-        <a class="dropdown-item" href="about.html#the-event">The Event</a>
-        <a class="dropdown-item" href="about.html#the-organizers">The Organizers</a>
-        <a class="dropdown-item" href="about.html#coc">Code of Conduct</a>
-      </div>
-    </li>
-    <!--
-    <li class="nav-item">
-      <a class="py-2 d-none d-md-inline-block menu-font" href="#">Speakers</a>
-    </li>
-    <li class="nav-item">
-      <a class="py-2 d-none d-md-inline-block menu-font" href="#">Schedule</a>
-    </li>
-    -->
-    <li class="nav-item">
-      <a class="py-2 d-none d-md-inline-block menu-font" href="sponsors.html">Sponsor</a>
-    </li>
-    <li class="nav-item">
-      <a class="py-2 d-none d-md-inline-block menu-font" href="https://pretalx.com/pyladiescon-2023/cfp">Call for Proposals</a>
-    </li>
-    <li class="nav-item">
-      <a class="py-2 d-none d-md-inline-block menu-font" href="index.html#contact">Contact</a>
-    </li>
-    <div class="text-end">
-        <a class="btn btn-outline-secondary btn-pink text-white" href="https://events.hubilo.com/pyladiescon2023/register">Register</a>
+  <nav class="navbar navbar-expand-lg navbar-light d-flex flex-row justify-content-around align-items-center">
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+      <img class="hamburger-logo" src="img/bar-chart-2.png"/>
+    </button>
+
+    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+      <ul class="navbar-nav mx-auto">
+        <a href="index.html" aria-label="PyLadiesCon">
+          <img class="menu-logo" src="img/icon.png"/>
+        </a>
+        <li class="nav-item dropdown px-4">
+          <a class="nav-link dropdown-toggle menu-font" data-toggle="dropdown" href="index.html" role="button" aria-haspopup="true" aria-expanded="false">About</a>
+          <div class="dropdown-menu">
+            <a class="dropdown-item" href="about.html#the-event">The Event</a>
+            <a class="dropdown-item" href="about.html#the-organizers">The Organizers</a>
+            <a class="dropdown-item" href="about.html#coc">Code of Conduct</a>
+          </div>
+        </li>
+        <!--
+        <li class="nav-item">
+          <a class="py-2 d-none d-md-inline-block menu-font" href="#">Speakers</a>
+        </li>
+        <li class="nav-item">
+          <a class="py-2 d-none d-md-inline-block menu-font" href="#">Schedule</a>
+        </li>
+        -->
+        <li class="nav-item px-4">
+          <a class="py-2 d-flex d-inline-block menu-font" href="sponsors.html">Sponsor</a>
+        </li>
+        <li class="nav-item px-4">
+          <a class="py-2 d-flex d-inline-block menu-font" href="https://pretalx.com/pyladiescon-2023/cfp">Call for Proposals</a>
+        </li>
+        <li class="nav-item px-4">
+          <a class="py-2 d-flex d-inline-block menu-font" href="index.html#contact">Contact</a>
+        </li>
+        <div class="text-end px-4">
+            <a class="btn btn-outline-secondary btn-pink text-white" href="">Register</a>
+        </div>
+      </ul>
     </div>
-  </ul>
+  </nav>
 </header>
diff --git a/img/bar-chart-2.png b/img/bar-chart-2.png