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>

web/src/components/ui/sheet.tsx

@@ -1,19 +1,18 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import { cn } from "@/lib/utils";
-import * as SheetPrimitive from "@radix-ui/react-dialog"
+import * as SheetPrimitive from "@radix-ui/react-dialog";
-import { cva, type VariantProps } from "class-variance-authority"
+import { cva, type VariantProps } from "class-variance-authority";
-import { X } from "lucide-react"
+import { X } from "lucide-react";
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+const Sheet = SheetPrimitive.Root;
 
-const Sheet = SheetPrimitive.Root
+const SheetTrigger = SheetPrimitive.Trigger;
 
-const SheetTrigger = SheetPrimitive.Trigger
+const SheetClose = SheetPrimitive.Close;
 
-const SheetClose = SheetPrimitive.Close
+const SheetPortal = SheetPrimitive.Portal;
-
-const SheetPortal = SheetPrimitive.Portal
 
 const SheetOverlay = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Overlay>,
@@ -27,8 +26,8 @@ const SheetOverlay = React.forwardRef<
     {...props}
     ref={ref}
   />
-))
+));
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
   "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
@@ -47,7 +46,7 @@ const sheetVariants = cva(
       side: "right",
     },
   }
-)
+);
 
 interface SheetContentProps
   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
@@ -71,8 +70,8 @@ const SheetContent = React.forwardRef<
       </SheetPrimitive.Close>
     </SheetPrimitive.Content>
   </SheetPortal>
-))
+));
-SheetContent.displayName = SheetPrimitive.Content.displayName
+SheetContent.displayName = SheetPrimitive.Content.displayName;
 
 const SheetHeader = ({
   className,
@@ -85,8 +84,8 @@ const SheetHeader = ({
     )}
     {...props}
   />
-)
+);
-SheetHeader.displayName = "SheetHeader"
+SheetHeader.displayName = "SheetHeader";
 
 const SheetFooter = ({
   className,
@@ -99,8 +98,8 @@ const SheetFooter = ({
     )}
     {...props}
   />
-)
+);
-SheetFooter.displayName = "SheetFooter"
+SheetFooter.displayName = "SheetFooter";
 
 const SheetTitle = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Title>,
@@ -111,8 +110,8 @@ const SheetTitle = React.forwardRef<
     className={cn("text-lg font-semibold text-foreground", className)}
     {...props}
   />
-))
+));
-SheetTitle.displayName = SheetPrimitive.Title.displayName
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
 
 const SheetDescription = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Description>,
@@ -123,8 +122,8 @@ const SheetDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
+));
-SheetDescription.displayName = SheetPrimitive.Description.displayName
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
 
 export {
   Sheet,
@@ -137,4 +136,4 @@ export {
   SheetFooter,
   SheetTitle,
   SheetDescription,
-}
+};