GPT-11: Search bar UI + mobile layout fix

src/components/NavBar.tsx

@@ -3,6 +3,7 @@ import { Link } from "react-router-dom";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBars, faX } from "@fortawesome/free-solid-svg-icons";
+import SearchBar from "./SearchBar";
 
 library.add(faBars, faX);
 
@@ -32,7 +33,7 @@ const NavBar: React.FC = () => {
     };
 
   const handleResize = () => {
-    if (window.innerWidth >= 700 && isMenuOpen) {
+    if (window.innerWidth >= 1060 && isMenuOpen) {
       setIsMenuOpen(false); 
     }
   };
@@ -52,16 +53,18 @@ const NavBar: React.FC = () => {
   return (
     <header className="header">
       <nav className="nav-bar">
-        <button className="nav-menu-icon" onClick={toggleMenu}>
-          {isMenuOpen ? (
-            <FontAwesomeIcon icon={faX} />
-          ) : (
-            <FontAwesomeIcon icon={faBars} />
-          )}
-        </button>
-        <Link to="/" className="nav-logo-link" onClick={closeMenu}>
-          <img className="nav-logo" src={""} alt="Price Wolves Logo" />
-        </Link>
+        <div className="">
+          <button className="nav-menu-icon" onClick={toggleMenu}>
+            {isMenuOpen ? (
+              <FontAwesomeIcon icon={faX} />
+            ) : (
+              <FontAwesomeIcon icon={faBars} />
+            )}
+          </button>
+          <Link to="/" className="nav-logo-link" onClick={closeMenu}>
+            <img className="nav-logo" src={""} alt="Price Wolves Logo" />
+          </Link>
+        </div>
 
         {/* Desktop menus (remain as per your CSS) */}
         <ul className="nav-link-container desktop-menu">
@@ -87,6 +90,8 @@ const NavBar: React.FC = () => {
             </li>
         </ul>
 
+        <SearchBar/>
+
         {/* Mobile popup menu overlay */}
         {isMenuOpen && (
           <div className="popup-menu" ref={popupRef}>

src/components/SearchBar.tsx

@@ -0,0 +1,17 @@
+import type React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
+
+const SearchBar: React.FC = () => {
+    return (
+        <div className="search-bar-container">
+            <input
+                type="text"
+                placeholder="Find an item at a good price!"
+            />
+            <FontAwesomeIcon icon={faMagnifyingGlass}/>
+        </div>
+    )
+};
+
+export default SearchBar;

src/index.css

@@ -45,7 +45,7 @@ h1 {
 }
 
 .button {
-  border-radius: 3rem ;
+  border-radius: 3rem;
   border: 1px solid transparent;
   padding: 0.6em 1.2em;
   font-size: 1em;
@@ -159,21 +159,25 @@ h1 {
   display: flex;
   align-items: center;
   gap: 1.5rem;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   position: relative;
+  min-width: 0;
 }
 
 .nav-link-container.desktop-menu {
   display: flex;
+  flex: 0 0 auto;
+  white-space: nowrap;
   gap: 1.5rem;
   list-style: none;
   margin: 0;
   padding: 0;
+  margin-right: auto;
 }
 
 .nav-link {
   color: #FFFAFA; 
-  font-size: 0.85rem;
+  font-size: 1rem;
   text-decoration: none;
   position: relative;
   transition: color 0.3s ease;
@@ -205,15 +209,50 @@ h1 {
 
 .nav-logo-link {
   color: #FFFAFA;
-  font-size: 1.2em;
+  font-size: 1.4em;
   text-decoration: none;
   transition: color 0.3s ease, text-shadow 0.3s ease;
+  flex-shrink: 0;
+  white-space: nowrap;
+  min-width: max-content;
 }
 
 .nav-logo-link:hover {
   color: #B0E0E6; 
 }
 
+.search-bar-container input {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0.4em 3em 0.4em 1em;
+  border-radius: 3rem;
+  border: 1px solid #ccc;
+  background-color: #2c2c2c;
+  color: #f0f0f0;
+  font-size: 1rem;
+}
+
+.search-bar-container {
+  position: relative;
+  flex: 1 1 300px;
+  min-width: 100px;
+  max-width: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+
+.search-bar-container svg {
+  position: absolute;
+  top: 50%;
+  right: 0.8em;
+  transform: translateY(-50%);
+  color: #999;
+  cursor: pointer;
+  font-size: 1em;
+}
+
 .popup-menu {
   display: none;
 }
@@ -299,7 +338,36 @@ h1 {
   }
 }
 
-@media (max-width: 699.98px) { /* mobile layout */
+@media (max-width: 1059.98px) { /* smaller desktop layout */
+
+  .nav-bar {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-template-rows: 1fr;
+    align-items: center;
+    gap: 1rem;
+    width: 100%;
+  }
+
+  .nav-bar > div:first-child {
+    grid-column: 1;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .search-bar-container {
+    grid-column: 2;
+    width: 100%;
+  }
+
+  .nav-bar-top {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 1rem;
+  }
+
   .nav-menu-icon {
     width: 30px;
     height: 30px;
@@ -319,8 +387,7 @@ h1 {
 
   .nav-link-container.desktop-menu {
     display: none;
-  }
-
+  }  
 
   .popup-menu {
     display: flex;
@@ -399,8 +466,58 @@ h1 {
 
 }
 
-@media (max-width: 600px) { /* smaller mobile view for font scaling */
+@media (max-width: 650px) { /* mobile view */
   h1 {
     font-size: 2.2em;
   }
+
+  .nav-bar {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .nav-bar > div:first-child {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    width: 100%;
+  }
+
+  .search-bar-container {
+    flex: 0 0 auto;
+    height: auto;
+    margin: 0;
+  }
+
+  .search-bar-container input {
+    height: 2.5rem;
+    font-size: 1rem;
+  }
+
+  .page-container {
+    margin-top: 7.5em;
+  }
+
+}
+
+@media (max-width: 450px) { /* mobile view */
+  h1 {
+    font-size: 1.6em;
+    text-align: center;
+  }
+
+  .page-text {
+    font-size: 1rem;
+    margin: 1em 1em 2em 1em;
+    text-align: center;
+  }
+
+  .footer-link-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    margin: 0;
+    text-align: center;
+    gap: 0.75em 1.5em;
+  }
 }