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

97
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,49 +17,63 @@ const mockedAccounts = [
}, },
]; ];
const Navigation = () => { const NavLink = ({ href, children }: { href: string; children: string }) => {
const router = useRouter();
return ( return (
<div> <Link href={href} passHref>
{/* Main navigation bar */} <a
<div className="flex justify-between items-center px-6 py-3 border-b border-white/20"> className={`${
<Link href="/" passHref> router.pathname === href ? "text-white" : ""
<a> } hover:text-white`}
<img src="/logo.svg" alt="mars" /> >
</a> {children}
</Link> </a>
<div className="flex px-12 gap-5"> </Link>
<Link href="/trade">Trade</Link>
<Link href="/yield">Yield</Link>
<Link href="/borrow">Borrow</Link>
<Link href="/portfolio">Portfolio</Link>
<Link href="/council">Council</Link>
</div>
<button
className="rounded-3xl bg-green-500 py-2 px-3 font-semibold"
onClick={() => alert("TODO")}
>
Connect Wallet
</button>
</div>
{/* Sub navigation bar */}
<div className="flex justify-between px-6 py-3 text-sm text-white/40">
<div className="flex">
{mockedAccounts.map((account, index) => (
<div key={index} className="px-4">
{account.label}
</div>
))}
<div className="px-3 ">More</div>
<div className="px-3">Manage</div>
</div>
<div className="flex gap-4">
<p>$: 2500</p>
<div>Lvg Gauge</div>
<div>Risk Gauge</div>
</div>
</div>
</div>
); );
}; };
const Navigation = () => (
<div>
{/* Main navigation bar */}
<div className="flex justify-between items-center px-6 py-3 border-b border-white/20">
<Link href="/" passHref>
<a>
<img src="/logo.svg" alt="mars" />
</a>
</Link>
<div className="flex px-12 gap-5 text-white/40">
<NavLink href="/trade">Trade</NavLink>
<NavLink href="/yield">Yield</NavLink>
<NavLink href="/borrow">Borrow</NavLink>
<NavLink href="/portfolio">Portfolio</NavLink>
<NavLink href="/council">Council</NavLink>
</div>
<button
className="rounded-3xl bg-green-500 py-2 px-3 font-semibold"
onClick={() => alert("TODO")}
>
Connect Wallet
</button>
</div>
{/* Sub navigation bar */}
<div className="flex justify-between px-6 py-3 text-sm text-white/40">
<div className="flex">
{mockedAccounts.map((account, index) => (
<div key={index} className="px-4">
{account.label}
</div>
))}
<div className="px-3 ">More</div>
<div className="px-3">Manage</div>
</div>
<div className="flex gap-4">
<p>$: 2500</p>
<div>Lvg Gauge</div>
<div>Risk Gauge</div>
</div>
</div>
</div>
);
export default Navigation; export default Navigation;