Fixed navbar on mobile

Author: luloxi

packages/nextjs/components/Header.tsx

@@ -3,7 +3,6 @@
 import React from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { SwitchTheme } from "./SwitchTheme";
 import { PunkConnectButton } from "./punk-society/BasedConnectButton";
 import { ConfigMenu } from "./punk-society/ConfigMenu";
 import { FaucetButton } from "./scaffold-eth";
@@ -20,7 +19,6 @@ export const Header = () => {
     <div className="flex lg:sticky  top-0 navbar bg-base-100 min-h-0 flex-shrink-0 justify-between z-20 px-0 sm:px-2">
       <div className="navbar-start ml-4 lg:ml-2">
         <div className="flex lg:hidden">
-          <SwitchTheme />
           <div className="flex justify-center items-center ml-8 lg:ml-0">
             <Link href="/" passHref>
               <span className="inline-flex items-center gap-2">
@@ -130,9 +128,6 @@ export const Header = () => {
           <div className="">
             <ConfigMenu />
           </div>
-          <div className="hidden lg:flex ">
-            <SwitchTheme />
-          </div>
         </div>
       </div>
     </div>

packages/nextjs/components/SwitchTheme.tsx

@@ -21,9 +21,10 @@ export const SwitchTheme = ({ className }: { className?: string }) => {
   if (!mounted) return null;
 
   return (
-    <div className={`flex space-x-2 h-8 items-center justify-center text-sm ${className}`}>
-      <button onClick={handleToggle} className="swap swap-rotate">
+    <div className={`flex space-x-2 h-8 items-center justify-start w-full ml-3 text-sm ${className}`}>
+      <button onClick={handleToggle} className="swap swap-rotate flex flex-row gap-2 justify-start items-center">
         {isDarkMode ? <MoonIcon className="h-5 w-5" /> : <SunIcon className="h-5 w-5" />}
+        <span>Switch theme</span>
       </button>
     </div>
   );

packages/nextjs/components/punk-society/ConfigMenu/AddressInfoDropdown.tsx

@@ -10,6 +10,7 @@ import {
   QrCodeIcon,
 } from "@heroicons/react/24/outline";
 import { LanguageIcon } from "@heroicons/react/24/solid";
+import { SwitchTheme } from "~~/components/SwitchTheme";
 import { useOutsideClick } from "~~/hooks/scaffold-eth";
 import { getTargetNetworks } from "~~/utils/scaffold-eth";
 
@@ -48,7 +49,9 @@ export const AddressInfoDropdown = ({ blockExplorerAddressLink }: AddressInfoDro
           className="dropdown-content menu z-[2] p-2 mt-2 shadow-center shadow-accent bg-base-200 rounded-box gap-1"
         >
           <NetworkOptions hidden={!selectingNetwork} />
-
+          <div className="hidden lg:flex items-center justify-center ">
+            <SwitchTheme />
+          </div>
           <li className={selectingNetwork ? "hidden" : ""}>
             <label
               htmlFor="qrcode-modal"