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

7
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,7 +16,8 @@ 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">
<PageContainer className="h-16 flex-row items-center gap-4 lg:h-[76px]">
<Pressable onPress={() => router.push("/")} className="flex-row items-center gap-2"> <Pressable onPress={() => router.push("/")} className="flex-row items-center gap-2">
<View className="size-6 items-center justify-center rounded-md bg-accent"> <View className="size-6 items-center justify-center rounded-md bg-accent">
<Ionicons name="list" size={14} color={accentForeground} /> <Ionicons name="list" size={14} color={accentForeground} />
@@ -23,7 +25,7 @@ export function TopNav(): JSX.Element {
<Typography type="h6">Volana</Typography> <Typography type="h6">Volana</Typography>
</Pressable> </Pressable>
<View className="max-w-[320px] flex-1"> <View className="max-w-[320px] flex-1 lg:max-w-[480px]">
<SearchField value={search} onChange={setSearch}> <SearchField value={search} onChange={setSearch}>
<SearchField.Group> <SearchField.Group>
<SearchField.SearchIcon /> <SearchField.SearchIcon />
@@ -53,6 +55,7 @@ export function TopNav(): JSX.Element {
<Button.Label>Connect Wallet</Button.Label> <Button.Label>Connect Wallet</Button.Label>
</Button> </Button>
)} )}
</PageContainer>
</View> </View>
); );
} }