From b740330f1b670d47ab33ff81e438f4dcb6dd18fa Mon Sep 17 00:00:00 2001
From: LiebeAnnette <liebeannette@gmail.com>
Date: Thu, 5 Jun 2025 21:08:34 -0500
Subject: [PATCH] adjusted navbar responsiveness

---
 README.md                          |   6 +-
 client/src/components/AuthForm.tsx | 162 ++++++++++++++---------------
 client/src/components/Navbar.tsx   |  57 +++++-----
 client/styles/navbar.css           | 131 ++++++++++-------------
 4 files changed, 165 insertions(+), 191 deletions(-)

diff --git a/README.md b/README.md
index bef9ac4..4fc810f 100644
--- a/README.md
+++ b/README.md
@@ -70,11 +70,7 @@ Register and log in with a username and password. Authenticated users have priva
 
 <!-- ### Expense Report Printer Page
 
-![Expense Report Printer Page](./images/<your-image-here>)
-
-### Google Maps Feature
-
-![Google Maps Feature](./images/<your-image-here>) -->
+![Expense Report Printer Page](./images/<your-image-here>)-->
 
 ---
 
diff --git a/client/src/components/AuthForm.tsx b/client/src/components/AuthForm.tsx
index 0184c12..feeec0f 100644
--- a/client/src/components/AuthForm.tsx
+++ b/client/src/components/AuthForm.tsx
@@ -76,8 +76,10 @@ const AuthForm: React.FC = () => {
           </h2>
 
           {/* Form */}
-          <form onSubmit={handleSubmit}
-            className="flex flex-col space-y-4 w-full max-w-md">
+          <form
+            onSubmit={handleSubmit}
+            className="flex flex-col space-y-4 w-full max-w-md"
+          >
             <input
               className="rounded-lg border border-gray-300 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-[color:var(--teal)] bg-white text-black"
               type="text"
@@ -85,91 +87,83 @@ const AuthForm: React.FC = () => {
               placeholder="Username"
               onChange={(e) => setUsername(e.target.value)}
             />
-            <div className="relative">
-            <input
-              className="rounded-lg border border-gray-300 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-[color:var(--teal)] bg-white text-black"
-              type={showPassword ? "text" : "password"}
-              value={password}
-              placeholder="Password"
-              onChange={(e) => setPassword(e.target.value)}
-            />
-            {/* <input
-              className="rounded-lg border border-gray-300 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-[color:var(--teal)] bg-white text-black"
-              type="password"
-              value={password}
-              placeholder="Password"
-              onChange={(e) => setPassword(e.target.value)}
-            /> */}
-            <button
-              type="button"
-              onClick={() => setShowPassword(!showPassword)} className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-600 hover:text-[color:var(--teal)]"
-              tabIndex={-1}
-              aria-label={showPassword ? "Hide password" : "Show password"}
-            >
-              {showPassword ? (
-
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-5 w-5"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                  />
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
-                  />
-                </svg>
-              ) : (
-
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-5 w-5"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.542-7a9.992 9.992 0 012.518-4.037m1.682-1.683A9.953 9.953 0 0112 5c4.477 0 8.268 2.943 9.542 7a9.956 9.956 0 01-1.533 3.25M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                  />
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M3 3l18 18"
-                  />
-                </svg>
-              )}
-            </button>
-        </div>
-        <Button type="submit" className="w-full">
-          {isLogin ? "Login" : "Register"}
-        </Button>
+            <div className="flex items-center relative w-full">
+              <input
+                className="w-full pr-10 rounded-lg border border-gray-300 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-[color:var(--teal)] bg-white text-black"
+                type={showPassword ? "text" : "password"}
+                value={password}
+                placeholder="Password"
+                onChange={(e) => setPassword(e.target.value)}
+              />
+              <button
+                type="button"
+                onClick={() => setShowPassword(!showPassword)}
+                className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-600 hover:text-[color:var(--teal)]"
+                tabIndex={-1}
+                aria-label={showPassword ? "Hide password" : "Show password"}
+              >
+                {showPassword ? (
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="h-5 w-5"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                    />
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+                    />
+                  </svg>
+                ) : (
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="h-5 w-5"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.542-7a9.992 9.992 0 012.518-4.037m1.682-1.683A9.953 9.953 0 0112 5c4.477 0 8.268 2.943 9.542 7a9.956 9.956 0 01-1.533 3.25M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                    />
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M3 3l18 18"
+                    />
+                  </svg>
+                )}
+              </button>
+            </div>
+            <Button type="submit" className="w-full">
+              {isLogin ? "Login" : "Register"}
+            </Button>
           </form>
 
-      {/* Toggle Login/Register */}
-      <button
-        onClick={() => setIsLogin(!isLogin)}
-        className="mt-4 text-sm text-[color:var(--prussian)] hover:underline"
-      >
-        {isLogin
-          ? "Need an account? Register"
-          : "Already have an account? Login"}
-      </button>
+          {/* Toggle Login/Register */}
+          <button
+            onClick={() => setIsLogin(!isLogin)}
+            className="mt-4 text-sm text-[color:var(--prussian)] hover:underline"
+          >
+            {isLogin
+              ? "Need an account? Register"
+              : "Already have an account? Login"}
+          </button>
+        </div>
+      </Card>
     </div>
-      </Card >
-    </div >
   );
 };
 
diff --git a/client/src/components/Navbar.tsx b/client/src/components/Navbar.tsx
index 3ed893e..c4b3ede 100644
--- a/client/src/components/Navbar.tsx
+++ b/client/src/components/Navbar.tsx
@@ -10,39 +10,40 @@ const Navbar: React.FC = () => {
     setToken(null);
   };
 
-const username = localStorage.getItem("username") || "Anonymous";
+  const username = localStorage.getItem("username") || "Anonymous";
 
   return (
     <nav className="navbar">
-      <div className="navbar-container">
-        <div className="nav-header">
-          <img
-            src="/MileTrackerLogo-favicon.png"
-            alt="MileTracker Logo"
-            className="logo-icon"
-          />
-          <h2 className="nav-title">MileTracker</h2>
-          <h3 className="nav-user">Hello {username}</h3>
-        </div>
+  <div className="navbar-container">
+    <h3 className="nav-user">Hello, {username}</h3>
+    <div className="logo-title">
+      <img
+        src="/MileTrackerLogo-favicon.png"
+        alt="MileTracker Logo"
+        className="logo-icon"
+      />
+      <h2 className="nav-title">MileTracker</h2>
+    </div>
 
-        {token && (
-          <div className="nav-content">
-            <div className="nav-links">
-              <Link to="/dashboard">Dashboard</Link>
-              <Link to="/vehicles">Vehicles</Link>
-              <Link to="/add-trip">Add Trip</Link>
-              <Link to="/trips">Your Trips</Link>
-              <Link to="/alerts">Service Alerts</Link>
-              <Link to="/pdf">PDF Generator</Link>
-              <Link to="/expenses">Expense Manager</Link>
-            </div>
-            <div className="logout-container">
-              <button onClick={handleLogout}>Logout</button>
-            </div>
-          </div>
-        )}
+    {token && (
+      <div className="nav-content">
+        <div className="nav-links">
+          <Link to="/dashboard">Dashboard</Link>
+          <Link to="/vehicles">Vehicles</Link>
+          <Link to="/add-trip">Add Trip</Link>
+          <Link to="/trips">Your Trips</Link>
+          <Link to="/alerts">Service Alerts</Link>
+          <Link to="/pdf">PDF Generator</Link>
+          <Link to="/expenses">Expense Manager</Link>
+        </div>
+        <div className="logout-container">
+          <button onClick={handleLogout}>Logout</button>
+        </div>
       </div>
-    </nav>
+    )}
+  </div>
+</nav>
+
   );
 
   // return (
diff --git a/client/styles/navbar.css b/client/styles/navbar.css
index fa3f28a..5f35329 100644
--- a/client/styles/navbar.css
+++ b/client/styles/navbar.css
@@ -1,30 +1,61 @@
+/* Base navbar styling */
 nav {
-  background-color: var(--prussian);
   background-color: var(--prussian);
   color: white;
   font-family: var(--font-heading);
   padding: 1rem 2rem;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  position: relative;
 }
 
-nav h2 {
-  font-size: 2rem;
+/* Main container: centered and narrow */
+.navbar-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 600px;
+  margin: 0 auto;
+  gap: 1rem;
+  text-align: center;
+}
+
+/* Username greeting */
+.nav-user {
+  font-size: 1rem;
   font-weight: 800;
   text-transform: uppercase;
-  margin-bottom: 1rem;
+  color: white;
+  margin: 0;
 }
 
-nav button:hover {
-  background-color: var(--yellow);
+/* Logo + title stacked */
+.logo-title {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.logo-icon {
+  width: 60px;
+  height: auto;
 }
-.nav-header {
+
+.nav-title {
+  font-size: 2rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  margin: 0;
+}
+
+/* Navigation area */
+.nav-content {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  justify-content: space-evenly;
   gap: 1rem;
-  width: 100%;
 }
+
+/* Links container */
 .nav-links {
   display: flex;
   justify-content: center;
@@ -32,6 +63,7 @@ nav button:hover {
   gap: 1rem;
 }
 
+/* Individual link styles */
 .nav-links a {
   color: white;
   text-decoration: none;
@@ -47,24 +79,10 @@ nav button:hover {
   color: var(--prussian);
 }
 
-.nav-title,
-.nav-user {
-  margin-bottom: 0; /* remove bottom margin so they stay in line */
-  width: auto; /* remove the fixed width that may cause wrapping */
-}
-
-.nav-title {
-  font-size: 2rem;
-  font-weight: 800;
-  text-transform: uppercase;
-  text-align: center;
-}
-
-.nav-user {
-    font-size: 1rem;
-  font-weight: 800;
-  text-transform: uppercase;
-  text-align: center;
+/* Logout button container */
+.logout-container {
+  display: flex;
+  justify-content: center;
 }
 
 nav button {
@@ -83,58 +101,23 @@ nav button:hover {
   background-color: var(--yellow);
 }
 
-.logout-container {
-  display: flex;
-  justify-content: center;
-  margin-top: 1rem;
-}
-
-@media (min-width: 768px) {
-  .logout-container {
-    justify-content: flex-end;
-    margin-top: 0;
-  }
-}
-
-.logo-title {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 1rem;
-}
-
-.logo-icon {
-  width: 60px; /* make it smaller for mobile */
-  height: auto;
-  position: static; /* remove absolute */
-  transform: none;
-}
-
-.navbar-container {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
+/* Responsive tweaks for wider screens */
 @media (min-width: 768px) {
   .navbar-container {
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
+    flex-direction: column; /* still stack sections */
+    max-width: 100%;
+    padding: 0 2rem;
   }
-}
-.nav-content {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
 
-@media (min-width: 768px) {
   .nav-content {
     flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
     flex-wrap: wrap;
+    justify-content: center;
+    gap: 2rem;
+  }
+
+  .logout-container {
+    justify-content: center;
+    margin: 0;
   }
 }