ui: css-ify navigation bar frontend

Rely on an almost-pure CSS implementation for the navigation bar. The
old implementation was quite ugly, as it relied on the javascript
cloning a bunch of HTML nodes to create the mobile-only dropdown.
Instead, just do this duplication when generating the HTML (the cloning
of nodes was not cloning event handlers, so depending on the order in
which JS files were loaded, registering event handler to navbar items
was impossible. Or rather, they would only work on the desktop version).
This also eliminates the use of some jQuery, which is always nice. The
cost here are some animations, but really, we don't need those.

While we're at it, remove some unused css definitions. This entire part
of the code pre-dates pointercrate, and stems from when I was messing
around with doing my own Bootstrap-style css framework when I was in
high school, to learn webdev. Good times.

Signed-off-by: stadust <43299462+stadust@users.noreply.github.com>

Author: stadust

pointercrate-core-pages/src/navigation.rs

@@ -40,22 +40,32 @@ impl NavigationBar {
     }
 }
 
-impl Render for &TopLevelNavigationBarItem {
+struct NavGroup<T>(T);
+
+impl<T: Render> Render for NavGroup<T> {
     fn render(&self) -> Markup {
         html! {
             div.nav-group {
-                a.nav-item.hover.white href = (self.item.link) {
-                    (self.item.content)
-                    @if !self.sub_levels.is_empty() {
-                        i.fas.fa-sort-down style = "height: 50%; padding-left: 5px" {}
-                    }
-                }
+                (self.0)
+            }
+        }
+    }
+} 
+
+impl Render for TopLevelNavigationBarItem {
+    fn render(&self) -> Markup {
+        html! {
+            a.nav-item.hover.white href = (self.item.link) {
+                (self.item.content)
                 @if !self.sub_levels.is_empty() {
-                    ul.nav-hover-dropdown {
-                        @for sub_item in &self.sub_levels {
-                            li {
-                                a.white.hover href = (sub_item.link) { (sub_item.content)}
-                            }
+                    i.fas.fa-sort-down style = "height: 50%; padding-left: 5px" {}
+                }
+            }
+            @if !self.sub_levels.is_empty() {
+                ul.nav-hover-dropdown {
+                    @for sub_item in &self.sub_levels {
+                        li {
+                            a.white.hover href = (sub_item.link) { (sub_item.content)}
                         }
                     }
                 }
@@ -69,22 +79,27 @@ impl Render for NavigationBar {
         html! {
             header {
                 nav.center.collapse.underlined.see-through {
-                    div.nav-icon style = "margin-right: auto" {
+                    div.nav-icon.nav-nohide style = "margin-right: auto" {
                         a href = "/" aria-label = "Go to homepage" {
                             img src = (self.logo_path) style="height:15px" alt="Logo";
                         }
                     }
                     @for item in &self.items {
-                        (item)
+                        (NavGroup(item))
                     }
-                    div.nav-item.collapse-button {
+                    div.nav-item.collapse-button.nav-nohide {
                         div.hamburger.hover {
                             input type="checkbox"{}
                             span{}
                             span{}
                             span{}
                         }
                     }
+                    div.nav-drop-down {
+                        @for item in &self.items {
+                            (item)
+                        }
+                    }
                 }
                 div {} // artificial spacing
             }

pointercrate-core-pages/static/css/nav.css

@@ -67,31 +67,15 @@ header nav .nav-drop-down {
 
   background: inherit;
   width: 100%;
-
   display: none;
 
-  flex-direction: column;
-
   z-index: 1000;
 
   box-shadow: 0px 7px 10px 1px rgba(0, 0, 0, 0.2);
 }
 
-header nav .nav-drop-down .seperator {
-  border-right: None;
-  border-bottom: 1px solid #999;
-
-  height: 0px;
-  width: calc(100% - 20px);
-
-  align-self: center;
-
-  margin: 0px 10px 10px 10px;
-  padding: 10px 0px 0px 0px;
-}
-
 /*
- * Things for on hover sub-menus
+ * Things for on hover sub-menus.
  */
 header nav .nav-hover-dropdown {
   margin: 0;
@@ -124,8 +108,7 @@ header nav .nav-drop-down .nav-hover-dropdown a {
 
 /* --------- smartphone ----------- */
 @media (max-width: 1071px) {
-  .collapse > :not(.nav-drop-down).nav-item:not(.nav-nohide),
-  .collapse > :not(.nav-drop-down) .nav-item:not(.nav-nohide) {
+  .collapse > :not(.nav-drop-down).nav-group:not(.nav-nohide) {
     display: none;
   }
 
@@ -143,6 +126,10 @@ header nav .nav-drop-down .nav-hover-dropdown a {
     margin: 0;
   }
 
+  .nav-drop-down.extended {
+    display: block;
+  }
+
   .collapse-button {
     display: flex;
     height: 27px !important;
@@ -155,22 +142,11 @@ header nav .nav-drop-down .nav-hover-dropdown a {
 }
 
 @media (min-width: 1072px) {
+
   .nav-drop-down {
     display: none;
   }
 
-  header nav .seperator {
-    border-right: 1px solid #999;
-
-    width: 0px;
-    height: 80%;
-
-    align-self: center;
-
-    margin-right: 10px;
-    padding: 0px 0px 0px 10px;
-  }
-
   .collapse-button {
     display: none !important;
   }

pointercrate-core-pages/static/js/nav.js

@@ -1,94 +1,16 @@
 "use strict";
 
-const TEMPLATES = {
-  DROP_DOWN: "<div class='nav-drop-down'></div>",
-  BUTTON:
-    '<div class ="nav-item collapse-button nav-nohide"><div class="hamburger hover"><input type="checkbox" /><span></span><span></span><span></span></div></div>',
-};
-
-const NOHIDE_CLASSES = [".collapse-button", ".nav-icon"];
-
 class NavigationBar {
   constructor(navigation) {
-    this.extended = false;
-    this.nav = $(navigation);
-
-    let dropDown = document.createElement("div");
-    dropDown.classList.add("nav-drop-down");
-
-    for (let navGroup of navigation.getElementsByClassName("nav-group")) {
-      for (let navItem of navGroup.childNodes) {
-        if (!navItem.classList.contains("nav-nohide")) {
-          let clone = navItem.cloneNode(true);
-
-          for (let hovered of clone.getElementsByClassName(
-            "nav-hover-dropdown"
-          ))
-            hovered.classList.remove("nav-hover-dropdown");
+    let dropDown = navigation.getElementsByClassName("nav-drop-down")[0];
 
-          dropDown.appendChild(clone);
-        }
-      }
-    }
-    navigation.appendChild(dropDown);
-
-    this.dropDown = $(dropDown);
-    this.button = this.ensureButton();
-    this.registerHandlers();
-  }
-
-  toggleDisplay(instant) {
-    this.extended = !this.extended;
-
-    if (this.extended) {
-      this.dropDown.stop().slideDown({
-        duration: instant ? 0 : 400,
-        easing: "easeInOutQuad",
-      });
-    } else {
-      this.dropDown.stop().slideUp({
-        duration: instant ? 0 : 400,
-        easing: "easeInOutQuad",
-      });
-    }
-  }
-
-  ensureButton() {
-    var button = this.nav.find(".collapse-button");
-
-    if (button.length === 0) {
-      button = $(TEMPLATES.BUTTON);
-      this.nav.append(button);
-    }
-
-    return button;
-  }
-
-  registerHandlers() {
-    $(window).resize(() => {
-      if (this.extended) {
-        if ($(window).width() >= 1024) {
-          this.dropDown.css("display", "none");
-        } else if (this.dropDown.css("display") === "none") {
-          this.dropDown.css("display", "flex");
-        }
-      }
-    });
-
-    this.button.click(() => this.toggleDisplay());
+    navigation.getElementsByClassName("collapse-button")[0]
+        .addEventListener("click", (e) => dropDown.classList.toggle("extended"));
+    
   }
 }
 
-NavigationBar.allNavigationBars = [];
-
 $(document).ready(function () {
-  for (let i = 0; i < NOHIDE_CLASSES.length; ++i) {
-    $(NOHIDE_CLASSES[i]).each((index, element) =>
-      $(element).addClass("nav-nohide")
-    );
-  }
-
-  $("header nav.collapse").each((index, element) => {
-    NavigationBar.allNavigationBars.push(new NavigationBar(element));
-  });
+  for(let navbar of document.querySelectorAll("header nav.collapse")) 
+    new NavigationBar(navbar);
 });