Skip to content
This repository has been archived by the owner on Feb 21, 2025. It is now read-only.

Commit

Permalink
fix navigator
Browse files Browse the repository at this point in the history
  • Loading branch information
@vuonghuuhung
vuonghuuhung committed Nov 16, 2024
1 parent ebb1e5e commit 2db7db3
Show file tree
Hide file tree
Showing 3 changed files with 61 additions and 60 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
},
"dependencies": {
"@orbs-network/ton-access": "^2.3.3",
"@radix-ui/react-icons": "^1.3.2",
"@radix-ui/react-label": "^2.1.0",
"@radix-ui/react-navigation-menu": "^1.2.1",
"@radix-ui/react-select": "^2.1.2",
Expand Down
115 changes: 55 additions & 60 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,17 @@ import {
} from "./components/ui/select";
import { Button } from "./components/ui/button";
import { cn } from "./lib/utils";
import { LoopIcon, OpacityIcon } from "@radix-ui/react-icons"
// import { Button } from "@/components/ui/button";
// import WebApp from "@twa-dev/sdk";
// import { useCounterContract } from "./hooks/useCounterContract";
// import { useTonConnect } from "./hooks/useTonConnect";

const ROUTES = [
{ path: "swaps", label: "Swap", isIndex: true, icon: LoopIcon },
{ path: "pools", label: "Pools", isIndex: false, icon: OpacityIcon },
];

const router = createBrowserRouter(
[
{
Expand All @@ -39,7 +45,6 @@ const router = createBrowserRouter(
children: [
{
index: true,
path: "swaps",
element: <Swap />,
},
{
Expand Down Expand Up @@ -83,90 +88,80 @@ function App() {
function TopNavigator() {
return (
<>
{/* Header */}
<header className="flex justify-center px-4 z-10">
<div className="container grid grid-cols-[1fr_3fr] items-center px-5 py-10 md:grid-cols-[1fr_auto_1fr]">
<div className="container grid grid-cols-[1fr_3fr] items-center px-5 py-5 md:py-10 md:grid-cols-[1fr_auto_1fr]">
{/* Logo and Brand */}
<div className="flex items-center justify-start">
<NavLink to="/orbiton-mini-app/">
<div className="inline-flex items-center justify-between px-xs md:w-[102px]">
<div className="inline-flex items-center justify-between px-xs md:w-[102px]">
<div className="relative">
<Logo className="w-20 h-20" />
</div>
<span className="text-3xl ml-4 m-auto hidden font-semibold md:inline-block">
<span className="text-3xl ml-4 hidden font-semibold md:inline-block">
Orbiton
</span>
</div>
</NavLink>
</div>
<div className="items-center hidden md:flex">

{/* Desktop Navigation */}
<nav className="items-center hidden md:flex">
<NavigationMenu>
<NavigationMenuList className="gap-10 text-2xl">
<NavigationMenuItem>
<NavLink
to="/orbiton-mini-app/swaps"
className={({ isActive }) => {
return cn(
"hover:bg-slate-200 hover:text-blue-800 py-3 px-8 rounded-full",
[isActive ? "text-blue-800" : ""]
);
}}
>
Swap
</NavLink>
</NavigationMenuItem>
<NavigationMenuItem>
<NavLink
to="/orbiton-mini-app/pools"
className={({ isActive }) => {
return cn(
"hover:bg-slate-200 hover:text-blue-800 py-3 px-8 rounded-full",
[isActive ? "text-blue-800" : ""]
);
}}
>
Pools
</NavLink>
</NavigationMenuItem>
{ROUTES.map(({ path, label, isIndex }) => (
<NavigationMenuItem key={path}>
<NavLink
to={`/orbiton-mini-app/${isIndex ? "" : path}`}
end={isIndex} // Ensures "Swap" (index) matches exactly
className={({ isActive }) =>
cn(
"hover:bg-slate-200 hover:text-blue-800 py-3 px-8 rounded-full",
isActive && "text-blue-800"
)
}
>
{label}
</NavLink>
</NavigationMenuItem>
))}
</NavigationMenuList>
</NavigationMenu>
</div>
</nav>

{/* Connect Button */}
<div className="flex justify-end text-4xl">
<TonConnectButton style={{ fontSize: 20 }} />
</div>
</div>
</header>

{/* Main Content */}
<div className="container pb-[12px] pt-4 flex flex-1 justify-center duration-[0.2s] transition-[background-color] ease-[ease-in-out] z-[1]">
<Outlet />
</div>

{/* Footer */}
<footer>
<div className="fixed bottom-8 w-full md:hidden">
<NavigationMenu className="max-w">
<div className="fixed bottom-0 py-4 w-full md:hidden border-t-[1px] border-black">
<NavigationMenu className="max-w-full">
<NavigationMenuList className="gap-10 text-2xl">
<NavigationMenuItem>
<NavLink
to="/orbiton-mini-app/swaps"
className={({ isActive }) => {
return cn(
"hover:bg-slate-200 hover:text-blue-800 py-3 px-8 rounded-full",
[isActive ? "text-blue-800" : ""]
);
}}
>
Swap
</NavLink>
</NavigationMenuItem>
<NavigationMenuItem>
<NavLink
to="/orbiton-mini-app/pools"
className={({ isActive }) => {
return cn(
"hover:bg-slate-200 hover:text-blue-800 py-3 px-8 rounded-full",
[isActive ? "text-blue-800" : ""]
);
}}
>
Pools
</NavLink>
</NavigationMenuItem>
{ROUTES.map(({ path, label, isIndex, icon: Icon }) => (
<NavigationMenuItem key={path}>
<NavLink
to={`/orbiton-mini-app/${isIndex ? "" : path}`}
end={isIndex}
className={({ isActive }) =>
cn(
"hover:text-blue-800 py-3 px-8 rounded-full",
isActive && "text-blue-800 bg-slate-200"
)
}
>
<Icon className="inline-block"/>{' '}{label}
</NavLink>
</NavigationMenuItem>
))}
</NavigationMenuList>
</NavigationMenu>
</div>
Expand Down
5 changes: 5 additions & 0 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -545,6 +545,11 @@
"@radix-ui/react-primitive" "2.0.0"
"@radix-ui/react-use-callback-ref" "1.1.0"

"@radix-ui/react-icons@^1.3.2":
version "1.3.2"
resolved "https://registry.yarnpkg.com/@radix-ui/react-icons/-/react-icons-1.3.2.tgz#09be63d178262181aeca5fb7f7bc944b10a7f441"
integrity sha512-fyQIhGDhzfc9pK2kH6Pl9c4BDJGfMkPqkyIgYDthyNYoNg3wVhoJMMh19WS4Up/1KMPFVpNsT2q3WmXn2N1m6g==

"@radix-ui/[email protected]":
version "1.1.0"
resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.1.0.tgz#de47339656594ad722eb87f94a6b25f9cffae0ed"
Expand Down

0 comments on commit 2db7db3

Please sign in to comment.