LaconicNetwork/mars-v2-frontend
3
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 Link from "next/link";
import { useRouter } from "next/router";
const mockedAccounts = [
{
@ -16,49 +17,63 @@ const mockedAccounts = [
},
];
const Navigation = () => {
const NavLink = ({ href, children }: { href: string; children: string }) => {
const router = useRouter();
return (
<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">
<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>
<Link href={href} passHref>
<a
className={`${
router.pathname === href ? "text-white" : ""
} hover:text-white`}
>
{children}
</a>
</Link>
);
};
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;