Here is the code I'm currently working with. However, on mobile devices, the Connect button is positioned on the left side as shown in this image: https://i.sstatic.net/dd4Wg.png.
My goal is to relocate the connect button to the right side on mobile devices, just before the discord button.
This is the code snippet:
export function SiteHeader() {
return (
<header className="fixed top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
<div className="container flex h-14 max-w-screen-2xl items-center">
<MainNav />
<MobileNav />
<div className="flex flex-1 items-center justify-between space-x-2 md:justify-end">
<div className="w-full flex-1 md:w-auto md:flex-none">
<Button>Connect</Button>
</div>
<nav className="flex items-center">
<Link
href=""
target="_blank"
rel="noreferrer"
>
<div
className={cn(
buttonVariants({
variant: "ghost",
}),
"w-9 px-0"
)}
>
<Icons.discord className="h-4 w-4" />
<span className="sr-only">Discord</span>
</div>
</Link>
<Link
href=""
target="_blank"
rel="noreferrer"
>
<div
className={cn(
buttonVariants({
variant: "ghost",
}),
"w-9 px-0"
)}
>
<Icons.twitter className="h-3 w-3 fill-current" />
<span className="sr-only">Twitter</span>
</div>
</Link>
<ModeToggle />
</nav>
</div>
</div>
</header>
);
}