⭐ feat: add cheveron lucid icon and initiate popovercontent.

src/components/sidebar/menu-options.tsx

@@ -10,12 +10,13 @@ import {
 import { useEffect, useMemo, useState } from 'react'
 import { Sheet, SheetContent, SheetTrigger } from '../ui/sheet'
 import { Button } from '../ui/button'
-import { Menu } from 'lucide-react'
+import { LucideChevronDownCircle, Menu } from 'lucide-react'
 import clsx from 'clsx'
 import { AspectRatio } from '../ui/aspect-ratio'
 import Image from 'next/image'
-import { Popover, PopoverTrigger } from '../ui/popover'
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'
 import Compass from '../icons/compass'
+// import { Command } from '../ui/command'
 
 type Props = {
 
@@ -100,9 +101,21 @@ const MenuOptions = ({
                                         {details.name}
                                     </div>
                                 </div>
+                                <div>
+                                    <LucideChevronDownCircle
+                                        size={16}
+                                        className="text-muted-foreground"
+                                    />
+                                </div>
 
                             </Button>
                         </PopoverTrigger>
+                        <PopoverContent className="w-80 h-80 mt-4 z-[200]">
+                            {/* <Command>
+
+                            </Command> */}
+
+                        </PopoverContent>
                     </Popover>
                 </div>
             </SheetContent>

src/components/ui/command.tsx

@@ -0,0 +1,159 @@
+// 'use client'
+
+// import * as React from 'react'
+// import { type DialogProps } from '@radix-ui/react-dialog'
+// import { Command as CommandPrimitive } from 'cmdk'
+// import { Search } from 'lucide-react'
+
+// import { cn } from '@/lib/utils'
+// import { Dialog, DialogContent } from '@/components/ui/dialog'
+
+// const Command = React.forwardRef<
+//     React.ElementRef<typeof CommandPrimitive>,
+//     React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+// >(({ className, ...props }, ref) => (
+//     <CommandPrimitive
+//         ref={ref}
+//         className={cn(
+//             'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
+//             className
+//         )}
+//         {...props}
+//     />
+// ))
+// Command.displayName = CommandPrimitive.displayName
+
+// interface CommandDialogProps extends DialogProps { }
+
+// const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+//     return (
+//         <Dialog {...props}>
+//             <DialogContent className="overflow-hidden p-0 shadow-lg">
+//                 <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+//                     {children}
+//                 </Command>
+//             </DialogContent>
+//         </Dialog>
+//     )
+// }
+
+// const CommandInput = React.forwardRef<
+//     React.ElementRef<typeof CommandPrimitive.Input>,
+//     React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+// >(({ className, ...props }, ref) => (
+//     <div
+//         className="flex items-center border-b dark:bg-muted rounded-md px-3"
+//         cmdk-input-wrapper=""
+//     >
+//         <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+//         <CommandPrimitive.Input
+//             ref={ref}
+//             className={cn(
+//                 'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+//                 className
+//             )}
+//             {...props}
+//         />
+//     </div>
+// ))
+
+// CommandInput.displayName = CommandPrimitive.Input.displayName
+
+// const CommandList = React.forwardRef<
+//     React.ElementRef<typeof CommandPrimitive.List>,
+//     React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+// >(({ className, ...props }, ref) => (
+//     <CommandPrimitive.List
+//         ref={ref}
+//         className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
+//         {...props}
+//     />
+// ))
+
+// CommandList.displayName = CommandPrimitive.List.displayName
+
+// const CommandEmpty = React.forwardRef<
+//     React.ElementRef<typeof CommandPrimitive.Empty>,
+//     React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+// >((props, ref) => (
+//     <CommandPrimitive.Empty
+//         ref={ref}
+//         className="py-6 text-center text-sm"
+//         {...props}
+//     />
+// ))
+
+// CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+
+// const CommandGroup = React.forwardRef<
+//     React.ElementRef<typeof CommandPrimitive.Group>,
+//     React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+// >(({ className, ...props }, ref) => (
+//     <CommandPrimitive.Group
+//         ref={ref}
+//         className={cn(
+//             'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
+//             className
+//         )}
+//         {...props}
+//     />
+// ))
+
+// CommandGroup.displayName = CommandPrimitive.Group.displayName
+
+// const CommandSeparator = React.forwardRef<
+//     React.ElementRef<typeof CommandPrimitive.Separator>,
+//     React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+// >(({ className, ...props }, ref) => (
+//     <CommandPrimitive.Separator
+//         ref={ref}
+//         className={cn('-mx-1 h-px bg-border', className)}
+//         {...props}
+//     />
+// ))
+// CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+
+// //CHANGED:
+// const CommandItem = React.forwardRef<
+//     React.ElementRef<typeof CommandPrimitive.Item>,
+//     React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+// >(({ className, ...props }, ref) => (
+//     <CommandPrimitive.Item
+//         ref={ref}
+//         className={cn(
+//             'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-primary aria-selected:text-white aria-selected:font-bold  data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+//             className
+//         )}
+//         {...props}
+//     />
+// ))
+
+// CommandItem.displayName = CommandPrimitive.Item.displayName
+
+// const CommandShortcut = ({
+//     className,
+//     ...props
+// }: React.HTMLAttributes<HTMLSpanElement>) => {
+//     return (
+//         <span
+//             className={cn(
+//                 'ml-auto text-xs tracking-widest text-muted-foreground',
+//                 className
+//             )}
+//             {...props}
+//         />
+//     )
+// }
+// CommandShortcut.displayName = 'CommandShortcut'
+
+// export {
+//     Command,
+//     CommandDialog,
+//     CommandInput,
+//     CommandList,
+//     CommandEmpty,
+//     CommandGroup,
+//     CommandItem,
+//     CommandShortcut,
+//     CommandSeparator,
+// }