more mobile nav

components/TopBar.tsx

@@ -29,8 +29,8 @@ const TopBar = () => {
   }, [copied])
 
   return (
-    <div className="mb-8 grid h-20 grid-cols-3 px-6">
-      <div className="col-span-1 flex items-center">
+    <div className="mb-8 grid h-20 grid-cols-9 px-6">
+      <div className="col-span-3 flex items-center sm:col-span-1 md:col-span-3">
         <Link href="/" shallow={true}>
           <div className="group flex items-center">
             <BoostLogo className="h-auto w-12 shrink-0 cursor-pointer group-hover:animate-shake" />
@@ -45,7 +45,7 @@ const TopBar = () => {
           </div>
         </Link>
       </div>
-      <div className="col-span-1 flex items-center justify-center space-x-4">
+      <div className="col-span-3 flex items-center space-x-4 sm:col-span-4 md:col-span-3 md:justify-center">
         {!isMobile ? (
           <>
             <NavLink active={pathname === '/'} path="/" text="Boost!" />
@@ -58,10 +58,16 @@ const TopBar = () => {
           </>
         ) : null}
       </div>
-      <div className="col-span-1 flex items-center justify-end">
+      <div className="col-span-3 flex items-center justify-end sm:col-span-4 md:col-span-3">
         <div className="flex space-x-3">
-          {isMobile ? <MobileNavigation /> : <ThemeToggle />}
-          {connected ? <ConnectedMenu /> : <ConnectWalletButton />}
+          {isMobile ? (
+            <MobileNavigation />
+          ) : (
+            <>
+              <ThemeToggle />{' '}
+              {connected ? <ConnectedMenu /> : <ConnectWalletButton />}
+            </>
+          )}
         </div>
       </div>
       {!isOnline ? (
@@ -99,6 +105,7 @@ const MenuPanel = ({
   showMenu: boolean
   setShowMenu: (showMenu: boolean) => void
 }) => {
+  const { connected } = useWallet()
   const closeOnClick = () => {
     setShowMenu(false)
   }
@@ -106,13 +113,15 @@ const MenuPanel = ({
   return (
     <>
       <div
-        className={`fixed right-0 top-0 z-40 h-screen w-[90%] overflow-hidden bg-th-bkg-2 transition duration-300 ease-in-out ${
+        className={`fixed right-0 top-0 z-40 h-screen w-[97%] overflow-hidden bg-th-bkg-2 transition duration-300 ease-in-out ${
           showMenu ? 'translate-x-0' : 'translate-x-full'
         }`}
       >
-        <div className="flex justify-end px-6 py-3">
-          <IconButton onClick={() => setShowMenu(false)} hideBg size="medium">
-            <XMarkIcon className="h-8 w-8" />
+        <div className="mb-6 flex justify-between space-x-4 px-4 py-3">
+          <ThemeToggle />
+          {connected ? <ConnectedMenu /> : <ConnectWalletButton />}
+          <IconButton onClick={() => setShowMenu(false)} size="large">
+            <XMarkIcon className="h-6 w-6" />
           </IconButton>
         </div>
         <div className="space-y-4 px-6">
@@ -141,9 +150,6 @@ const MenuPanel = ({
             FAQs
           </Link>
         </div>
-        <div className="absolute bottom-8 right-8">
-          <ThemeToggle />
-        </div>
       </div>
       <Transition
         as={Fragment}

components/wallet/ConnectWalletButton.tsx

@@ -40,7 +40,7 @@ export default function ConnectWalletButton() {
             select(lastWalletName || detectedWallets[0].adapter.name)
           }
         }}
-        className="raised-button-neutral group flex h-12 w-32 items-center after:rounded-full lg:w-44"
+        className="raised-button-neutral group flex h-12 w-48 items-center after:rounded-full sm:w-40 lg:w-44"
       >
         <div className="relative z-10 flex h-full items-center justify-center space-x-2 px-2.5 group-hover:mt-1 group-active:mt-2 md:px-4">
           {connected && mangoAccountLoading ? (

components/wallet/ConnectedMenu.tsx

@@ -16,7 +16,7 @@ const actions = mangoStore.getState().actions
 const ConnectedMenu = () => {
   const { t } = useTranslation('common')
   const { publicKey, disconnect, wallet } = useWallet()
-  const { isDesktop } = useViewport()
+  const { isDesktop, isMobile } = useViewport()
   const loadProfileDetails = mangoStore((s) => s.profile.loadDetails)
   const groupLoaded = mangoStore((s) => s.groupLoaded)
   const mangoAccountLoading = mangoStore((s) => s.mangoAccount.initialLoad)
@@ -49,11 +49,11 @@ const ConnectedMenu = () => {
       <Popover>
         <div className="relative">
           <Popover.Button
-            className={`raised-button-neutral group flex h-12 items-center justify-center after:rounded-full lg:justify-start ${
-              isDesktop ? 'w-44' : 'w-12'
+            className={`raised-button-neutral group flex h-12 items-center justify-start after:rounded-full sm:justify-center lg:justify-start ${
+              isMobile ? 'w-48' : isDesktop ? 'w-44' : 'w-12'
             } focus:outline-none`}
           >
-            <div className="flex items-center group-hover:mt-1 group-active:mt-2 lg:ml-1.5">
+            <div className="ml-1.5 flex items-center group-hover:mt-1 group-active:mt-2 sm:ml-0 lg:ml-1.5">
               {!mangoAccountLoading ? (
                 <ProfileImage
                   imageSize={!isDesktop ? '32' : '40'}
@@ -65,7 +65,7 @@ const ConnectedMenu = () => {
                   <Loading className="h-5 w-5 md:h-6 md:w-6" />
                 </div>
               )}
-              {!loadProfileDetails && isDesktop ? (
+              {!loadProfileDetails && (isDesktop || isMobile) ? (
                 <div className="ml-2.5 overflow-hidden text-left">
                   <p className="text-xs text-th-fgd-3">
                     {wallet?.adapter.name}