From 21011381c2866c94f64b7286f45d57590564822f Mon Sep 17 00:00:00 2001
From: gellowg <me@georgetong.uk>
Date: Fri, 4 Sep 2026 00:07:23 +0100
Subject: [PATCH 1/7] Changed structure of menu in config, Changed a tags to
 button tags as dropdown titles no longer navigate to pages, got rid of
 additional item for mobile dropdowns for same reason openning a new dropdown
 closes others on mobile

---
 _config.yml           | 37 +++++++++++++++++++------------------
 _includes/header.html |  7 +++----
 css/main.scss         |  1 +
 js/hamburger.js       |  5 +++++
 4 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/_config.yml b/_config.yml
index e4987e94..09741bf6 100644
--- a/_config.yml
+++ b/_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: Sponsors
+        link: /sponsor
+      - name: Community Links
+        link: /links
   - name: Ball
-    link: /ball
     children:
       - name: 2026
         link: /ball/2026
@@ -45,19 +57,8 @@ 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
 baseurl: /
 root: /
 
diff --git a/_includes/header.html b/_includes/header.html
index 2228007e..9b4d45d5 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -8,7 +8,7 @@
     {% 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>
+	<button type="button">{% 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">
       {% for sub in item.children %}
       <a href="{{ sub.link }}">{{ sub.name }}</a>
@@ -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 }})">{% 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 %}
diff --git a/css/main.scss b/css/main.scss
index 47a70279..1d2cc46c 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -439,6 +439,7 @@ header {
       border: none;
       text-decoration: none;
       font-weight: bold;
+      cursor: pointer;
     }
   }
 }
diff --git a/js/hamburger.js b/js/hamburger.js
index 612787b5..09eae6c6 100644
--- a/js/hamburger.js
+++ b/js/hamburger.js
@@ -15,6 +15,11 @@ document.addEventListener("DOMContentLoaded", () => {
 
 window.toggleShow = function (id) {
   let x = document.getElementById("hbdd_" + id);
+
+  document.querySelectorAll("#hamburger-menu .mobile-dropdown").forEach((dropdown) => {
+    if (dropdown !== x) dropdown.style.display = "none";
+  });
+
   if (x.style.display === "none") {
     x.style.display = "block";
   } else {

From dd7d2c668d60a10ee432b35e75d5ffd352eb7c78 Mon Sep 17 00:00:00 2001
From: gellowg <me@georgetong.uk>
Date: Fri, 4 Sep 2026 00:14:08 +0100
Subject: [PATCH 2/7] Added accessibility features: Dropdown buttons identify
 the menu they control, Added aria JavaScript updates aria-expanded whenever a
 mobile dropdown changes

---
 _includes/header.html |  6 +++---
 css/main.scss         |  3 ++-
 js/hamburger.js       | 17 ++++++++---------
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/_includes/header.html b/_includes/header.html
index 9b4d45d5..5f0db3dd 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -8,8 +8,8 @@
     {% for item in site.menu %}
     {% if item.children %}
     <div class="nav dropdown {{ item.class }}">
-	<button type="button">{% 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">
+	<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,7 +29,7 @@
     {% for item in site.menu %}
     <div class="nav {{ item.class }}">
 	{% if item.children %}
-	<button type="button" 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 %}</button>
+	<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/>
diff --git a/css/main.scss b/css/main.scss
index 1d2cc46c..a804413a 100644
--- a/css/main.scss
+++ b/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;
     }
diff --git a/js/hamburger.js b/js/hamburger.js
index 09eae6c6..a54905ac 100644
--- a/js/hamburger.js
+++ b/js/hamburger.js
@@ -14,15 +14,14 @@ document.addEventListener("DOMContentLoaded", () => {
 });
 
 window.toggleShow = function (id) {
-  let x = document.getElementById("hbdd_" + id);
+  const menu = document.getElementById("hamburger-menu");
+  const selected = document.getElementById("hbdd_" + id);
+  const shouldOpen = selected.style.display === "none";
 
-  document.querySelectorAll("#hamburger-menu .mobile-dropdown").forEach((dropdown) => {
-    if (dropdown !== x) dropdown.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));
   });
-
-  if (x.style.display === "none") {
-    x.style.display = "block";
-  } else {
-    x.style.display = "none";
-  }
 };

From be84b541e7d60610dea955c5f4ad7eae179083ce Mon Sep 17 00:00:00 2001
From: gellowg <me@georgetong.uk>
Date: Fri, 4 Sep 2026 00:18:58 +0100
Subject: [PATCH 3/7] Added dropdown chevrons

---
 css/main.scss | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/css/main.scss b/css/main.scss
index a804413a..850d5796 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -441,6 +441,21 @@ header {
       text-decoration: none;
       font-weight: bold;
       cursor: pointer;
+
+      &:after {
+        display: inline-block;
+        width: 0.35em;
+        height: 0.35em;
+        margin-left: 0.45em;
+        border-right: 0.12em solid currentColor;
+        border-bottom: 0.12em solid currentColor;
+        content: "";
+        transform: translateY(-0.18em) rotate(45deg);
+      }
+
+      &[aria-expanded="true"]:after {
+        transform: translateY(0.02em) rotate(225deg);
+      }
     }
   }
 }

From 2b9cb7022bee17343419373cd51a8502b52538fd Mon Sep 17 00:00:00 2001
From: gellowg <me@georgetong.uk>
Date: Fri, 4 Sep 2026 00:21:51 +0100
Subject: [PATCH 4/7] Changed sponsors to Sponsor Us

---
 _config.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_config.yml b/_config.yml
index 09741bf6..13574349 100644
--- a/_config.yml
+++ b/_config.yml
@@ -37,7 +37,7 @@ menu:
         link: /committee
       - name: Merch
         link: /merch
-      - name: Sponsors
+      - name: Sponsor Us
         link: /sponsor
       - name: Community Links
         link: /links

From 8f90d09422ab406e8c75a57d98e5e48ea4d636f5 Mon Sep 17 00:00:00 2001
From: gellowg <me@georgetong.uk>
Date: Fri, 4 Sep 2026 00:27:47 +0100
Subject: [PATCH 5/7] Made hamburger menu have a pointer cursor on hover Fixed
 hamburger menu from filling the whole navbar Mobile menu closes if viewport
 crosses above 1050px (when desktop)

---
 css/main.scss   | 4 +++-
 js/hamburger.js | 4 ++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/css/main.scss b/css/main.scss
index 850d5796..27596676 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -354,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;
diff --git a/js/hamburger.js b/js/hamburger.js
index a54905ac..06e843f5 100644
--- a/js/hamburger.js
+++ b/js/hamburger.js
@@ -11,6 +11,10 @@ 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) {

From 3221a1ec10f0966f04426fcae84aa32cf60aeb74 Mon Sep 17 00:00:00 2001
From: gellowg <me@georgetong.uk>
Date: Fri, 4 Sep 2026 01:09:39 +0100
Subject: [PATCH 6/7] Added a marker effect under Join CSS to make it CTA. Made
 JS prettier

---
 _config.yml     |  1 +
 css/main.scss   | 61 +++++++++++++++++++++++++++++++++++++++++++++++++
 js/hamburger.js |  8 ++++---
 3 files changed, 67 insertions(+), 3 deletions(-)

diff --git a/_config.yml b/_config.yml
index 13574349..9de2e11d 100644
--- a/_config.yml
+++ b/_config.yml
@@ -59,6 +59,7 @@ menu:
         link: /ball/2020
   - name: Join CSS
     link: /membership
+    class: join-nav
 baseurl: /
 root: /
 
diff --git a/css/main.scss b/css/main.scss
index 27596676..d533f273 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -521,6 +521,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;
 }
diff --git a/js/hamburger.js b/js/hamburger.js
index 06e843f5..e7226ac6 100644
--- a/js/hamburger.js
+++ b/js/hamburger.js
@@ -12,9 +12,11 @@ document.addEventListener("DOMContentLoaded", () => {
     }
   });
 
-  window.matchMedia("(min-width: 1051px)").addEventListener("change", (event) => {
-    if (event.matches) menu.classList.remove("visible");
-  });
+  window
+    .matchMedia("(min-width: 1051px)")
+    .addEventListener("change", (event) => {
+      if (event.matches) menu.classList.remove("visible");
+    });
 });
 
 window.toggleShow = function (id) {

From c90dab9c9f36bec0399a7586efc58ba1abf8d160 Mon Sep 17 00:00:00 2001
From: gellowg <me@georgetong.uk>
Date: Fri, 4 Sep 2026 01:19:11 +0100
Subject: [PATCH 7/7] changed chevron design and position

---
 css/main.scss | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/css/main.scss b/css/main.scss
index d533f273..da13a7b8 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -436,6 +436,8 @@ header {
     }
 
     button {
+      display: inline-flex;
+      align-items: center;
       color: white;
       background: none;
       padding: 0;
@@ -446,17 +448,16 @@ header {
 
       &:after {
         display: inline-block;
-        width: 0.35em;
-        height: 0.35em;
-        margin-left: 0.45em;
-        border-right: 0.12em solid currentColor;
-        border-bottom: 0.12em solid currentColor;
+        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: "";
-        transform: translateY(-0.18em) rotate(45deg);
       }
 
       &[aria-expanded="true"]:after {
-        transform: translateY(0.02em) rotate(225deg);
+        transform: rotate(180deg);
       }
     }
   }