Add skeleton navbar

package-lock.json

@@ -7,12 +7,25 @@
     "": {
       "name": "website",
       "version": "0.0.0",
+      "dependencies": {
+        "@fortawesome/fontawesome-free": "^6.1.1",
+        "bulma": "^0.9.4"
+      },
       "devDependencies": {
         "esbuild": "^0.14.43",
         "npm-run-all": "^4.1.5",
         "sass": "^1.52.3"
       }
     },
+    "node_modules/@fortawesome/fontawesome-free": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.1.1.tgz",
+      "integrity": "sha512-J/3yg2AIXc9wznaVqpHVX3Wa5jwKovVF0AMYSnbmcXTiL3PpRPfF58pzWucCwEiCJBp+hCNRLWClTomD8SseKg==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/ansi-styles": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
@@ -75,6 +88,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/bulma": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz",
+      "integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ=="
+    },
     "node_modules/call-bind": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
@@ -1545,6 +1563,11 @@
     }
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.1.1.tgz",
+      "integrity": "sha512-J/3yg2AIXc9wznaVqpHVX3Wa5jwKovVF0AMYSnbmcXTiL3PpRPfF58pzWucCwEiCJBp+hCNRLWClTomD8SseKg=="
+    },
     "ansi-styles": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
@@ -1595,6 +1618,11 @@
         "fill-range": "^7.0.1"
       }
     },
+    "bulma": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz",
+      "integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ=="
+    },
     "call-bind": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",

package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build:js": "esbuild static/src/js/*.js --bundle --outdir=static/build/js --minify --sourcemap",
-    "build:css": "sass --style=compressed static/src/scss:static/build/css",
+    "build:css": "sass --style=compressed --load-path=$PWD/node_modules static/src/scss:static/build/css",
+    "build:contrib": "./scripts/copy-npm-contrib.sh",
     "build": "npm-run-all build:*"
   },
   "author": "Jake Howard",
@@ -14,5 +15,9 @@
     "esbuild": "^0.14.43",
     "npm-run-all": "^4.1.5",
     "sass": "^1.52.3"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.1.1",
+    "bulma": "^0.9.4"
   }
 }

scripts/copy-npm-contrib.sh

@@ -0,0 +1,18 @@
+#!/usr/bin/env bash
+
+set -e
+
+# Make sure we're in the root of the project
+cd $(dirname $0)/..
+
+CONTRIB_DIR=$PWD/static/build/contrib
+
+rm -r $CONTRIB_DIR
+mkdir -p $CONTRIB_DIR
+
+mkcontrib() {
+  mkdir -p $CONTRIB_DIR/$1
+  cp -r "${@:2}" $CONTRIB_DIR/$1/
+}
+
+mkcontrib fontawesome node_modules/@fortawesome/fontawesome-free/{css,webfonts}

static/src/js/base.js

@@ -0,0 +1,10 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const navbarBurger = document.getElementById("navbar-burger");
+  const navbar = document.getElementById("navbar");
+
+  navbarBurger.addEventListener("click", () => {
+    console.log("click");
+    navbarBurger.classList.toggle('is-active');
+    navbar.classList.toggle('is-active');
+  })
+});

static/src/scss/_navbar.scss

@@ -0,0 +1,5 @@
+.navbar-item {
+  &:hover {
+    background-color: black !important;
+  }
+}

static/src/scss/base.scss

@@ -0,0 +1,20 @@
+@import "variables";
+
+@import "bulma/sass/utilities/_all";
+@import "bulma/sass/base/_all";
+@import "bulma/sass/helpers/_all";
+@import "bulma/sass/grid/_all";
+@import "bulma/sass/components/navbar";
+
+@import "navbar";
+
+body {
+  display: flex;
+  flex-direction: column;
+}
+
+html,
+body {
+  height: 100%;
+  overflow-y: auto;
+}

static/src/scss/font-awesome.scss

@@ -0,0 +1 @@
+@import "@fortawesome/fontawesome-free/css/all.min";

templates/base.html

@@ -14,7 +14,8 @@
         <meta name="description" content="" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-        <link rel="stylesheet" type="text/css" href="{% static 'css/index.css' %}">
+        <link rel="stylesheet" type="text/css" href="{% static 'css/base.css' %}">
+        <link rel="stylesheet" type="text/css" href="{% static 'contrib/fontawesome/css/all.min.css' %}">
 
         {% block extra_css %}{% endblock %}
     </head>
@@ -22,9 +23,11 @@
     <body class="{% block body_class %}{% endblock %}">
         {% wagtailuserbar %}
 
+        {% include "navbar.html" %}
+
         {% block content %}{% endblock %}
 
-        <script type="text/javascript" src="{% static 'js/index.js' %}"></script>
+        <script type="text/javascript" src="{% static 'js/base.js' %}"></script>
 
         {% block extra_js %}{% endblock %}
     </body>

templates/navbar.html

@@ -0,0 +1,35 @@
+<nav class="navbar has-background-black has-text-white is-family-code" role="navigation" aria-label="main navigation">
+  <div class="navbar-brand">
+    <a class="navbar-item" href="/">
+      <img src="">
+    </a>
+
+    <a role="button" class="navbar-burger" id="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbar">
+      <span aria-hidden="true"></span>
+      <span aria-hidden="true"></span>
+      <span aria-hidden="true"></span>
+    </a>
+  </div>
+
+  <div id="navbar" class="navbar-menu has-background-black">
+    <div class="navbar-start">
+      <a class="navbar-item has-text-white">
+        Posts
+      </a>
+    </div>
+
+    <div class="navbar-end is-hidden-touch mr-2">
+      <a class="navbar-item has-text-white">
+        <span class="icon">
+          <i class="fab fa-github" aria-hidden="true"></i>
+        </span>
+      </a>
+      <a class="navbar-item has-text-white" id="search-button">
+        <span class="icon">
+          <i class="fas fa-search" aria-hidden="true"></i>
+        </span>
+      </a>
+    </div>
+  </div>
+  </div>
+</nav>