chad/chadsreactproject
1
0
Fork 0
mirror of https://github.com/DevEhChad/chadsreactproject.git synced 2025-11-08 13:31:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Navbar and UI changes

Browse Source 
Just some general nav updates
This commit is contained in:
Chad Doty
2024-01-25 03:42:32 -05:00
parent f675fb4e72
commit 2d2ea2d0dd
4 changed files with 33 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/App.js
View File

@@ -13,10 +13,15 @@ function App() {
<Router> <Router>
<Navbar /> <Navbar />
<Routes> <Routes>
<Route path="/" exact element={<Home />} /> <Route path="/" exact element={<Home />} />
<Route path="/shop" exact element={<Shop />} /> <Route path="/shop" exact element={<Shop />} />
<Route path="/about" exact element={<About />} /> <Route path="/about" exact element={<About />} />
<Route path="/contact" exact element={<Contact />} /> <Route path="/contact" exact element={<Contact />} />
</Routes> </Routes>
<Footer /> <Footer />
</Router> </Router>

18
src/components/Navbar.js
View File

@@ -1,6 +1,6 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import Logo from '../assets/images.png'; import Logo from '../assets/images.png';
import { Link, NavLink } from 'react-router-dom'; import { NavLink } from 'react-router-dom';
import ReorderIcon from '@mui/icons-material/Reorder'; import ReorderIcon from '@mui/icons-material/Reorder';
import '../styles/Navbar.css' import '../styles/Navbar.css'
@@ -16,17 +16,17 @@ function Navbar() {
<div className='leftSide' id={openLinks ? "open" : "close"}> <div className='leftSide' id={openLinks ? "open" : "close"}>
<img src={Logo} /> <img src={Logo} />
<div className='hiddenLinks'> <div className='hiddenLinks'>
<Link to="/"> Home </Link> <NavLink to="/"> Home </NavLink>
<Link to="/shop"> Shop </Link> <NavLink to="/shop"> Shop </NavLink>
<Link to="/about"> About </Link> <NavLink to="/about"> About </NavLink>
<Link to="/contact"> Contact </Link> <NavLink to="/contact"> Contact </NavLink>
</div> </div>
</div> </div>
<div className='rightSide'> <div className='rightSide'>
<Link to="/"> Home </Link> <NavLink to="/"> Home </NavLink>
<Link to="/shop"> Shop </Link> <NavLink to="/shop"> Shop </NavLink>
<Link to="/about"> About </Link> <NavLink to="/about"> About </NavLink>
<Link to="/contact"> Contact </Link> <NavLink to="/contact"> Contact </NavLink>
<button onClick={toggleNavbar}> <button onClick={toggleNavbar}>
<ReorderIcon /> <ReorderIcon />
</button> </button>

2
src/styles/Footer.css
View File

@@ -4,7 +4,7 @@
min-height: 100%; min-height: 100%;
margin-top: 10px; margin-top: 10px;
margin-top: auto; margin-top: auto;
background-color: #121619; background-color: #000000;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;

31
src/styles/Navbar.css
View File

@@ -1,7 +1,7 @@
.navbar { .navbar {
width: 100svw; width: 100svw;
height: 100px; height: 80px;
background-color: #121619; background-color: #000000;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
@@ -25,23 +25,28 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.navbar a { .navbar a {
color: white; color: rgb(255, 255, 255);
text-decoration: none; text-decoration: none;
margin: 20px; margin: 10px;
font-size: 20px; font-size: 18px;
} }
.navbar a:active, .navbar a:hover { .navbar a:hover {
font-size: 22px; font-size: 20px;
border-radius: 15%; color: rgb(255, 0, 0);
background-color: white;
padding: 10px;
color: black;
transition: 0.3s ease-in; transition: 0.3s ease-in;
} }
.navbar a.active {
font-size: 22px;
border-radius: 15%;
background-color: rgba(255, 0, 0, 0.552);
padding: 10px;
color: rgb(255, 255, 255);
}
.navbar .rightSide button { .navbar .rightSide button {
background-color: transparent; background-color: transparent;
border: none; border: none;