cleanup, hide menu on nav item click

sfc23007 · Nov 18, 2024 · 9e8651e · 9e8651e
1 parent 911daea
commit 9e8651e
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 20 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -12,10 +12,10 @@ function App() {
     <>
       <Navbar />
       <Routes>
-         <Route path='/' element={<Home/>} />
-         <Route path='/about' element={<About/>} />
-         <Route path='/contact' element={<Contact/>} />
-       </Routes>
+        <Route path='/' element={<Home/>} />
+        <Route path='/about' element={<About/>} />
+        <Route path='/contact' element={<Contact/>} />
+      </Routes>
        <Footer />
     </>
   )

diff --git a/src/App.scss b/src/App.scss
@@ -9,7 +9,7 @@ body {
   max-width: 1280px;
   margin: 0 auto;
   padding: 2rem;
-  text-align: center;
+  width: 1200%;
 }
 
 .logo {

diff --git a/src/Home.jsx b/src/Home.jsx
@@ -6,12 +6,12 @@ function App() {
 
   return (
     <>
-      <div>
-        <img src={uconnOakLogo} className="logo" alt="UConn Oak Logo" />
+      <div className="my-5 d-block text-center">
+        <img src={uconnOakLogo} className="logo m-auto" alt="UConn Oak Logo" />
       </div>
-      <h1>Hello!</h1>
+      <h1 className="w-100 text-center">Hello!</h1>
       <div className="card">
-        <div className="card-body">
+        <div className="card-body text-center">
           <button className="btn btn-lg btn-primary" onClick={() => setCount((count) => count + 1)}>
             count is {count}
           </button>

diff --git a/src/Navbar.jsx b/src/Navbar.jsx
@@ -1,33 +1,35 @@
 import { Link } from "react-router-dom";
-
+import { useState } from 'react';
 const Navbar = () => {
+  const [isNavCollapsed, setIsNavCollapsed] = useState(true);
+  const handleNavCollapse = () => setIsNavCollapsed(!isNavCollapsed);
   return (
-    <nav className="navbar navbar-expand-lg bg-body-tertiary">
+    <nav className="navbar navbar-expand-lg bg-body-tertiary d-flex w-100">
         <div className="container-fluid">
           <a className="navbar-brand" href="#">Navbar</a>
-          <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+          <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded={!isNavCollapsed ? true : false} aria-label="Toggle navigation" onClick={handleNavCollapse}>
             <span className="navbar-toggler-icon"></span>
           </button>
-          <div className="collapse navbar-collapse" id="navbarSupportedContent">
+          <div className={`${isNavCollapsed ? 'collapse' : ''} navbar-collapse`} id="navbarSupportedContent">
             <ul className="navbar-nav me-auto mb-2 mb-lg-0">
               <li className="nav-item">
-                <Link className="nav-link" to="/">Home</Link>
+                <Link className="nav-link" to="/" onClick={handleNavCollapse}>Home</Link>
               </li>
               <li className="nav-item">
-                <Link className="nav-link" to="/about">About</Link>
+                <Link className="nav-link" to="/about" onClick={handleNavCollapse}>About</Link>
               </li>
               <li className="nav-item">
-                <Link className="nav-link" to="/contact">Contact</Link>
+                <Link className="nav-link" to="/contact" onClick={handleNavCollapse}>Contact</Link>
               </li>
               <li className="nav-item dropdown">
                 <a className="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                   Dropdown
                 </a>
                 <ul className="dropdown-menu">
-                  <li><a className="dropdown-item" href="#">Action</a></li>
-                  <li><a className="dropdown-item" href="#">Another action</a></li>
+                  <li><a className="dropdown-item" href="#" onClick={handleNavCollapse}>Action</a></li>
+                  <li><a className="dropdown-item" href="#" onClick={handleNavCollapse}>Another action</a></li>
                   <li><hr className="dropdown-divider"></hr></li>
-                  <li><a className="dropdown-item" href="#">Something else here</a></li>
+                  <li><a className="dropdown-item" href="#" onClick={handleNavCollapse}>Something else here</a></li>
                 </ul>
               </li>
               <li className="nav-item">
@@ -36,7 +38,7 @@ const Navbar = () => {
             </ul>
             <form className="d-flex" role="search">
               <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search"></input>
-              <button className="btn btn-outline-success" type="submit">Search</button>
+              <button className="btn btn-outline-success" type="submit" onClick={handleNavCollapse}>Search</button>
             </form>
           </div>
       </div>