rename verticalnav to collapsiblemenu

frontend/app/element/collapsiblemenu.less

@@ -3,35 +3,35 @@
 
 @import "../mixins.less";
 
-.verticalnav {
+.collapsible-menu {
     list-style: none;
     padding: 0;
 }
 
-.verticalnav-item {
+.collapsible-menu-item {
     padding: 10px;
     cursor: pointer;
     user-select: none;
     padding: 0;
 }
 
-.verticalnav-item-button {
+.collapsible-menu-item-button {
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 100%;
 }
 
-.verticalnav-item-content {
+.collapsible-menu-item-content {
     display: flex;
     align-items: center;
 }
 
-.verticalnav-item-icon {
+.collapsible-menu-item-icon {
     margin-right: 10px; /* Space between icon and text */
 }
 
-.verticalnav-item-text {
+.collapsible-menu-item-text {
     .ellipsis();
     text-decoration: none;
 }
@@ -49,7 +49,7 @@
     display: none;
 }
 
-.verticalnav-item-button {
+.collapsible-menu-item-button {
     padding: 10px;
     color: var(--main-text-color);
 
@@ -59,6 +59,6 @@
     }
 }
 
-.verticalnav-item-button.clickable:hover {
+.collapsible-menu-item-button.clickable:hover {
     background-color: #f0f0f0;
 }

frontend/app/element/collapsiblemenu.stories.tsx

@@ -3,13 +3,11 @@
 
 import { Meta, StoryObj } from "@storybook/react";
 import { Avatar } from "./avatar";
-import { VerticalNav } from "./verticalnav"; // Updated import to use VerticalNav
+import { CollapsibleMenu } from "./collapsiblemenu";
 
-import "./verticalnav.less"; // Updated stylesheet import
+const meta: Meta<typeof CollapsibleMenu> = {
-
+    title: "Elements/CollapsibleMenu",
-const meta: Meta<typeof VerticalNav> = {
+    component: CollapsibleMenu,
-    title: "Elements/VerticalNav", // Updated title to reflect the component name change
-    component: VerticalNav,
     argTypes: {
         items: { control: "object" },
         renderItem: { control: false },
@@ -52,7 +50,6 @@ const nestedItems = [
         icon: <i className="fa-sharp fa-solid fa-inbox"></i>,
         onClick: () => console.log("Inbox clicked"),
         subItems: [
-            // Updated `children` to `subItems` to match the new type
             {
                 label: "Starred",
                 icon: <i className="fa-sharp fa-solid fa-star"></i>,
@@ -80,7 +77,7 @@ const nestedItems = [
 const customRenderItem = (
     item: MenuItem,
     isOpen: boolean,
-    handleClick: (e: React.MouseEvent<any>, item: MenuItem, itemKey: string) => void // Updated to pass the correct signature
+    handleClick: (e: React.MouseEvent<any>, item: MenuItem, itemKey: string) => void
 ) => (
     <div className="custom-list-item">
         <span className="custom-list-item-icon" onClick={(e) => handleClick(e, item, `${item.label}`)}>
@@ -99,7 +96,7 @@ export const Default: Story = {
     },
     render: (args) => (
         <Container>
-            <VerticalNav {...args} />
+            <CollapsibleMenu {...args} />
         </Container>
     ),
 };
@@ -110,7 +107,7 @@ export const NestedList: Story = {
     },
     render: (args) => (
         <Container>
-            <VerticalNav {...args} />
+            <CollapsibleMenu {...args} />
         </Container>
     ),
 };
@@ -122,7 +119,7 @@ export const CustomRender: Story = {
     },
     render: (args) => (
         <Container>
-            <VerticalNav {...args} />
+            <CollapsibleMenu {...args} />
         </Container>
     ),
 };
@@ -133,7 +130,7 @@ export const WithClickHandlers: Story = {
     },
     render: (args) => (
         <Container>
-            <VerticalNav {...args} />
+            <CollapsibleMenu {...args} />
         </Container>
     ),
 };
@@ -144,7 +141,7 @@ export const NestedWithClickHandlers: Story = {
     },
     render: (args) => (
         <Container>
-            <VerticalNav {...args} />
+            <CollapsibleMenu {...args} />
         </Container>
     ),
 };
@@ -171,14 +168,3 @@ const avatarItems = [
         onClick: () => console.log("Alice Lambert clicked"),
     },
 ];
-
-export const WithAvatars: Story = {
-    args: {
-        items: avatarItems,
-    },
-    render: (args) => (
-        <Container>
-            <VerticalNav {...args} /> {/* Updated to use VerticalNav */}
-        </Container>
-    ),
-};

frontend/app/element/collapsiblemenu.tsx

@@ -3,7 +3,7 @@
 
 import clsx from "clsx";
 import React, { memo, useState } from "react";
-import "./verticalnav.less";
+import "./collapsiblemenu.less";
 
 interface VerticalNavProps {
     items: MenuItem[];
@@ -15,7 +15,7 @@ interface VerticalNavProps {
     ) => React.ReactNode;
 }
 
-const VerticalNav = memo(({ items, className, renderItem }: VerticalNavProps) => {
+const CollapsibleMenu = memo(({ items, className, renderItem }: VerticalNavProps) => {
     const [open, setOpen] = useState<{ [key: string]: boolean }>({});
 
     // Helper function to generate a unique key for each item based on its path in the hierarchy
@@ -34,19 +34,19 @@ const VerticalNav = memo(({ items, className, renderItem }: VerticalNavProps) =>
         const hasChildren = item.subItems && item.subItems.length > 0;
 
         return (
-            <li key={itemKey} className="verticalnav-item">
+            <li key={itemKey} className="collapsible-menu-item">
                 {renderItem ? (
                     renderItem(item, isOpen, (e) => handleClick(e, item, itemKey))
                 ) : (
-                    <div className="verticalnav-item-button" onClick={(e) => handleClick(e, item, itemKey)}>
+                    <div className="collapsible-menu-item-button" onClick={(e) => handleClick(e, item, itemKey)}>
                         <div
-                            className={clsx("verticalnav-item-content", {
+                            className={clsx("collapsible-menu-item-content", {
                                 "has-children": hasChildren,
                                 "is-open": isOpen && hasChildren,
                             })}
                         >
-                            {item.icon && <div className="verticalnav-item-icon">{item.icon}</div>}
+                            {item.icon && <div className="collapsible-menu-item-icon">{item.icon}</div>}
-                            <div className="verticalnav-item-text">{item.label}</div>
+                            <div className="collapsible-menu-item-text">{item.label}</div>
                         </div>
                         {hasChildren && (
                             <i className={`fa-sharp fa-solid ${isOpen ? "fa-angle-up" : "fa-angle-down"}`}></i>
@@ -65,12 +65,12 @@ const VerticalNav = memo(({ items, className, renderItem }: VerticalNavProps) =>
     };
 
     return (
-        <ul className={clsx("verticalnav", className)} role="navigation">
+        <ul className={clsx("collapsible-menu", className)} role="navigation">
             {items.map((item, index) => renderListItem(item, index, "root"))}
         </ul>
     );
 });
 
-VerticalNav.displayName = "VerticalNav";
+CollapsibleMenu.displayName = "CollapsibleMenu";
 
-export { VerticalNav };
+export { CollapsibleMenu };

frontend/app/view/chat/channels.tsx

@@ -1,10 +1,10 @@
 // Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
-import { VerticalNav } from "@/app/element/verticalnav";
+import { CollapsibleMenu } from "@/app/element/collapsiblemenu";
 import "./channels.less";
 
 const Channels = ({ channels }: { channels: MenuItem[] }) => {
-    return <VerticalNav className="channel-list" items={channels}></VerticalNav>;
+    return <CollapsibleMenu className="channel-list" items={channels}></CollapsibleMenu>;
 };
 
 export { Channels };