From 3c5273039336739ef721b93073ffb66433cb7bf9 Mon Sep 17 00:00:00 2001
From: thesn10 <38666407+thesn10@users.noreply.github.com>
Date: Fri, 3 Jul 2026 13:01:24 +0200
Subject: [PATCH] Redesign TopNav layout

---
 app/src/components/TopNav.tsx | 69 ++++++++++++++++++-----------------
 1 file changed, 36 insertions(+), 33 deletions(-)

diff --git a/app/src/components/TopNav.tsx b/app/src/components/TopNav.tsx
index ed34d98..57843d1 100644
--- a/app/src/components/TopNav.tsx
+++ b/app/src/components/TopNav.tsx
@@ -6,6 +6,7 @@ import { Ionicons } from "@expo/vector-icons";
 import { Button, SearchField, Typography, useThemeColor } from "heroui-native";
 import { useWallet } from "@/state/wallet";
 import { useModals } from "@/state/modals";
+import { PageContainer } from "@/components/PageContainer";
 
 export function TopNav(): JSX.Element {
   const router = useRouter();
@@ -15,44 +16,46 @@ export function TopNav(): JSX.Element {
   const [search, setSearch] = useState("");
 
   return (
-    <View className="hidden h-16 flex-row items-center gap-4 border-b border-border bg-background px-6 md:flex">
-      <Pressable onPress={() => router.push("/")} className="flex-row items-center gap-2">
-        <View className="size-6 items-center justify-center rounded-md bg-accent">
-          <Ionicons name="list" size={14} color={accentForeground} />
+    <View className="hidden border-b border-border bg-background md:flex">
+      <PageContainer className="h-16 flex-row items-center gap-4 lg:h-[76px]">
+        <Pressable onPress={() => router.push("/")} className="flex-row items-center gap-2">
+          <View className="size-6 items-center justify-center rounded-md bg-accent">
+            <Ionicons name="list" size={14} color={accentForeground} />
+          </View>
+          <Typography type="h6">Volana</Typography>
+        </Pressable>
+
+        <View className="max-w-[320px] flex-1 lg:max-w-[480px]">
+          <SearchField value={search} onChange={setSearch}>
+            <SearchField.Group>
+              <SearchField.SearchIcon />
+              <SearchField.Input
+                placeholder="Search listings…"
+                onSubmitEditing={() => router.push("/browse")}
+              />
+            </SearchField.Group>
+          </SearchField>
         </View>
-        <Typography type="h6">Volana</Typography>
-      </Pressable>
 
-      <View className="max-w-[320px] flex-1">
-        <SearchField value={search} onChange={setSearch}>
-          <SearchField.Group>
-            <SearchField.SearchIcon />
-            <SearchField.Input
-              placeholder="Search listings…"
-              onSubmitEditing={() => router.push("/browse")}
-            />
-          </SearchField.Group>
-        </SearchField>
-      </View>
+        <View className="flex-1" />
 
-      <View className="flex-1" />
-
-      <Button variant="ghost" size="sm" onPress={() => router.push("/browse")}>
-        <Button.Label>Browse</Button.Label>
-      </Button>
-      <Button variant="ghost" size="sm" onPress={() => router.push("/orders")}>
-        <Button.Label>My Orders</Button.Label>
-      </Button>
-
-      {connected ? (
-        <Button variant="secondary" size="sm" onPress={disconnect}>
-          <Button.Label>{address}</Button.Label>
+        <Button variant="ghost" size="sm" onPress={() => router.push("/browse")}>
+          <Button.Label>Browse</Button.Label>
         </Button>
-      ) : (
-        <Button size="sm" onPress={openWalletConnect}>
-          <Button.Label>Connect Wallet</Button.Label>
+        <Button variant="ghost" size="sm" onPress={() => router.push("/orders")}>
+          <Button.Label>My Orders</Button.Label>
         </Button>
-      )}
+
+        {connected ? (
+          <Button variant="secondary" size="sm" onPress={disconnect}>
+            <Button.Label>{address}</Button.Label>
+          </Button>
+        ) : (
+          <Button size="sm" onPress={openWalletConnect}>
+            <Button.Label>Connect Wallet</Button.Label>
+          </Button>
+        )}
+      </PageContainer>
     </View>
   );
 }