From d8f57ee71728b0a8f541a8a9adf66d769306bfb0 Mon Sep 17 00:00:00 2001
From: pedrocx486 <pedrocx486@gmail.com>
Date: Tue, 30 Jan 2024 19:20:23 -0300
Subject: [PATCH] Navbar improvements (#50)

* Improve navbar layout to better fit mobile screens

* Lint
---
 src/components/Footer/Footer.tsx |  2 +-
 src/components/NavBar/NavBar.css | 84 ++++++++++++++++++++++++++++++++
 src/components/NavBar/NavBar.tsx | 55 +++++++++++----------
 3 files changed, 114 insertions(+), 27 deletions(-)
 create mode 100644 src/components/NavBar/NavBar.css

diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index cd54d07..9ceb6f2 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 export const Footer = () => {
   return (
-    <footer className="footer items-center bg-neutral p-4 text-neutral-content mt-10">
+    <footer className="footer mt-10 items-center bg-neutral p-4 text-neutral-content">
       <aside className="grid-flow-row items-center">
         <p>Mayhem Hub - {new Date().getFullYear()}</p>
         <small>Version: {process.env.BUILD_ID}</small>
diff --git a/src/components/NavBar/NavBar.css b/src/components/NavBar/NavBar.css
new file mode 100644
index 0000000..6fbdc2d
--- /dev/null
+++ b/src/components/NavBar/NavBar.css
@@ -0,0 +1,84 @@
+.nav {
+  height: 63px;
+  width: 100%;
+  position: relative;
+  z-index: 2;
+}
+
+.nav > .nav-header {
+  display: inline;
+}
+
+.nav > .nav-header > .nav-title {
+  display: inline-block;
+}
+
+.nav > .nav-btn {
+  display: none;
+}
+
+.nav > .nav-links {
+  display: inline;
+  float: right;
+  font-size: 18px;
+}
+
+.nav > .nav-links > a {
+  display: inline-block;
+  text-decoration: none;
+}
+
+.nav > .nav-links > a:hover {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+.nav > #nav-check {
+  display: none;
+}
+
+@media (max-width: 600px) {
+  .nav > .nav-btn {
+    display: inline-block;
+    position: absolute;
+    right: 0px;
+    top: 0px;
+  }
+  .nav > .nav-btn > label {
+    display: inline-block;
+    width: 65px;
+    height: 63px;
+    padding: 21px;
+    margin-right: 1rem;
+  }
+  .nav > .nav-btn > label:hover,
+  .nav #nav-check:checked ~ .nav-btn > label {
+    background-color: rgba(0, 0, 0, 0.3);
+  }
+  .nav > .nav-btn > label > span {
+    display: block;
+    width: 25px;
+    height: 10px;
+    border-top: 2px solid #eee;
+  }
+  .nav > .nav-links {
+    position: absolute;
+    display: block;
+    width: 100%;
+    height: 0px;
+    transition: all 0.3s ease-in;
+    overflow-y: hidden;
+    top: 63px;
+    left: 0px;
+  }
+  .nav > .nav-links > a {
+    display: block;
+    width: 100%;
+  }
+  .nav > #nav-check:not(:checked) ~ .nav-links {
+    height: 0px;
+  }
+  .nav > #nav-check:checked ~ .nav-links {
+    height: calc(50vh - 63px);
+    overflow-y: auto;
+  }
+}
diff --git a/src/components/NavBar/NavBar.tsx b/src/components/NavBar/NavBar.tsx
index b036431..9a50353 100644
--- a/src/components/NavBar/NavBar.tsx
+++ b/src/components/NavBar/NavBar.tsx
@@ -1,32 +1,35 @@
+import "./NavBar.css";
+
 export const NavBar = () => {
   return (
-    <div className="navbar bg-gray-700">
-      <div className="flex-1">
-        <a className="btn btn-ghost text-xl">Mayhem Hub</a>
+    <div className="nav bg-neutral">
+      <input type="checkbox" id="nav-check" />
+      <div className="nav-header">
+        <div className="nav-title p-3 text-3xl text-neutral-content">
+          Mayhem Hub
+        </div>
       </div>
-      <div className="hidden flex-none sm:block">
-        <ul className="menu menu-horizontal px-1">
-          <li>
-            <a href="https://discord.hackrf.app" target="_blank">
-              Discord
-            </a>
-          </li>
-          <li>
-            <a href="https://repo.hackrf.app" target="_blank">
-              Repo
-            </a>
-          </li>
-          <li>
-            <a href="https://wiki.hackrf.app" target="_blank">
-              Wiki
-            </a>
-          </li>
-          <li>
-            <a href="https://release.hackrf.app" target="_blank">
-              Firmware Releases
-            </a>
-          </li>
-        </ul>
+      <div className="nav-btn">
+        <label htmlFor="nav-check">
+          <span></span>
+          <span></span>
+          <span></span>
+        </label>
+      </div>
+
+      <div className="nav-links bg-neutral text-neutral-content">
+        <a href="https://discord.hackrf.app" target="_blank" className="p-4">
+          Discord
+        </a>
+        <a href="https://repo.hackrf.app" target="_blank" className="p-4">
+          Repo
+        </a>
+        <a href="https://wiki.hackrf.app" target="_blank" className="p-4">
+          Wiki
+        </a>
+        <a href="https://release.hackrf.app" target="_blank" className="p-4">
+          Firmware Releases
+        </a>
       </div>
     </div>
   );