mpuchstein/REMind
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

working on the colors of the navbars

Browse Source
This commit is contained in:
Matthias Puchstein
2025-07-03 12:11:13 +02:00
parent e6dc87f212
commit a2293be828
2 changed files with 9 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/Navbar.tsx
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"; import {FaArchive, FaHome, FaList, FaMicrophone, FaUser} from "react-icons/fa";
export default function Navbar() { export default function Navbar() {
const linkClasses = ({ isActive }: { isActive: boolean }) => const linkClasses = ({isActive}: { isActive: boolean }) =>
isActive isActive
? 'text-blue-600 font-semibold' ? 'text-blue-600 font-semibold'
: 'text-gray-600'; : 'text-gray-600';
return ( return (
<nav className=" <nav className="nav fixed bottom-0 left-0 right-0 flex justify-around border-t border-gray-200 py-2 ">
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 */
">
<NavLink to="/" className={linkClasses}> <NavLink to="/" className={linkClasses}>
<FaHome className="w-6 h-6"/> <FaHome className="w-6 h-6"/>
</NavLink> </NavLink>
<NavLink to="/feed" className={linkClasses}> <NavLink to="/feed" className={linkClasses}>
<FaList className="w-6 h-6" /> <FaList className="w-6 h-6"/>
</NavLink> </NavLink>
<NavLink to="/record" className={linkClasses}> <NavLink to="/record" className={linkClasses}>
<FaMicrophone className="w-6 h-6" /> <FaMicrophone className="w-6 h-6"/>
</NavLink> </NavLink>
<NavLink to="/archive" className={linkClasses}> <NavLink to="/archive" className={linkClasses}>
<FaArchive className="w-6 h-6" /> <FaArchive className="w-6 h-6"/>
</NavLink> </NavLink>
<NavLink to="/profile" className={linkClasses}> <NavLink to="/profile" className={linkClasses}>
<FaUser className="w-6 h-6" /> <FaUser className="w-6 h-6"/>
</NavLink> </NavLink>
</nav> </nav>
); );

4
src/styles/navbar.css
View File

@@ -3,12 +3,12 @@ nav {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 2rem; gap: 2rem;
background-color: #6D5CC4; background-color: darkviolet;
padding: 1rem 0; padding: 1rem 0;
} }
nav a { nav a {
color: #4b5563; color: whitesmoke;
text-decoration: none; text-decoration: none;
font-weight: 500; font-weight: 500;
} }