Host Van page added

Adi-204 · Dec 15, 2023 · 1945980 · 1945980
1 parent f25cb63
commit 1945980
Show file tree

Hide file tree

Showing 7 changed files with 301 additions and 105 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -6,10 +6,12 @@ import { About } from './pages/About';
 import { Vans } from './pages/vans/Vans';
 import { VanDetail } from './pages/vans/VanDetail';
 import { Layout } from './components/Layout';
+import { HostLayout } from './components/HostLayout';
 import { Dashboard } from './pages/host/Dashboard';
 import { Income } from './pages/host/Income';
 import { Review } from './pages/host/Review';
-import { HostLayout } from './components/HostLayout';
+import { HostVans } from './pages/host/HostVans';
+import { HostVanDetail } from './pages/host/HostVanDetail';
 
 export const App =()=>{
   return(
@@ -25,6 +27,8 @@ export const App =()=>{
             <Route index element = {<Dashboard />} />
             <Route path='income' element = {<Income />} />
             <Route path='reviews' element = {<Review />} />
+            <Route path='vans' element={<HostVans />} />
+            <Route path='vans/:id' element={<HostVanDetail />} />
           </Route>
 
         </Route>

diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Link } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
 
 export const Header = () => {
   const [isMobileMenuOpen, setMobileMenuOpen] = useState(false);
@@ -12,31 +12,52 @@ export const Header = () => {
     setMobileMenuOpen(false);
   };
 
+  const styles = {
+      fontWeight: "bold",
+      textDecoration: "underline",
+      color: "#161616"
+  }
+
   return (
     <header>
-      <Link to="/" className={`${isMobileMenuOpen ? 'mobile-logo' : 'logo'}`} 
+      <NavLink to="/" className={`${isMobileMenuOpen ? 'mobile-logo' : 'logo'}`} 
       onClick={toggleClose}>
         #VANLIFE
-      </Link>
+      </NavLink>
       <button className="menu-toggle" onClick={toggleMobileMenu}>
         &#9776; Menu 
       </button>
       <nav>
         <ul className={isMobileMenuOpen ? 'mobile-nav nav-open mobile-nav-open' : ''}>
           <li>
-            <Link to="/host" className="nav-item" onClick={toggleClose}>
+            <NavLink 
+            to="/host" 
+            className="nav-item" 
+            onClick={toggleClose}
+            style={({isActive})=> isActive ? styles : null}
+            >
               Host
-            </Link>
+            </NavLink>
           </li>
           <li>
-            <Link to="/about" className="nav-item" onClick={toggleClose}>
+            <NavLink 
+            to="/about" 
+            className="nav-item" 
+            onClick={toggleClose}
+            style={({isActive})=> isActive ? styles : null}
+            >
               About
-            </Link>
+            </NavLink>
           </li>
           <li>
-            <Link to="/vans" className="nav-item" onClick={toggleClose}>
+            <NavLink 
+            to="/vans" 
+            className="nav-item" 
+            onClick={toggleClose}
+            style={({isActive})=> isActive ? styles : null}
+            >
               Vans
-            </Link>
+            </NavLink>
           </li>
         </ul>
       </nav>

diff --git a/src/components/HostLayout.jsx b/src/components/HostLayout.jsx
@@ -1,14 +1,41 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import { Link, Outlet } from "react-router-dom";
+import { NavLink, Outlet } from "react-router-dom";
 
 export const HostLayout = ()=>{
+    const styles = {
+        fontWeight: "bold",
+        textDecoration: "underline",
+        color: "#161616"
+    }
     return (
         <>
             <nav className="host-nav">
-                <Link to="/host">Dashboard</Link>
-                <Link to="/host/income">Income</Link>
-                <Link to="/host/reviews">Reviews</Link>
+                <NavLink 
+                    to="/host"
+                    end
+                    style={({isActive}) => isActive ? styles : null}
+                >
+                    Dashboard
+                </NavLink>
+                <NavLink 
+                    to="/host/income"
+                    style={({isActive}) => isActive ? styles : null}
+                >
+                    Income
+                </NavLink>
+                <NavLink 
+                    to="/host/vans"
+                    style={({isActive}) => isActive ? styles : null}
+                >
+                    Vans
+                </NavLink>
+                <NavLink 
+                    to="/host/reviews"
+                    style={({isActive}) => isActive ? styles : null}
+                >
+                    Reviews
+                </NavLink>
             </nav>
             <Outlet />
         </>