thesn/volana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign TopNav layout

Browse Source
This commit is contained in:
thesn10
2026-07-03 13:01:24 +02:00
parent da78b8c0a2
commit 3c52730393
1 changed files with 36 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
app/src/components/TopNav.tsx
View File

@@ -6,6 +6,7 @@ import { Ionicons } from "@expo/vector-icons";
import { Button, SearchField, Typography, useThemeColor } from "heroui-native"; import { Button, SearchField, Typography, useThemeColor } from "heroui-native";
import { useWallet } from "@/state/wallet"; import { useWallet } from "@/state/wallet";
import { useModals } from "@/state/modals"; import { useModals } from "@/state/modals";
import { PageContainer } from "@/components/PageContainer";
export function TopNav(): JSX.Element { export function TopNav(): JSX.Element {
const router = useRouter(); const router = useRouter();
@@ -15,44 +16,46 @@ export function TopNav(): JSX.Element {
const [search, setSearch] = useState(""); const [search, setSearch] = useState("");
return ( return (
<View className="hidden h-16 flex-row items-center gap-4 border-b border-border bg-background px-6 md:flex"> <View className="hidden border-b border-border bg-background md:flex">
<Pressable onPress={() => router.push("/")} className="flex-row items-center gap-2"> <PageContainer className="h-16 flex-row items-center gap-4 lg:h-[76px]">
<View className="size-6 items-center justify-center rounded-md bg-accent"> <Pressable onPress={() => router.push("/")} className="flex-row items-center gap-2">
<Ionicons name="list" size={14} color={accentForeground} /> <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> </View>
<Typography type="h6">Volana</Typography>
</Pressable>
<View className="max-w-[320px] flex-1"> <View className="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" /> <Button variant="ghost" size="sm" onPress={() => router.push("/browse")}>
<Button.Label>Browse</Button.Label>
<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> </Button>
) : ( <Button variant="ghost" size="sm" onPress={() => router.push("/orders")}>
<Button size="sm" onPress={openWalletConnect}> <Button.Label>My Orders</Button.Label>
<Button.Label>Connect Wallet</Button.Label>
</Button> </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> </View>
); );
} }