fix: mobile unable to change org

web/src/components/Navbar.tsx

@@ -2,6 +2,11 @@
 
 import { NavbarMenu } from "@/components/NavbarMenu";
 import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import {
   Sheet,
   SheetContent,
@@ -9,13 +14,19 @@ import {
   SheetTitle,
   SheetTrigger,
 } from "@/components/ui/sheet";
-import { OrganizationSwitcher, UserButton } from "@clerk/nextjs";
+import {
+  OrganizationList,
+  OrganizationSwitcher,
+  UserButton,
+  useOrganization,
+} from "@clerk/nextjs";
 import { Github, Menu } from "lucide-react";
 import meta from "next-gen/config";
 import { useEffect, useState } from "react";
 import { useMediaQuery } from "usehooks-ts";
 
 export function Navbar() {
+  const { organization } = useOrganization();
   const _isDesktop = useMediaQuery("(min-width: 1024px)");
   const [isDesktop, setIsDesktop] = useState(true);
   useEffect(() => {
@@ -37,13 +48,24 @@ export function Navbar() {
               </SheetHeader>
               <div className="grid h-full grid-rows-[1fr_auto]">
                 <NavbarMenu className=" h-full" />
-                <OrganizationSwitcher
+                {/* <OrganizationSwitcher
                   appearance={{
                     elements: {
-                      rootBox: "flex items-center justify-center",
+                      rootBox: "flex items-center justify-center  z-[50]",
                     },
                   }}
-                />
+                /> */}
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <Button variant="outline">
+                      Organization
+                      {organization?.name && ` (${organization?.name})`}
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-80 border-0 bg-none shadow-none">
+                    <OrganizationList />
+                  </PopoverContent>
+                </Popover>
               </div>
             </SheetContent>
           </Sheet>