working on the colors of the navbars
This commit is contained in:
@@ -1,34 +1,28 @@
|
||||
import { NavLink } from 'react-router-dom';
|
||||
import {NavLink} from 'react-router-dom';
|
||||
import {FaArchive, FaHome, FaList, FaMicrophone, FaUser} from "react-icons/fa";
|
||||
|
||||
export default function Navbar() {
|
||||
const linkClasses = ({ isActive }: { isActive: boolean }) =>
|
||||
const linkClasses = ({isActive}: { isActive: boolean }) =>
|
||||
isActive
|
||||
? 'text-blue-600 font-semibold'
|
||||
: 'text-gray-600';
|
||||
|
||||
return (
|
||||
<nav className="
|
||||
fixed bottom-0 left-0 right-0 /* pin to bottom */
|
||||
flex justify-around /* evenly spaced links */
|
||||
bg-white border-t border-gray-200 /* top border for separation */
|
||||
py-2 /* vertical padding */
|
||||
shadow-lg /* subtle drop shadow */
|
||||
">
|
||||
<nav className="nav fixed bottom-0 left-0 right-0 flex justify-around border-t border-gray-200 py-2 ">
|
||||
<NavLink to="/" className={linkClasses}>
|
||||
<FaHome className="w-6 h-6"/>
|
||||
</NavLink>
|
||||
<NavLink to="/feed" className={linkClasses}>
|
||||
<FaList className="w-6 h-6" />
|
||||
<FaList className="w-6 h-6"/>
|
||||
</NavLink>
|
||||
<NavLink to="/record" className={linkClasses}>
|
||||
<FaMicrophone className="w-6 h-6" />
|
||||
<FaMicrophone className="w-6 h-6"/>
|
||||
</NavLink>
|
||||
<NavLink to="/archive" className={linkClasses}>
|
||||
<FaArchive className="w-6 h-6" />
|
||||
<FaArchive className="w-6 h-6"/>
|
||||
</NavLink>
|
||||
<NavLink to="/profile" className={linkClasses}>
|
||||
<FaUser className="w-6 h-6" />
|
||||
<FaUser className="w-6 h-6"/>
|
||||
</NavLink>
|
||||
</nav>
|
||||
);
|
||||
|
@@ -3,12 +3,12 @@ nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
background-color: #6D5CC4;
|
||||
background-color: darkviolet;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
nav a {
|
||||
color: #4b5563;
|
||||
color: whitesmoke;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
Reference in New Issue
Block a user