nav

brown-band · Nov 28, 2021 · aeb2285 · aeb2285
1 parent 82d702b
commit aeb2285
Show file tree

Hide file tree

Showing 8 changed files with 1,739 additions and 60 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -1,4 +1,10 @@
 module.exports = (eleventyConfig) => {
+  // Data:
+  eleventyConfig.addDataExtension("yml", (contents) =>
+    require("js-yaml").load(contents)
+  );
+
+  // Assets
   eleventyConfig.addPassthroughCopy("assets");
   eleventyConfig.addPassthroughCopy({
     "node_modules/bootstrap/dist/css/bootstrap.min.css": "assets/bootstrap.css",
@@ -7,7 +13,33 @@ module.exports = (eleventyConfig) => {
       "assets/bootstrap.min.js.map",
   });
   eleventyConfig.addWatchTarget("assets");
+
   return {
     passthroughFileCopy: true,
   };
 };
+
+function navShortcode(dropdowns) {
+  console.log(this);
+  return dropdowns.map(
+    (d) => /* HTML */ `
+      <li class="nav-item dropdown">
+        <button
+          class="nav-link dropdown-toggle bg-transparent border-0"
+          style="outline: 0"
+          id="dropdownMenuLink"
+          data-bs-toggle="dropdown"
+          aria-expanded="false"
+        >
+          ${d.title}
+        </button>
+        <ul
+          class="dropdown-menu dropdown-menu-dark bg-brown4 rounded-3 lg-shadow-brown"
+          aria-labelledby="dropdownMenuLink"
+        >
+          ${d.content}
+        </ul>
+      </li>
+    `
+  );
+}
diff --git a/_data/nav.yml b/_data/nav.yml
@@ -0,0 +1,73 @@
+- title: People
+  content:
+    - title: Band Board
+      url: /people/band-board
+    - title: Schedule
+      url: /schedule
+    - title: Join the Band!
+      url: /join-band
+    - title: Constitution
+      url: /constitution
+
+    - heading: Sections
+    - title: Flutes
+      url: /sections/flutes
+    - title: Clarinets
+      url: /sections/clarinets
+    - title: Saxophones & Mellophones (S&M)
+      url: /sections/s&m
+    - title: Trumpets
+      url: /sections/trumpets
+    - title: Low Brass
+      url: /sections/low-brass
+    - title: Percussion
+      url: /sections/percussion
+
+- title: Media
+  content:
+    - title: Buttons
+      url: /buttons
+    - title: Photos
+      url: /photos
+    - title: Recordings
+      url: /recordings
+    - title: Videos
+      url: /videos
+    - title: Lyrics
+      url: /lyrics
+    - title: Scripts
+      url: /show-scripts
+    - title: Alumni Newsletters
+      url: /alumni-newsletters
+
+- title: History
+  content:
+    - title: About Us
+      url: /about-us
+    - title: Elrod Snidley
+      url: /elrod-snidley
+    - title: Sound Off!
+      url: /sound
+    - title: 75 Years in Pictures
+      url: "/75-years-pictures"
+
+# todo: Members
+
+- title: More Info
+  content:
+    - title: Giving
+      url: /giving
+    - title: Visiting Bands
+      url: /visiting-bands
+    - title: Ivy Bands
+      url: /ivy-bands
+    - title: Ivy Bands Agreement
+      url: /ivy-bands-agreement
+
+    - heading: Commencement
+    - title: Schedule
+      url: /commencement-schedule
+    - title: Student Signup
+      url: https://docs.google.com/forms/d/1gDBvdABCfKt4JbuEdR2kOVR5RRp4gmNPoyUYlx0Q6cs/viewform?usp=send_form
+    - title: Alumni Signup
+      url: /commencement-sign-alumni
diff --git a/_includes/base.njk b/_includes/base.njk
@@ -7,7 +7,7 @@
     <script async src="/assets/bootstrap.js"></script>
   </head>
   <body>
-    <nav class="navbar navbar-expand-lg navbar-dark bg-brown">
+    <nav class="navbar navbar-expand-lg navbar-dark bg-brown2">
       <div class="container">
         <a class="navbar-brand me-5" href="#">
           <img class="m-1" src="/assets/elrod.png" height="50" />
@@ -25,17 +25,7 @@
           <span class="navbar-toggler-icon"></span>
         </button>
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
-          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-            <li class="nav-item">
-              <a class="nav-link" href="#">One</a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="#">Two</a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="#">Three</a>
-            </li>
-          </ul>
+          {% include "./nav.njk" %}
         </div>
       </div>
     </nav>

diff --git a/_includes/nav.njk b/_includes/nav.njk
@@ -0,0 +1,28 @@
+<ul class="navbar-nav">
+  {% for dropdown in nav %}
+  <li class="nav-item dropdown mx-1">
+    <button
+      class="nav-link dropdown-toggle bg-transparent border-0"
+      style="outline: 0"
+      id="dropdownMenuLink"
+      data-bs-toggle="dropdown"
+      aria-expanded="false"
+    >
+      {{dropdown.title}}
+    </button>
+
+    <ul
+      class="dropdown-menu dropdown-menu-dark bg-brown4 rounded-3 lg-shadow-brown"
+      aria-labelledby="dropdownMenuLink"
+    >
+      {% for link in dropdown.content %}{% if link.heading %}
+      <li><hr class="dropdown-divider" /></li>
+      <li><h6 class="dropdown-header">{{link.heading}}</h6></li>
+      {% else %}
+      <li><a class="dropdown-item" href="{{link.url}}">{{link.title}}</a></li>
+      {% endif %}{% endfor %}
+    </ul>
+  </li>
+  {% endfor %}
+  <li class="nav-item"><a href="/contact" class="nav-link">Contact</a></li>
+</ul>
diff --git a/_redirects b/_redirects
@@ -0,0 +1 @@
+/sections/saxophones-mellophones-sm => /sections/s&m
diff --git a/assets/styles.css b/assets/styles.css
@@ -2,3 +2,26 @@
   --bs-bg-opacity: 1;
   background: #271b0c;
 }
+.bg-brown2 {
+  --bs-bg-opacity: 1;
+  background: #382710;
+}
+.bg-brown3 {
+  --bs-bg-opacity: 1;
+  background: #483314;
+}
+.bg-brown4 {
+  --bs-bg-opacity: 1;
+  background: #593f17;
+}
+@media (min-width: 992px) {
+  .lg-shadow-brown {
+    box-shadow: 0 0.35rem 1rem 0.4rem #593f1755 !important;
+  }
+}
+
+.dropdown-header {
+  user-select: none;
+  -webkit-user-select: none;
+  pointer-events: none;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		/sections/saxophones-mellophones-sm => /sections/s&m