Add BottomNavbar

packages/client/src/Layout.tsx

@@ -1,9 +1,11 @@
+import Navbar from "./shared/components/Navbar.tsx";
 import type { Children } from "./shared/types/utils.d.ts";
 
 export default function Layout(props: { children: Children }) {
   return (
     <>
       {props.children}
+      <Navbar />
     </>
   );
 }

packages/client/src/pages/token/Trader.tsx

@@ -88,7 +88,7 @@ export default function Trader() {
             setSellAmount(0);
           }}
         >
-          <Icon name="ArrowBigRight" className="size-3" />
+          <Icon name="ArrowRight" className="size-3" />
         </button>
 
         <div className="border border-front/20 p-3 rounded-lg min-h-[15vh]">

packages/client/src/shared/components/Navbar.tsx

@@ -0,0 +1,28 @@
+import Icon from "./Icon.tsx";
+
+export default function Navbar() {
+  return (
+    <div className="fixed bottom-0 bg-background justify-between flex w-full py-2 px-4 rounded-t-md text-sm border-t border-border shadow-lg">
+      <div className="flex flex-col items-center">
+        <Icon name="Gem" />
+        <p>Discover</p>
+      </div>
+      <div className="flex flex-col items-center">
+        <Icon name="MessagesSquare" />
+        <p>Chat</p>
+      </div>
+      <div className="flex flex-col items-center">
+        <Icon name="Touchpad" />
+        <p>PFRAX</p>
+      </div>
+      <div className="flex flex-col items-center">
+        <Icon name="Plus" />
+        <p>Create</p>
+      </div>
+      <div className="flex flex-col items-center">
+        <Icon name="Wallet" />
+        <p>Portfolio</p>
+      </div>
+    </div>
+  );
+}