working on the colors of the navbars

This commit is contained in:
2025-07-03 12:11:13 +02:00
parent e6dc87f212
commit a2293be828
2 changed files with 9 additions and 15 deletions

View File

@@ -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>
);

View File

@@ -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;
}