Add unavailable status, update nav, and fix hamburger menu

Author: LMBishop

_collections/_merch/plushies.md

@@ -2,7 +2,7 @@
 layout: merch
 title: TeX Plushies
 slug: plushies
-purchase-url: https://www.guildofstudents.com/
+# purchase-url: https://www.guildofstudents.com/
 options:
   - name: Plushie
     quantity: 1

_config.yml

@@ -12,6 +12,13 @@ social:
     - https://twitter.com/CSSBham
     - https://github.com/CSSUoB
 menu:
+  - name: News
+    link: /newsletter
+  - name: Events
+    link: /events
+    children:
+      - name: Calendar
+        link: /calendar
   - name: Ball
     link: /ball
     children:
@@ -27,21 +34,15 @@ menu:
         link: /ball/2021
       - name: 2020
         link: /ball/2020
-  - name: Events
-    link: /events
-  - name: Newsletter
-    link: /newsletter
+  - name: Merch
+    link: /merch
   - name: Committee
     link: /committee
-  - name: Calendar
-    link: /calendar
   - name: Sponsor
     link: /sponsor
   - name: About
     link: /about
     children:
-      - name: About Us
-        link: /about
       - name: Membership
         link: /membership
       - name: Links

_includes/header.html

@@ -31,6 +31,7 @@
 	{% if item.children %}
 	<a onclick="toggleShow({{ forloop.index }})">{{ item.name }}</a>
 	<div class="dropdown" style="display: none" id="hbdd_{{ forloop.index }}">
+        <a href="{{ item.link | relative_url }}">- {{ item.name }}</a><br/>
 	  {% for sub in item.children %}
           <a href="{{ sub.link | relative_url }}">- {{ sub.name }}</a><br/>
 	  {% endfor %}

_layouts/merch.html

@@ -49,7 +49,9 @@ <h2>Purchase options</h2>
           </div>
         {% endfor %}
         {% if page.purchase-url %}
-          <a href="{{ page.purchase-url }}" class="button guild-button">Buy on Guild website <i class="fas fa-arrow-right"></i></a>
+          <a href="{{ page.purchase-url }}" target="_blank" class="button guild-button">Buy on Guild website <i class="fas fa-arrow-right"></i></a>
+        {% else %}
+          <a href="#" class="button unavailable-button"><i class="fas fa-ban"></i>Currently unavailable</a>
         {% endif %}
       </div>
     </div>

css/merch.scss

@@ -120,24 +120,35 @@
   }
 }
 
-.guild-button {
+.button {
   display: inline-block;
   padding: 10px;
   font-weight: bold;
   border-radius: 10px;
-  text-align: center;
   text-decoration: none;
   font-family: "Roboto", sans-serif;
   width: 100%;
   box-sizing: border-box;
-  background-color: #5bbaa2;
   color: white;
+  display: flex;
+  gap: 0.5rem;
+  justify-content: center;
+  align-items: center;
 
   i {
     color: white;
   }
 }
 
+.guild-button {
+  background-color: #5bbaa2;
+}
+
+.unavailable-button {
+  background-color: gray;
+  cursor: not-allowed;
+}
+
 .gallery img,
 .merch-description img {
   border-radius: 10px;

js/hamburger.js

@@ -13,7 +13,7 @@ document.addEventListener("DOMContentLoaded", () => {
   });
 });
 
-export function toggleShow(id) {
+window.toggleShow = function (id) {
   let x = document.getElementById("hbdd_" + id);
   if (x.style.display === "none") {
     x.style.display = "block";