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

nav needs some fixes but looks good for now

Browse Source
This commit is contained in:
Matthias Puchstein
2025-07-03 18:40:19 +02:00
parent 04e12ac605
commit fe4b616d27
2 changed files with 18 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/Navbar.tsx
View File

@@ -2,36 +2,31 @@ 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 }) =>
isActive ? 'text-fuchsia-50 font-semibold' : 'text-fuchsia-50';
return (
<div className="relative">
{/* The fixed bottom navbar */}
<nav
className="fixed bottom-0 left-0 right-0 flex justify-around bg-violet-800 border-t border-violet-950 py-2 z-10">
<NavLink to="/" className={linkClasses}>
<FaHome className="w-6 h-6"/>
className="fixed bottom-0 left-0 right-0 flex justify-around bg-violet-900 py-2 z-10">
<NavLink to="/">
<FaHome className="w-6 h-6 text-fuchsia-400"/>
</NavLink>
<NavLink to="/feed" className={linkClasses}>
<FaList className="w-6 h-6"/>
<NavLink to="/feed">
<FaList className="w-6 h-6 text-fuchsia-400"/>
</NavLink>
{/* Placeholder for spacing */}
<div className="w-16"></div>
<NavLink to="/archive" className={linkClasses}>
<FaArchive className="w-6 h-6"/>
<NavLink to="/archive">
<FaArchive className="w-6 h-6 text-fuchsia-400"/>
</NavLink>
<NavLink to="/profile" className={linkClasses}>
<FaUser className="w-6 h-6"/>
<NavLink to="/profile">
<FaUser className="w-6 h-6 text-fuchsia-400"/>
</NavLink>
</nav>
{/* The record button lifted up */}
<NavLink
to="/record"
className="fixed bottom-1 left-1/2 transform -translate-x-1/2 bg-violet-500 p-4 rounded-full z-20"
className="fixed bottom-2 left-1/2 transform -translate-x-1/2 bg-violet-700 p-4 rounded-full border-6 border-background z-20"
>
<FaMicrophone className="w-8 h-8 text-white"/>
<FaMicrophone className="w-8 h-8 text-fuchsia-400"/>
</NavLink>
</div>
);

9
src/index.css
View File

@@ -1,13 +1,14 @@
@import "tailwindcss";
:root {
--background-color: var(--color-pink-900);
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
background-color: var(--background-color);
font-synthesis: none;
text-rendering: optimizeLegibility;
@@ -15,6 +16,10 @@
-moz-osx-font-smoothing: grayscale;
}
.border-background {
border-color: var(--background-color);
}
a {
font-weight: 500;
color: #646cff;
@@ -59,7 +64,7 @@ button:focus-visible {
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
--background-color: #ffffff;
}
a:hover {
color: #747bff;