Include bulma, make navbar, first edition user.php

src/includes/nav.php

@@ -0,0 +1,82 @@
+<nav class="navbar mb-2" role="navigation" aria-label="main navigation">
+  <div class="navbar-brand">
+    <a class="navbar-item" href="https://bulma.io">
+      <img src="/assets/logo_black_thicc.png" class="m-0 image is-32x32">
+    </a>
+
+    <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
+      <span aria-hidden="true"></span>
+      <span aria-hidden="true"></span>
+      <span aria-hidden="true"></span>
+    </a>
+  </div>
+
+  <div id="navbarBasicExample" class="navbar-menu">
+    <div class="navbar-start">
+      <a href="/" class="navbar-item">
+        Home
+      </a>
+
+      <a href="/me.php" class="navbar-item">
+        Your Profile
+      </a>
+
+      <div class="navbar-item has-dropdown is-hoverable">
+        <a class="navbar-link">
+          Admin
+        </a>
+
+        <div class="navbar-dropdown">
+          <a href="/user.php" class="navbar-item">
+            User Details
+          </a>
+          <a href="/paymentphp" class="navbar-item">
+            Payments
+          </a>
+          <a href="/quota.php" class="navbar-item">
+            Quota Management
+          </a>
+          <hr class="navbar-divider">
+          <a href="/adminer-4.8.1.php" class="navbar-item">
+            Adminer SQL
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <div class="navbar-end">
+      <div class="navbar-item">
+        <div class="buttons">
+          <a href="/login.php" class="button is-link">
+            <?php
+              // TODO: Change this to a logout button if the user is logged in
+            ?>
+            Log in
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</nav>
+<script>
+// https://bulma.io/documentation/components/navbar/
+document.addEventListener('DOMContentLoaded', () => {
+  // Get all "navbar-burger" elements
+  const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
+
+  // Add a click event on each of them
+  $navbarBurgers.forEach( el => {
+    el.addEventListener('click', () => {
+
+      // Get the target from the "data-target" attribute
+      const target = el.dataset.target;
+      const $target = document.getElementById(target);
+
+      // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
+      el.classList.toggle('is-active');
+      $target.classList.toggle('is-active');
+
+    });
+  });
+});
+</script>