is sortable

web/src/components/ui/sidebar/Sidebar.tsx

@@ -4,14 +4,19 @@ import { SidebarCollapsible } from './SidebarCollapsible';
 import { SidebarItem } from './SidebarItem';
 
 export const Sidebar: React.FC<SidebarProps> = React.memo(
-  ({ header, content, footer, activeItem }) => {
+  ({ header, content, footer, activeItem, isSortable = false }) => {
     return (
       <div className="flex h-full flex-col overflow-hidden px-3.5 pt-4.5">
         <div className="flex flex-col space-y-4.5 overflow-hidden">
           <div className="mb-5"> {header}</div>
           <div className="flex flex-grow flex-col space-y-4.5 overflow-y-auto pb-3">
             {content.map((item, index) => (
-              <ContentSelector key={index} content={item} activeItem={activeItem} />
+              <ContentSelector
+                key={index}
+                content={item}
+                activeItem={activeItem}
+                isSortable={isSortable}
+              />
             ))}
           </div>
         </div>
@@ -26,9 +31,10 @@ Sidebar.displayName = 'Sidebar';
 const ContentSelector: React.FC<{
   content: SidebarProps['content'][number];
   activeItem: SidebarProps['activeItem'];
-}> = React.memo(({ content, activeItem }) => {
+  isSortable: SidebarProps['isSortable'];
+}> = React.memo(({ content, activeItem, isSortable }) => {
   if (isSidebarGroup(content)) {
-    return <SidebarCollapsible {...content} activeItem={activeItem} />;
+    return <SidebarCollapsible {...content} activeItem={activeItem} isSortable={isSortable} />;
   }
 
   return <SidebarList items={content.items} activeItem={activeItem} />;

web/src/components/ui/sidebar/SidebarCollapsible.tsx

@@ -40,7 +40,15 @@ const SidebarTrigger: React.FC<SidebarTriggerProps> = React.memo(({ label, isOpe
 SidebarTrigger.displayName = 'SidebarTrigger';
 
 export const SidebarCollapsible: React.FC<ISidebarGroup & { activeItem?: string }> = React.memo(
-  ({ label, items, activeItem, variant = 'collapsible', icon, defaultOpen = true }) => {
+  ({
+    label,
+    items,
+    isSortable = false,
+    activeItem,
+    variant = 'collapsible',
+    icon,
+    defaultOpen = true
+  }) => {
     const [isOpen, setIsOpen] = React.useState(defaultOpen);
 
     return (

web/src/components/ui/sidebar/interfaces.ts

@@ -17,6 +17,7 @@ export interface ISidebarGroup {
   items: ISidebarItem[];
   variant?: 'collapsible' | 'icon'; //default is collapsible
   defaultOpen?: boolean; //will default to true
+  isSortable?: boolean;
 }
 
 export interface ISidebarList {
@@ -30,4 +31,5 @@ export interface SidebarProps {
   content: SidebarContent[];
   footer?: React.ReactNode;
   activeItem: string;
+  isSortable?: boolean;
 }