Reorganise main navigation menu

_config.yml

@@ -21,15 +21,27 @@ menu:
     class: freshers-nav
     image: /assets/images/freshers-2026/freshers-week-2026-lockup.png
     image_alt: Freshers Week
-  - name: News
-    link: /newsletter
-  - name: Events
-    link: /events
+  - name: What's On
     children:
+      - name: Events
+        link: /events
       - name: Calendar
         link: /calendar
+      - name: News
+        link: /newsletter
+  - name: Society
+    children:
+      - name: About
+        link: /about
+      - name: Committee
+        link: /committee
+      - name: Merch
+        link: /merch
+      - name: Sponsor Us
+        link: /sponsor
+      - name: Community Links
+        link: /links
   - name: Ball
-    link: /ball
     children:
       - name: 2026
         link: /ball/2026
@@ -45,19 +57,9 @@ menu:
         link: /ball/2021
       - name: 2020
         link: /ball/2020
-  - name: Merch
-    link: /merch
-  - name: Committee
-    link: /committee
-  - name: Sponsor
-    link: /sponsor
-  - name: About
-    link: /about
-    children:
-      - name: Membership
-        link: /membership
-      - name: Links
-        link: /links
+  - name: Join CSS
+    link: /membership
+    class: join-nav
 baseurl: /
 root: /
 

_includes/header.html

@@ -8,8 +8,8 @@
     {% for item in site.menu %}
     {% if item.children %}
     <div class="nav dropdown {{ item.class }}">
-	<a href="{{ item.link | relative_url }}">{% if item.image %}<img class="nav-item-image" src="{{ item.image | relative_url }}" alt="{{ item.image_alt | default: item.name }}">{% else %}{{ item.name }}{% endif %}</a>
-    <div class="dropdown-content">
+	<button type="button" aria-haspopup="true" aria-controls="desktop-dropdown-{{ forloop.index }}">{% if item.image %}<img class="nav-item-image" src="{{ item.image | relative_url }}" alt="{{ item.image_alt | default: item.name }}">{% else %}{{ item.name }}{% endif %}</button>
+    <div class="dropdown-content" id="desktop-dropdown-{{ forloop.index }}">
       {% for sub in item.children %}
       <a href="{{ sub.link }}">{{ sub.name }}</a>
       {% endfor %}
@@ -29,9 +29,8 @@
     {% for item in site.menu %}
     <div class="nav {{ item.class }}">
 	{% if item.children %}
-	<a onclick="toggleShow({{ forloop.index }})">{% if item.image %}<img class="nav-item-image" src="{{ item.image | relative_url }}" alt="{{ item.image_alt | default: item.name }}">{% else %}{{ item.name }}{% endif %}</a>
-	<div class="dropdown" style="display: none" id="hbdd_{{ forloop.index }}">
-        <a href="{{ item.link | relative_url }}">- {{ item.name }}</a><br/>
+	<button type="button" onclick="toggleShow({{ forloop.index }})" aria-expanded="false" aria-controls="hbdd_{{ forloop.index }}">{% if item.image %}<img class="nav-item-image" src="{{ item.image | relative_url }}" alt="{{ item.image_alt | default: item.name }}">{% else %}{{ item.name }}{% endif %}</button>
+	<div class="dropdown mobile-dropdown" style="display: none" id="hbdd_{{ forloop.index }}">
 	  {% for sub in item.children %}
           <a href="{{ sub.link | relative_url }}">- {{ sub.name }}</a><br/>
 	  {% endfor %}

css/main.scss

@@ -303,7 +303,8 @@ header {
       height: 1px;
     }
 
-    &.dropdown:hover .dropdown-content {
+    &.dropdown:hover .dropdown-content,
+    &.dropdown:focus-within .dropdown-content {
       display: block;
       text-align: center;
     }
@@ -353,10 +354,12 @@ header {
   }
 
   .hamburger {
-    flex: 1 1 auto;
+    flex: 0 0 auto;
+    margin-left: auto;
     text-align: right;
     display: none;
     padding-right: 20px;
+    cursor: pointer;
 
     z-index: 2000;
     padding-top: 5px;
@@ -433,12 +436,29 @@ header {
     }
 
     button {
+      display: inline-flex;
+      align-items: center;
       color: white;
       background: none;
       padding: 0;
       border: none;
       text-decoration: none;
       font-weight: bold;
+      cursor: pointer;
+
+      &:after {
+        display: inline-block;
+        width: 0.46em;
+        height: 0.3em;
+        margin-left: 0.4em;
+        background-color: currentColor;
+        clip-path: polygon(0 0, 50% 58%, 100% 0, 100% 42%, 50% 100%, 0 42%);
+        content: "";
+      }
+
+      &[aria-expanded="true"]:after {
+        transform: rotate(180deg);
+      }
     }
   }
 }
@@ -502,6 +522,67 @@ header .mobile-menu .nav.freshers-nav > a {
   width: 100%;
 }
 
+header .nav.join-nav {
+  > a {
+    display: inline-block;
+    position: relative;
+    z-index: 0;
+    color: white;
+    white-space: nowrap;
+
+    &:before {
+      position: absolute;
+      z-index: -1;
+      top: 0.1em;
+      left: -0.25em;
+      width: 100%;
+      height: 1em;
+      padding: 0 0.25em;
+      background-color: $TeX-Purple;
+      clip-path: polygon(
+        1% 8%,
+        7% 2%,
+        16% 6%,
+        27% 1%,
+        39% 5%,
+        51% 2%,
+        64% 6%,
+        76% 1%,
+        89% 5%,
+        99% 2%,
+        100% 16%,
+        98% 29%,
+        100% 43%,
+        98% 58%,
+        100% 74%,
+        98% 91%,
+        90% 97%,
+        78% 94%,
+        65% 99%,
+        52% 95%,
+        39% 99%,
+        27% 94%,
+        14% 98%,
+        1% 93%,
+        2% 78%,
+        0 63%,
+        2% 47%,
+        0 31%,
+        2% 18%
+      );
+      content: "";
+      pointer-events: none;
+      transform: rotate(179.6deg);
+    }
+  }
+}
+
+@media only screen and (max-width: 1050px) {
+  header .mobile-menu .nav.join-nav > a {
+    line-height: 1.2;
+  }
+}
+
 hr {
   color: #9d68dc;
 }

js/hamburger.js

@@ -11,13 +11,23 @@ document.addEventListener("DOMContentLoaded", () => {
       menu.classList.toggle("visible");
     }
   });
+
+  window
+    .matchMedia("(min-width: 1051px)")
+    .addEventListener("change", (event) => {
+      if (event.matches) menu.classList.remove("visible");
+    });
 });
 
 window.toggleShow = function (id) {
-  let x = document.getElementById("hbdd_" + id);
-  if (x.style.display === "none") {
-    x.style.display = "block";
-  } else {
-    x.style.display = "none";
-  }
+  const menu = document.getElementById("hamburger-menu");
+  const selected = document.getElementById("hbdd_" + id);
+  const shouldOpen = selected.style.display === "none";
+
+  menu.querySelectorAll(".mobile-dropdown").forEach((dropdown) => {
+    const isSelected = dropdown === selected && shouldOpen;
+    dropdown.style.display = isSelected ? "block" : "none";
+    const trigger = menu.querySelector(`[aria-controls="${dropdown.id}"]`);
+    trigger?.setAttribute("aria-expanded", String(isSelected));
+  });
 };