Add Responsive Menu to Navbar

chore: add responsive menu
chore: replace all `class` attributes with `className`
Update coffee-bear.png

src/EducationTrail/ClientApp/src/components/NavFooter.js

@@ -20,13 +20,13 @@ export class NavFooter extends Component {
         <div>
           <div className="grid grid-flow-col gap-4">
             <a href="https://educationtrail.org/discord">
-                <span class="i-ic-baseline-discord auto text-2xl"></span>
+                <span className="i-ic-baseline-discord auto text-2xl"></span>
             </a>
             <a href="https://www.instagram.com/educationtrail/">
-                <span class="i-mdi-instagram auto text-2xl"></span>
+                <span className="i-mdi-instagram auto text-2xl"></span>
             </a>
             <a href="https://ntohqdevelopers.com/">
-                <span class="i-mdi-twitter auto text-2xl"></span>
+                <span className="i-mdi-twitter auto text-2xl"></span>
             </a>
           </div>
         </div>

src/EducationTrail/ClientApp/src/components/NavMenu.js

@@ -1,59 +1,76 @@
 import React, { Component } from "react";
 import EducationTrailEmblem from "../assets/images/education_trail_emblem.png";
 
+export function hamburgerClicked() {
+  document.getElementById("mobile-menu").classList.toggle("hidden");
+}
+
 export class NavMenu extends Component {
   static displayName = NavMenu.name;
 
   render() {
     return (
-        <nav class="navbar bg-base-100">
-          {/* navbar container right */}
-          <div class="navbar-start">
-            <div class="navbrand">
-              <a
-                className="btn btn-ghost normal-case text-xl"
-                href="/"
-              >
-                <div class="w-10 rounded-full">
-                  <img
-                    src={EducationTrailEmblem}
-                    alt="The education trail's emblem."
-                    className="mask mask-circle shadow-xl"
-                  />
-                </div>
-                <h3 class="hidden sm:block">The Education Trail</h3>
-              </a>
-            </div>
-            {/* navbar navigation */}
-            <div className="hidden w-full md:flex md:items-center md:w-auto">
-              <ul className="menu menu-horizontal px-1">
-                <li>
-                  <a className="text-dark" href="/">
-                    Home
-                  </a>
-                </li>
-                <li>
-                  <a className="text-dark" href="/counter">
-                    Counter
-                  </a>
-                </li>
-              </ul>
-            </div>
+      <nav className="navbar bg-base-100">
+        {/* navbar container right */}
+        <div className="navbar-start">
+          <div className="navbrand">
+            <a className="btn btn-ghost normal-case text-xl" href="/">
+              <div className="w-10 rounded-full">
+                <img
+                  src={EducationTrailEmblem}
+                  alt="The education trail's emblem."
+                  className="mask mask-circle shadow-xl"
+                />
+              </div>
+              <h3 className="hidden sm:block">The Education Trail</h3>
+            </a>
           </div>
-          {/* navbar end */}
-          <div class="navbar-end">
-            {/* search? login? */}
-            <div>
-
-            </div>
-            {/* mobile navburger */}
-            <div class="cursor-pointer md:hidden block">
-              <button class="btn btn-ghost auto">
-                <span class="i-fa-solid-bars auto text-xl"></span>
-              </button>
-            </div>
+          {/* navbar navigation */}
+          <div className="hidden w-full md:flex md:items-center md:w-auto">
+            <ul className="menu menu-horizontal px-1">
+              <li>
+                <a className="text-dark" href="/">
+                  Home
+                </a>
+              </li>
+              <li>
+                <a className="text-dark" href="/counter">
+                  Counter
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+        {/* navbar end */}
+        <div className="navbar-end">
+          {/* search? login? */}
+          <div></div>
+          {/* mobile navburger */}
+          <div className="cursor-pointer md:hidden block">
+            <button className="btn btn-ghost auto" onClick={hamburgerClicked}>
+              <span className="i-fa-solid-bars auto text-xl"></span>
+            </button>
+          </div>
+          {/* mobile menu */}
+          <div
+            class="hidden md:hidden fixed top-0 right-0 bg-base-100 w-full h-full z-50"
+            id="mobile-menu"
+          >
+            <ul class="menu p-4">
+              <li>
+                <a class="text-dark" href="/">
+                  Home
+                </a>
+              </li>
+              <li>
+                <a class="text-dark" href="/counter">
+                  Counter
+                </a>
+              </li>
+            </ul>
           </div>
-        </nav>
+        </div>
+      </nav>
     );
   }
 }

src/EducationTrail/ClientApp/src/layouts/HomeLayout.js

@@ -9,7 +9,7 @@ export class HomeLayout extends Component {
     return (
       <div>
         <NavMenu />
-        <div class="container">
+        <div className="container">
           {this.props.children}
         </div>
         <NavFooter />