navigation bars wip

components/Navigation.tsx

@@ -1,9 +1,26 @@
 import React from "react";
 import Link from "next/link";
 
+const mockedAccounts = [
+  {
+    label: "Subaccount 1",
+  },
+  {
+    label: "Subaccount 2",
+  },
+  {
+    label: "Subaccount 3",
+  },
+  {
+    label: "Subaccount 4",
+  },
+];
+
 const Navigation = () => {
   return (
-    <div className="flex justify-between items-center px-6 py-3">
+    <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" />
@@ -23,6 +40,24 @@ const Navigation = () => {
           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>
   );
 };