import Blog from "./Pages/Blog";
import Contact from "./Pages/Contact";
import About from "./Pages/About";
import Error from "./Pages/Error";
import Home from "./Pages/Home";
import Login from "./Pages/Login";
import Register from "./Pages/Register";
const router = [
{
id:1,
name:"home",
pathname:"/",
component:<Home/>
},
{
id:2,
name:"about",
pathname:"/about",
component:<About/>
},
{
id:2,
name:"blog",
pathname:"/blog",
component:<Blog/>
},
{
id:4,
name:"login",
pathname:"/login",
component:<Login/>
},
{
id:5,
name:"register",
pathname:"/register",
component:<Register/>
},
{
id:6,
name:"contact",
pathname:"/contact",
component:<Contact/>
},
{
id:7,
name:"*",
pathname:"*",
component:<Error/>
},
]
export default router
Setup 2
import { Routes, Route} from 'react-router-dom'
import Navigation from './component/Navigation';
import Home from "./Pages/Home";
function App() {
return (
<div>
<Navigation/>
<Routes>
<Route path="/" element={<Home />} />
</Routes>
</div>
)
}
export default App
Setup 3
import React, { useState } from 'react'
import { NavLink } from 'react-router-dom'
import {GiHamburgerMenu} from 'react-icons/gi'
import {AiOutlineClose} from 'react-icons/ai'
import './index.css'
const Navigation = () => {
const[mobile,setMobile] =useState(false)
const ToggleButton =()=>{
mobile?setMobile(false):setMobile(true)
}
const data = [{
name:"Home",
path:"/home"
},
{
name:"About",
path:"/about"
},
{
name:"Destinations",
path:"/destination"
},
{
name:"Pages",
path:"/page"
},
{
name:"Contact Us",
path:"/contact"
}
]
return (
<>
<nav className={mobile?'navLink-mobile-open':'navLink-mobile-close'}>
<ul className='link-mobile'>
{data.map((ele,id)=>(
<li key={id}><NavLink to={ele.path}>{ele.name}</NavLink></li>
))}
</ul>
</nav>
<div className='Navbar'>
<div className='logo'>Tourism</div>
<nav className='navLink'>
{data.map((ele)=>(
<NavLink to={ele.path}>{ele.name}</NavLink>
))}
</nav>
<div className='toggler' onClick={ToggleButton}>
{mobile?<AiOutlineClose className='togg-icon' />:<GiHamburgerMenu className='togg-icon'/>}
</div>
</div>
</>
)
}
export default Navigation
Setup 4 index.css
.active{
color: aqua !important;
}
.logo{
font-size: 25px;
font-weight: bold;
}
.togg-icon{
font-size: 25px;
}
.Navbar{
display: flex;
justify-content: space-between;
background-color:#222222;
color: aliceblue;
padding-top: 20px;
padding-bottom: 20px;
padding: 20px;
}
.navLink a{
padding: 15px 20px;
text-decoration: none;
color: aliceblue;
}
.toggler{
display: none;
}
.navLink-mobile-open{
display: none;
}
.navLink-mobile-close{
display: none;
}
@media screen and (max-width: 600px) {
.navLink{
display: none;
}
.Navbar{
display: flex;
justify-content: space-between;
padding: 20px;
}
.toggler{
display: block;
}
.navLink-mobile-open{
z-index: -1;
position:absolute;
transition: ease-in-out 0.5s;
top: 74px;
width: 100%;
display: block;
background-color: #222222;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20p;
}
.navLink-mobile-close{
z-index: -1;
position:absolute;
transition: ease-in-out 0.5s;
top: -145px;
width: 100%;
display: block;
background-color: #222222;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20p;
}
.navLink-mobile-close .link-mobile{
padding-top: 40px;
list-style: none;
padding: 0;
margin: 0;
padding-bottom: 20px;
}
.navLink-mobile-open .link-mobile{
padding-top: 40px;
list-style: none;
padding: 0;
margin: 0;
padding-bottom: 20px;
}
.navLink-mobile-open .link-mobile li a{
text-decoration: none;
color: aliceblue;
padding-top: 20px;
padding-bottom: 20px;
}
.navLink-mobile-close .link-mobile li a{
text-decoration: none;
color: aliceblue;
padding-top: 20px;
padding-bottom: 20px;
}
}