LaconicNetwork/mars-v2-frontend
4
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

navigation links styling

Browse Source
This commit is contained in:
Gustavo Mauricio 2022-09-06 18:56:12 +01:00
parent 8c8a7cb18f
commit 71e5cf649d
1 changed files with 56 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
components/Navigation.tsx
View File

@ -1,5 +1,6 @@
import React from "react"; import React from "react";
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/router";
const mockedAccounts = [ const mockedAccounts = [
{ {
@ -16,8 +17,23 @@ const mockedAccounts = [
}, },
]; ];
const Navigation = () => { const NavLink = ({ href, children }: { href: string; children: string }) => {
const router = useRouter();
return ( return (
<Link href={href} passHref>
<a
className={`${
router.pathname === href ? "text-white" : ""
} hover:text-white`}
>
{children}
</a>
</Link>
);
};
const Navigation = () => (
<div> <div>
{/* Main navigation bar */} {/* Main navigation bar */}
<div className="flex justify-between items-center px-6 py-3 border-b border-white/20"> <div className="flex justify-between items-center px-6 py-3 border-b border-white/20">
@ -26,12 +42,12 @@ const Navigation = () => {
<img src="/logo.svg" alt="mars" /> <img src="/logo.svg" alt="mars" />
</a> </a>
</Link> </Link>
<div className="flex px-12 gap-5"> <div className="flex px-12 gap-5 text-white/40">
<Link href="/trade">Trade</Link> <NavLink href="/trade">Trade</NavLink>
<Link href="/yield">Yield</Link> <NavLink href="/yield">Yield</NavLink>
<Link href="/borrow">Borrow</Link> <NavLink href="/borrow">Borrow</NavLink>
<Link href="/portfolio">Portfolio</Link> <NavLink href="/portfolio">Portfolio</NavLink>
<Link href="/council">Council</Link> <NavLink href="/council">Council</NavLink>
</div> </div>
<button <button
className="rounded-3xl bg-green-500 py-2 px-3 font-semibold" className="rounded-3xl bg-green-500 py-2 px-3 font-semibold"
@ -59,6 +75,5 @@ const Navigation = () => {
</div> </div>
</div> </div>
); );
};
export default Navigation; export default Navigation;