added coming soon popover

app/(app)/_layout/Sidebar.tsx

@@ -11,6 +11,12 @@ import {
 import { HiOutlineLightningBolt } from "react-icons/hi";
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 export default function Sidebar() {
   const navigation = [
@@ -20,6 +26,7 @@ export default function Sidebar() {
       label: "Home",
       icon: RiHome6Fill,
       current: true,
+      active: true,
     },
     {
       href: "",
@@ -27,6 +34,7 @@ export default function Sidebar() {
       label: "Explore",
       icon: RiCompassLine,
       current: false,
+      active: false,
     },
     {
       href: "",
@@ -34,6 +42,7 @@ export default function Sidebar() {
       label: "Messages",
       icon: RiQuestionAnswerLine,
       current: false,
+      active: false,
     },
     {
       href: "",
@@ -41,6 +50,7 @@ export default function Sidebar() {
       label: "Zap Flockstr",
       icon: HiOutlineLightningBolt,
       current: false,
+      active: true,
     },
   ];
   return (
@@ -48,24 +58,58 @@ export default function Sidebar() {
       <div className="fixed bottom-0 flex h-[calc(100svh_-_var(--header-height))] w-[var(--sidebar-closed-width)] flex-col border-r xl:w-[var(--sidebar-open-width)]">
         <div className="flex flex-1 flex-col">
           <div className="flex flex-col items-stretch gap-y-2 p-4">
-            {navigation.map((item) => (
+            {navigation.map((item) => {
-              <Link
+              if (item.active) {
-                key={item.name}
+                return (
-                href={item.href}
+                  <Link
-                className={cn(
+                    key={item.name}
-                  "center group relative min-h-[48px] min-w-[48px] rounded-lg hover:bg-muted xl:justify-start xl:gap-x-4 xl:p-2.5",
+                    href={item.href}
-                  item.current
+                    className={cn(
-                    ? "text-foreground"
+                      "center group relative min-h-[48px] min-w-[48px] rounded-lg hover:bg-muted xl:justify-start xl:gap-x-4 xl:p-2.5",
-                    : "text-muted-foreground hover:text-foreground",
+                      item.current
-                )}
+                        ? "text-foreground"
-              >
+                        : "text-muted-foreground hover:text-foreground",
-                <item.icon
+                    )}
-                  className={cn("h-6 w-6 shrink-0")}
+                  >
-                  aria-hidden="true"
+                    <item.icon
-                />
+                      className={cn("h-6 w-6 shrink-0")}
-                <span className="hidden text-base xl:flex">{item.label}</span>
+                      aria-hidden="true"
-              </Link>
+                    />
-            ))}
+                    <span className="hidden text-base xl:flex">
+                      {item.label}
+                    </span>
+                  </Link>
+                );
+              } else {
+                return (
+                  <TooltipProvider key={item.name}>
+                    <Tooltip delayDuration={100}>
+                      <TooltipTrigger>
+                        <div
+                          className={cn(
+                            "center group relative min-h-[48px] min-w-[48px] rounded-lg hover:bg-muted xl:justify-start xl:gap-x-4 xl:p-2.5",
+                            item.current
+                              ? "text-foreground"
+                              : "text-muted-foreground hover:text-foreground",
+                          )}
+                        >
+                          <item.icon
+                            className={cn("h-6 w-6 shrink-0")}
+                            aria-hidden="true"
+                          />
+                          <span className="hidden text-base xl:flex">
+                            {item.label}
+                          </span>
+                        </div>
+                      </TooltipTrigger>
+                      <TooltipContent align="start">
+                        <p>Coming Soon</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                );
+              }
+            })}
             <div className="center py-2 xl:justify-start">
               <Button size={"icon"} className="xl:hidden">
                 <RiAddFill className="h-6 w-6" />

components/ui/tooltip.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package.json

@@ -26,6 +26,7 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-tooltip": "^1.0.7",
     "@tailwindcss/container-queries": "^0.1.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",