-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(navbar): implement landing page navbar
-implement landing page navbar reusable component for both desktop and mobile screens [Delivers #21]
- Loading branch information
Showing
7 changed files
with
160 additions
and
127 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,24 +1,27 @@ | ||
| import Home from "./pages/home"; | ||
| import Shop from "./pages/shop"; | ||
| import About from "./pages/about"; | ||
| import Contact from "./pages/contact" | ||
| import { createBrowserRouter, createRoutesFromElements, Route, RouterProvider } from "react-router-dom"; | ||
| import Home from './pages/home'; | ||
| import Shop from './pages/shop'; | ||
| import About from './pages/about'; | ||
| import Contact from './pages/contact'; | ||
| import { | ||
| createBrowserRouter, | ||
| createRoutesFromElements, | ||
| Route, | ||
| RouterProvider, | ||
| } from 'react-router-dom'; | ||
|
|
||
| function App() { | ||
| const router = createBrowserRouter( | ||
| createRoutesFromElements( | ||
| <Route path='/'> | ||
| <Route index element={<Home/>}/> | ||
| <Route path="/shop" element={<Shop/>}/> | ||
| <Route path="/about" element={<About/>}/> | ||
| <Route path="/contact" element={<Contact/>}/> | ||
| <Route path="/"> | ||
| <Route index element={<Home />} /> | ||
| <Route path="/shop" element={<Shop />} /> | ||
| <Route path="/about" element={<About />} /> | ||
| <Route path="/contact" element={<Contact />} /> | ||
| </Route> | ||
| ) | ||
| ) | ||
|
|
||
| return ( | ||
| <RouterProvider router={router}/> | ||
| ); | ||
|
|
||
| return <RouterProvider router={router} />; | ||
| } | ||
|
|
||
| export default App; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,80 +1,119 @@ | ||
| import { Link } from "react-router-dom"; | ||
| import { useLocation } from "react-router-dom"; | ||
| import { useState } from "react"; | ||
| import { Link } from 'react-router-dom'; | ||
| import { useLocation } from 'react-router-dom'; | ||
| import { useState } from 'react'; | ||
|
|
||
| const Navbar = () => { | ||
| const location = useLocation() | ||
| const [toggleMenu, setToggleMenu] = useState(false) | ||
| const [toggleProfileMenu, setToggleProfileMenu] = useState(false) | ||
| return ( | ||
| <div className="relative flex items-center justify-between w-full h-16 px-8 shadow-sm"> | ||
| <img src="/hamburger.png" width="20" height="20" className="md:hidden" onClick={() => setToggleMenu(!toggleMenu)}/> | ||
| <div className="flex items-center gap-2"> | ||
| <img src="/logo.png"/> | ||
| <h2 className="text-custom-black font-bold">Dynamites</h2> | ||
| const location = useLocation(); | ||
| const [toggleMenu, setToggleMenu] = useState(false); | ||
| const [toggleProfileMenu, setToggleProfileMenu] = useState(false); | ||
| return ( | ||
| <div className="relative flex items-center justify-between w-full h-16 px-8 shadow-sm"> | ||
| <img | ||
| src="/hamburger.png" | ||
| width="20" | ||
| height="20" | ||
| className="md:hidden" | ||
| onClick={() => setToggleMenu(!toggleMenu)} | ||
| /> | ||
| <div className="flex items-center gap-2"> | ||
| <img src="/logo.png" /> | ||
| <h2 className="text-custom-black font-bold">Dynamites</h2> | ||
| </div> | ||
| <nav className="xs:hidden md:flex items-center h-full"> | ||
| <Link | ||
| to="/" | ||
| className={`${location.pathname === '/' ? 'border-b-[2px] border-custom-purple text-custom-purple' : 'text-custom-grey'} h-full flex items-center justify-center pl-4 pr-8`} | ||
| > | ||
| Home | ||
| </Link> | ||
| <Link | ||
| to="/shop" | ||
| className={`${location.pathname === '/shop' ? 'border-b-[2px] border-custom-purple text-custom-purple' : 'text-custom-grey'} h-full flex items-center justify-center pl-4 pr-8`} | ||
| > | ||
| Shop | ||
| </Link> | ||
| <Link | ||
| to="/about" | ||
| className={`${location.pathname === '/about' ? 'border-b-[2px] border-custom-purple text-custom-purple' : 'text-custom-grey'} h-full flex items-center justify-center pl-4 pr-8`} | ||
| > | ||
| About Us | ||
| </Link> | ||
| <div | ||
| className={`${location.pathname === '/contact' ? 'border-b-[2px] border-custom-purple text-custom-purple' : 'text-custom-grey'} flex items-center gap-2 h-full pl-4 pr-8`} | ||
| > | ||
| <Link | ||
| to="/contact" | ||
| className={`h-full flex items-center justify-center`} | ||
| > | ||
| Contact | ||
| </Link> | ||
| <img src="/down.png" width="15" height="15" /> | ||
| </div> | ||
| </nav> | ||
| <div className="flex items-center gap-8"> | ||
| <div className="flex items-center gap-4"> | ||
| <div className="relative"> | ||
| <img src="/cart.png" /> | ||
| <div className="flex items-center justify-center w-4 h-4 rounded-full bg-red-700 text-white absolute right-[-0.3rem] top-[-0.2rem] text-sm"> | ||
| 5 | ||
| </div> | ||
| </div> | ||
| <img src="/heart.png" /> | ||
| </div> | ||
| <div className="xs:hidden md:flex items-center gap-2"> | ||
| <div className="w-8 h-8 rounded-full overflow-hidden"> | ||
| <img src="/avatar.jpg" className="w-full h-full object-cover" /> | ||
| </div> | ||
| <h2 className="text-custom-black">Amanda Green</h2> | ||
| <img | ||
| src="/down.png" | ||
| width="15" | ||
| height="15" | ||
| onClick={() => setToggleProfileMenu(!toggleProfileMenu)} | ||
| /> | ||
| </div> | ||
| </div> | ||
| {toggleMenu && ( | ||
| <div className="absolute top-16 flex flex-col items-start p-4 w-full gap-4 text-custom-grey shadow-sm"> | ||
| <Link to="/">Home</Link> | ||
| <Link to="/shop">Shop</Link> | ||
| <Link to="/about">About</Link> | ||
| <Link to="contact">Contact</Link> | ||
| </div> | ||
| )} | ||
| {toggleProfileMenu && ( | ||
| <div className="absolute top-16 right-0 flex flex-col items-center w-52 shadow-sm py-2 text-custom-grey rounded-b-md border-l border-b border-custom-lightGrey"> | ||
| <div className="flex flex-col w-full gap-2 border-b-[1.5px] border-custom-lightGrey py-2"> | ||
| <div className="flex gap-2 w-full items-center px-2"> | ||
| <img src="/edit.png" width="20" height="20" /> | ||
| <h2>Edit profile</h2> | ||
| </div> | ||
| <div className="flex gap-2 w-full items-center px-2"> | ||
| <img src="/settings.png" width="20" height="20" /> | ||
| <h2>Preferences</h2> | ||
| </div> | ||
| <nav className="xs:hidden md:flex items-center h-full"> | ||
| <Link to='/' className={`${location.pathname === '/'?'border-b-[2px] border-custom-purple text-custom-purple':'text-custom-grey'} h-full flex items-center justify-center pl-4 pr-8`}>Home</Link> | ||
| <Link to='/shop' className={`${location.pathname === '/shop'?'border-b-[2px] border-custom-purple text-custom-purple':'text-custom-grey'} h-full flex items-center justify-center pl-4 pr-8`}>Shop</Link> | ||
| <Link to='/about' className={`${location.pathname === '/about'?'border-b-[2px] border-custom-purple text-custom-purple':'text-custom-grey'} h-full flex items-center justify-center pl-4 pr-8`}>About Us</Link> | ||
| <div className={`${location.pathname === '/contact'?'border-b-[2px] border-custom-purple text-custom-purple':'text-custom-grey'} flex items-center gap-2 h-full pl-4 pr-8`}> | ||
| <Link to='/contact' className={`h-full flex items-center justify-center`}>Contact</Link> | ||
| <img src="/down.png" width="15" height="15"/> | ||
| </div> | ||
| </nav> | ||
| <div className="flex items-center gap-8"> | ||
| <div className="flex items-center gap-4"> | ||
| <div className="relative"> | ||
| <img src="/cart.png"/> | ||
| <div className="flex items-center justify-center w-4 h-4 rounded-full bg-red-700 text-white absolute right-[-0.3rem] top-[-0.2rem] text-sm">5</div> | ||
| </div> | ||
| <img src="/heart.png"/> | ||
| </div> | ||
| <div className="xs:hidden md:flex items-center gap-2"> | ||
| <div className="w-8 h-8 rounded-full overflow-hidden"> | ||
| <img src="/avatar.jpg" className="w-full h-full object-cover"/> | ||
| </div> | ||
| <h2 className="text-custom-black">Amanda Green</h2> | ||
| <img src="/down.png" width="15" height="15" onClick={() => setToggleProfileMenu(!toggleProfileMenu)}/> | ||
| </div> | ||
| </div> | ||
| <div className="flex items-center w-full justify-between pr-2 py-2 border-b-[1.5px] border-custom-lightGrey"> | ||
| <div className="flex gap-2 items-center px-2"> | ||
| <img src="/moon.png" width="20" height="20" /> | ||
| <h2>Night mode</h2> | ||
| </div> | ||
| {toggleMenu && <div className="absolute top-16 flex flex-col items-start p-4 w-full gap-4 text-custom-grey shadow-sm"> | ||
| <Link to='/'>Home</Link> | ||
| <Link to='/shop'>Shop</Link> | ||
| <Link to='/about'>About</Link> | ||
| <Link to='contact'>Contact</Link> | ||
| </div>} | ||
| {toggleProfileMenu && <div className="absolute top-16 right-0 flex flex-col items-center w-52 shadow-sm py-2 text-custom-grey rounded-b-md border-l border-b border-custom-lightGrey"> | ||
| <div className="flex flex-col w-full gap-2 border-b-[1.5px] border-custom-lightGrey py-2"> | ||
| <div className="flex gap-2 w-full items-center px-2"> | ||
| <img src="/edit.png" width="20" height="20"/> | ||
| <h2>Edit profile</h2> | ||
| </div> | ||
| <div className="flex gap-2 w-full items-center px-2"> | ||
| <img src="/settings.png" width="20" height="20"/> | ||
| <h2>Preferences</h2> | ||
| </div> | ||
| </div> | ||
| <div className="flex items-center w-full justify-between pr-2 py-2 border-b-[1.5px] border-custom-lightGrey"> | ||
| <div className="flex gap-2 items-center px-2"> | ||
| <img src="/moon.png" width="20" height="20"/> | ||
| <h2>Night mode</h2> | ||
| </div> | ||
| <div className="rounded-xl w-9 h-5 bg-custom-purple flex items-center justify-end px-1"> | ||
| <div className="bg-white rounded-full w-3 h-3"></div> | ||
| </div> | ||
| </div> | ||
| <div className="flex gap-2 w-full items-start px-2 pt-1"> | ||
| <img src="/help.png" width="20" height="20"/> | ||
| <h2>Help center</h2> | ||
| </div> | ||
| <div className="flex gap-2 w-full items-center px-2 border-t-[1.5px] border-custom-lightGrey pt-1 mt-8"> | ||
| <img src="/signout.png" width="20" height="20"/> | ||
| <h2>Sign out</h2> | ||
| </div> | ||
| </div>} | ||
| <div className="rounded-xl w-9 h-5 bg-custom-purple flex items-center justify-end px-1"> | ||
| <div className="bg-white rounded-full w-3 h-3"></div> | ||
| </div> | ||
| </div> | ||
| <div className="flex gap-2 w-full items-start px-2 pt-1"> | ||
| <img src="/help.png" width="20" height="20" /> | ||
| <h2>Help center</h2> | ||
| </div> | ||
| <div className="flex gap-2 w-full items-center px-2 border-t-[1.5px] border-custom-lightGrey pt-1 mt-8"> | ||
| <img src="/signout.png" width="20" height="20" /> | ||
| <h2>Sign out</h2> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default Navbar; | ||
| )} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default Navbar; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,7 @@ | ||
| import Navbar from "@/components/navbar"; | ||
| import Navbar from '@/components/navbar'; | ||
|
|
||
| const About = () => { | ||
| return ( | ||
| <Navbar/> | ||
| ); | ||
| } | ||
|
|
||
| export default About; | ||
| return <Navbar />; | ||
| }; | ||
|
|
||
| export default About; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,7 @@ | ||
| import Navbar from "@/components/navbar"; | ||
| import Navbar from '@/components/navbar'; | ||
|
|
||
| const Contact = () => { | ||
| return ( | ||
| <Navbar/> | ||
| ); | ||
| } | ||
|
|
||
| export default Contact; | ||
| return <Navbar />; | ||
| }; | ||
|
|
||
| export default Contact; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,7 @@ | ||
| import Navbar from "@/components/navbar"; | ||
| import Navbar from '@/components/navbar'; | ||
|
|
||
| const Home = () => { | ||
| return ( | ||
| <Navbar/> | ||
| ); | ||
| } | ||
|
|
||
| export default Home; | ||
| return <Navbar />; | ||
| }; | ||
|
|
||
| export default Home; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,7 @@ | ||
| import Navbar from "@/components/navbar"; | ||
| import Navbar from '@/components/navbar'; | ||
|
|
||
| const Shop = () => { | ||
| return ( | ||
| <Navbar/> | ||
| ); | ||
| } | ||
|
|
||
| export default Shop; | ||
| return <Navbar />; | ||
| }; | ||
|
|
||
| export default Shop; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters