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

navigation bars wip

Browse Source
This commit is contained in:
Gustavo Mauricio 2022-09-06 16:16:58 +01:00
parent 84fa492849
commit 8c8a7cb18f
1 changed files with 53 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
components/Navigation.tsx
View File

@ -1,27 +1,62 @@
import React from "react"; import React from "react";
import Link from "next/link"; import Link from "next/link";
const mockedAccounts = [
{
label: "Subaccount 1",
},
{
label: "Subaccount 2",
},
{
label: "Subaccount 3",
},
{
label: "Subaccount 4",
},
];
const Navigation = () => { const Navigation = () => {
return ( return (
<div className="flex justify-between items-center px-6 py-3"> <div>
<Link href="/" passHref> {/* Main navigation bar */}
<a> <div className="flex justify-between items-center px-6 py-3 border-b border-white/20">
<img src="/logo.svg" alt="mars" /> <Link href="/" passHref>
</a> <a>
</Link> <img src="/logo.svg" alt="mars" />
<div className="flex px-12 gap-5"> </a>
<Link href="/trade">Trade</Link> </Link>
<Link href="/yield">Yield</Link> <div className="flex px-12 gap-5">
<Link href="/borrow">Borrow</Link> <Link href="/trade">Trade</Link>
<Link href="/portfolio">Portfolio</Link> <Link href="/yield">Yield</Link>
<Link href="/council">Council</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>
<button
className="rounded-3xl bg-green-500 py-2 px-3 font-semibold"
onClick={() => alert("TODO")}
>
Connect Wallet
</button>
</div> </div>
); );
}; };