🔧 update: sidebar menu-option, add sidebar items.

package.json

@@ -21,6 +21,7 @@
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-toast": "^1.1.5",

src/components/sidebar/menu-options.tsx

@@ -28,6 +28,8 @@ import Link from 'next/link'
 import CustomModal from '../global/custom-modal'
 import { useModal } from '@/providers/modal-provider'
 import SubAccountDetails from '../forms/subaccount-details'
+import { Separator } from '../ui/separator'
+import { icons } from '@/lib/constants'
 
 
 type Props = {
@@ -259,6 +261,41 @@ const MenuOptions = ({
 
                         </PopoverContent>
                     </Popover>
+                    <p className="text-muted-foreground text-xs mb-2">MENU LINKS</p>
+                    <Separator className="mb-4" />
+                    <nav className="relative">
+                        <Command className="rounded-lg overflow-visible bg-transparent">
+                            <CommandInput placeholder="Search..." />
+                            <CommandList className="py-4 overflow-visible">
+                                <CommandEmpty>No Results Found</CommandEmpty>
+                                <CommandGroup className="overflow-visible">
+                                    {sidebarOpt.map((sidebarOptions) => {
+                                        let val
+                                        const result = icons.find(
+                                            (icon) => icon.value === sidebarOptions.icon
+                                        )
+                                        if (result) {
+                                            val = <result.path />
+                                        }
+                                        return (
+                                            <CommandItem
+                                                key={sidebarOptions.id}
+                                                className="md:w-[320px] w-full"
+                                            >
+                                                <Link
+                                                    href={sidebarOptions.link}
+                                                    className="flex items-center gap-2 hover:bg-transparent rounded-md transition-all md:w-full w-[320px]"
+                                                >
+                                                    {val}
+                                                    <span>{sidebarOptions.name}</span>
+                                                </Link>
+                                            </CommandItem>
+                                        )
+                                    })}
+                                </CommandGroup>
+                            </CommandList>
+                        </Command>
+                    </nav>
                 </div>
             </SheetContent>
         </Sheet>

src/components/ui/separator.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+    React.ElementRef<typeof SeparatorPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+    (
+        { className, orientation = "horizontal", decorative = true, ...props },
+        ref
+    ) => (
+        <SeparatorPrimitive.Root
+            ref={ref}
+            decorative={decorative}
+            orientation={orientation}
+            className={cn(
+                "shrink-0 bg-border",
+                orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+                className
+            )}
+            {...props}
+        />
+    )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }