fix: navbar issues

web/src/components/Navbar.tsx

@@ -31,7 +31,6 @@ export function Navbar() {
   const _isDesktop = useMediaQuery("(min-width: 1024px)");
   const [isDesktop, setIsDesktop] = useState(true);
 
-  const pricingPlanFlagEnable = useFeatureFlagEnabled("pricing-plan");
 
   useEffect(() => {
     setIsDesktop(_isDesktop);
@@ -53,13 +52,6 @@ export function Navbar() {
               </SheetHeader>
               <div className="grid h-full grid-rows-[1fr_auto]">
                 <NavbarMenu className=" h-full" />
-                {/* <OrganizationSwitcher
-                  appearance={{
-                    elements: {
-                      rootBox: "flex items-center justify-center  z-[50]",
-                    },
-                  }}
-                /> */}
                 <Popover>
                   <PopoverTrigger asChild>
                     <Button variant="outline">
@@ -90,31 +82,13 @@ export function Navbar() {
       </div>
       <div className="flex flex-row items-center gap-2">
         {isDesktop && <NavbarMenu />}
-        {pricingPlanFlagEnable && (
-          <>
-            <Button
-              asChild
-              variant="link"
-              className="rounded-full aspect-square p-2 mr-4"
-            >
-              <a href="/pricing">Pricing</a>
-            </Button>
-            <Button
-              asChild
-              variant="link"
-              className="rounded-full aspect-square p-2 mr-4"
-            >
-              <a href="/usage">Usage</a>
-            </Button>
-          </>
-        )}
-        <Button
+        {/* <Button
           asChild
           variant="link"
           className="rounded-full aspect-square p-2 mr-4"
         >
           <a href="/docs">Docs</a>
-        </Button>
+        </Button> */}
         <UserButton
           afterSignOutUrl="/"
         />

web/src/components/NavbarMenu.tsx

@@ -6,6 +6,7 @@ import { cn } from "@/lib/utils";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useRouter } from "next/navigation";
+import { useFeatureFlagEnabled } from "posthog-js/react";
 import { useEffect, useState } from "react";
 import { useMediaQuery } from "usehooks-ts";
 
@@ -21,6 +22,8 @@ export function NavbarMenu({ className }: { className?: string }) {
 
   const router = useRouter();
 
+  const pricingPlanFlagEnable = useFeatureFlagEnabled("pricing-plan");
+
   const pages = [
     {
       name: "Workflows",
@@ -40,15 +43,31 @@ export function NavbarMenu({ className }: { className?: string }) {
     },
   ];
 
+  if (pricingPlanFlagEnable) {
+    pages.push({
+      name: "Pricing",
+      path: "/pricing",
+    })
+    pages.push({
+      name: "Usage",
+      path: "/usage",
+    })
+  }
+
+  pages.push({
+    name: "Docs",
+    path: "/docs",
+  })
+
   return (
     <div className={cn("mr-2", className)}>
       {/* <div className="w-full h-full absolute inset-x-0 top-0 flex items-center justify-center pointer-events-none"> */}
       {isDesktop && (
         <Tabs
           defaultValue={pathname}
-          className="w-[400px] flex pointer-events-auto"
+          className="w-fit flex pointer-events-auto"
         >
-          <TabsList className="grid w-full grid-cols-4">
+          <TabsList className=" w-full ">
             {pages.map((page) => (
               <TabsTrigger
                 key={page.name}