Added CSS menu bar with dropdowns

davewalker5 · Oct 31, 2023 · 82d6a56 · 82d6a56
1 parent 3cd4dd6
commit 82d6a56
Show file tree

Hide file tree

Showing 4 changed files with 191 additions and 56 deletions.
diff --git a/src/music-catalogue-ui/components/menuBar.js b/src/music-catalogue-ui/components/menuBar.js
@@ -1,43 +1,39 @@
 import styles from "./menuBar.module.css";
 import pages from "../helpers/navigation";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
 
 const MenuBar = ({ navigate, logout }) => {
   return (
-    <div className={styles.titleBarContainer}>
-      <div className={styles.titleElement}>
-        <img
-          src="./logo.png"
-          alt="Music Catalogue"
-          className={styles.logo}
-          onClick={() => navigate(pages.artists, null, null)}
-        />
+    <>
+      <div className={styles.navbar}>
+        <div className={styles.titleElement}>
+          <img
+            src="./logo.png"
+            alt="Music Catalogue"
+            className={styles.logo}
+            onClick={() => navigate(pages.artists, null, null)}
+          />
+        </div>
+        <div className={styles.title}>Music Catalogue</div>
+        <a onClick={() => logout()}>Log Out</a>
+        <div className={styles.dropdown}>
+          <button className={styles.dropbtn}>
+            Reports
+            <div className={styles.dropdownArrowContainer}>
+              <FontAwesomeIcon icon={faCaretDown} />
+            </div>
+          </button>
+          <div className={styles.dropdownContent}>
+            <a href="#">Job Status</a>
+          </div>
+        </div>
+        <a onClick={() => navigate(pages.export, null, null)}>Export</a>
+        <a href="#">Import</a>
+        <a onClick={() => navigate(pages.lookup, null, null)}>Search</a>
+        <a onClick={() => navigate(pages.artists, null, null)}>Artists</a>
       </div>
-      <div className={styles.title}>Music Catalogue</div>
-      <div className={styles.menuContainer}>
-        <span className={styles.menuItem} onClick={() => logout()}>
-          Log Out
-        </span>
-        <span
-          className={styles.menuItem}
-          onClick={() => navigate(pages.export, null, null)}
-        >
-          Export
-        </span>
-        <span className={styles.menuItem}>Import</span>
-        <span
-          className={styles.menuItem}
-          onClick={() => navigate(pages.lookup, null, null)}
-        >
-          Search
-        </span>
-        <span
-          className={styles.menuItem}
-          onClick={() => navigate(pages.artists, null, null)}
-        >
-          Artists
-        </span>
-      </div>
-    </div>
+    </>
   );
 };
 

diff --git a/src/music-catalogue-ui/components/menuBar.module.css b/src/music-catalogue-ui/components/menuBar.module.css
@@ -1,21 +1,11 @@
-.titleBarContainer {
-  padding-top: 20px;
-  padding-bottom: 60px;
-  box-shadow: 0 5px 4px -4px lightgrey;
-}
-
+/* Site title */
 .titleElement,
 .title {
   float: left;
   padding: 10px;
   vertical-align: center;
 }
 
-.logo {
-  height: 35px;
-  cursor: pointer;
-}
-
 .title {
   float: left;
   font-style: italic;
@@ -24,14 +14,87 @@
   color: black;
 }
 
-.menuContainer {
+/* Site logo */
+.logo {
+  height: 35px;
+  cursor: pointer;
+}
+
+/* Navbar container */
+.navbar {
+  overflow: hidden;
+  font-family: Arial;
+  padding-top: 10px;
+  box-shadow: 0 5px 4px -4px lightgrey;
+}
+
+/* Links inside the navbar */
+.navbar a {
   float: right;
-  vertical-align: center;
+  font-size: 16px;
+  color: black;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
 }
 
-.menuItem {
+/* The dropdown container */
+.dropdown {
   float: right;
-  padding: 10px;
+  overflow: hidden;
+}
+
+/* Dropdown button */
+.dropdown .dropbtn {
+  float: left;
+  font-size: 16px;
+  border: none;
+  outline: none;
   color: black;
-  cursor: pointer;
+  padding: 14px 16px;
+  background-color: inherit;
+  font-family: inherit; /* Important for vertical align on mobile phones */
+  margin: 0;
+}
+
+/* Add a grey background color to navbar links on hover */
+.navbar a:hover,
+.dropdown:hover .dropbtn {
+  background-color: lightgray;
+}
+
+/* Dropdown content (hidden by default) */
+.dropdownContent {
+  display: none;
+  position: absolute;
+  margin-top: 50px;
+  background-color: #f9f9f9;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  z-index: 1;
+}
+
+.dropdownArrowContainer {
+  display: inline;
+  padding-left: 5px;
+}
+
+/* Links inside the dropdown */
+.dropdownContent a {
+  float: none;
+  color: black;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+  text-align: left;
+}
+
+/* Add a grey background color to dropdown links on hover */
+.dropdownContent a:hover {
+  background-color: #lightgray;
+}
+
+/* Show the dropdown menu on hover */
+.dropdown:hover .dropdownContent {
+  display: block;
 }
diff --git a/src/music-catalogue-ui/package-lock.json b/src/music-catalogue-ui/package-lock.json
diff --git a/src/music-catalogue-ui/package.json b/src/music-catalogue-ui/package.json
@@ -9,9 +9,14 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-brands-svg-icons": "^6.4.2",
+    "@fortawesome/free-regular-svg-icons": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "next": "13.5.4",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "13.5.4"
+    "react-dom": "^18"
   },
   "devDependencies": {
     "eslint": "^8",