blixify-ui-web-mcp 0.1.49 → 0.1.50

package/lib/components/navigation/leftNav/README.md

@@ -97,6 +97,39 @@ const navigation = [
 />;
 ```
 
+##### Icon rail
+
+A narrow column of icons left of the sidebar — the two-level layout of tools like monday.com. The rail switches between whole areas of the app (a workspace tree, chat, agents, notifications); the sidebar beside it navigates inside the area that is open. Without `railItems` nothing changes.
+
+```jsx
+import { BellIcon, ChatBubbleLeftRightIcon, Cog6ToothIcon, Squares2X2Icon } from "@heroicons/react/24/outline";
+
+const [railId, setRailId] = useState("workspace");
+
+<LeftNav
+  railItems={[
+    { id: "workspace", name: "Workspace", icon: Squares2X2Icon },
+    { id: "chat", name: "Chat", icon: ChatBubbleLeftRightIcon, href: "/chat" },
+    { id: "notifications", name: "Alerts", icon: BellIcon, badge: 9 },
+  ]}
+  railFooterItems={[{ id: "settings", name: "Settings", icon: Cog6ToothIcon }]}
+  selectedRailId={railId}
+  handleRailOnClick={(id) => setRailId(id)}
+  {...otherProps}
+/>;
+```
+
+| Name               | Type                   | Description                                                                                      |
+| ------------------ | ---------------------- | ------------------------------------------------------------------------------------------------ |
+| `railItems`        | `RailItem[]`           | Icons at the top of the rail. Turns the rail on.                                                 |
+| `railFooterItems`  | `RailItem[]`           | Icons pinned to the bottom of the rail, for settings-type entries.                               |
+| `selectedRailId`   | `string`               | The `id` of the open area, highlighted.                                                          |
+| `handleRailOnClick`| `(id: string) => void` | Called with the item `id` on every click, link or not.                                           |
+
+`RailItem` is `{ id, name, icon, href?, badge? }`. With `href` the item is a link through the same `linkType` / `custom` as the sidebar; without it the item only reports `handleRailOnClick`. `badge` shows a count on the icon — `0`, empty or absent hides it, and a number over 99 reads `99+`.
+
+Below `lg` the rail moves into the mobile drawer as a row of icons above the sidebar's list.
+
 ##### Required props
 
 | Name                            | Type              | Description                                        |

package/lib/components/navigation/leftNav/leftNav.stories.tsx

@@ -1,11 +1,16 @@
 import {
+  BellIcon,
+  ChatBubbleLeftRightIcon,
+  Cog6ToothIcon,
+  CpuChipIcon,
   FolderIcon,
   FunnelIcon,
   HomeIcon,
+  Squares2X2Icon,
   UsersIcon,
 } from "@heroicons/react/24/outline";
 import React, { useState } from "react";
-import { LeftNav as LeftNavImpl, Navigation } from ".";
+import { LeftNav as LeftNavImpl, Navigation, RailItem } from ".";
 import { BarMove } from "../bars";
 import { StorySection } from "../../storyUtils";
 import Logo from "../../../assets/logo.png";
@@ -221,6 +226,74 @@ const workspaceNavigation = [
   },
 ];
 
+// INFO: the rail switches between whole areas; the sidebar beside it lists the
+// pages inside the area that is open
+const railItems: RailItem[] = [
+  { id: "workspace", name: "Workspace", icon: Squares2X2Icon },
+  { id: "chat", name: "Chat", icon: ChatBubbleLeftRightIcon },
+  { id: "agents", name: "Agents", icon: CpuChipIcon },
+  { id: "notifications", name: "Alerts", icon: BellIcon, badge: 9 },
+];
+
+// INFO: each area brings its own sidebar list
+const railNavigation: { [railId: string]: Navigation[] } = {
+  chat: [
+    {
+      id: "chat-new",
+      name: "New chat",
+      href: "/chat",
+      icon: ChatBubbleLeftRightIcon,
+    },
+    {
+      id: "chat-1",
+      name: "Quarterly sales recap",
+      href: "/chat/1",
+      icon: ChatBubbleLeftRightIcon,
+    },
+  ],
+  agents: [
+    {
+      id: "agent-1",
+      name: "Lead qualifier",
+      href: "/agents/1",
+      icon: CpuChipIcon,
+    },
+    {
+      id: "agent-2",
+      name: "Support triage",
+      href: "/agents/2",
+      icon: CpuChipIcon,
+    },
+  ],
+  notifications: [
+    { id: "note-all", name: "All", href: "/alerts", icon: BellIcon },
+    {
+      id: "note-unread",
+      name: "Unread",
+      href: "/alerts/unread",
+      icon: BellIcon,
+    },
+  ],
+  settings: [
+    {
+      id: "set-members",
+      name: "Members",
+      href: "/settings/members",
+      icon: UsersIcon,
+    },
+    {
+      id: "set-workspace",
+      name: "Workspace",
+      href: "/settings/workspace",
+      icon: Cog6ToothIcon,
+    },
+  ],
+};
+
+const railFooterItems: RailItem[] = [
+  { id: "settings", name: "Settings", icon: Cog6ToothIcon },
+];
+
 const renderLogo = (collapse?: boolean) => (
   <div className="flex items-center flex-shrink-0 px-6 cursor-pointer">
     <img
@@ -285,6 +358,8 @@ export const LeftNav = () => {
   // button, so each story needs its own open state for that button to work on
   // a phone
   const [mobileStoryId, setMobileStoryId] = useState("");
+  const [railId, setRailId] = useState("workspace");
+  const [darkRailId, setDarkRailId] = useState("workspace");
 
   const handleMobileMenu = (storyId: string) => ({
     leftNavMobileMenu: mobileStoryId === storyId,
@@ -639,6 +714,63 @@ export const LeftNav = () => {
         </div>
       </StorySection>
 
+      <StorySection
+        title="Icon Rail"
+        description="railItems adds a narrow column of icons left of the sidebar, the two-level layout of tools like monday.com: the rail switches between whole areas (workspace, chat, agents, alerts), the sidebar beside it navigates inside the open one. selectedRailId highlights the open area, badge shows a count (over 99 reads 99+), and railFooterItems sit at the bottom for settings-type entries. An item with href is a link; without one it only reports handleRailOnClick. Without railItems nothing changes. Below lg the rail moves into the drawer as a row of icons above the list — open the menu at phone width to see it."
+      >
+        <div className="w-full h-96 relative overflow-hidden border rounded-lg">
+          <LeftNavImpl
+            selectedId={workspaceSelectedId}
+            navigation={
+              railId === "workspace"
+                ? workspaceNavigation
+                : (railNavigation[railId] ?? [])
+            }
+            {...handleMobileMenu("story-rail")}
+            compactMode={true}
+            railItems={railItems}
+            railFooterItems={railFooterItems}
+            selectedRailId={railId}
+            handleRailOnClick={(id) => setRailId(id)}
+            handleBarsOnClick={(id) => setWorkspaceSelectedId(id)}
+            renderDashboardLogo={() => renderLogo()}
+            renderDashboardContent={() => (
+              <div className="p-6 text-sm text-gray-500">
+                {`Open area: ${railId}`}
+              </div>
+            )}
+            renderDashboardHeaderContent={renderHeader}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Icon Rail — Dark Mode"
+        description="The rail follows darkMode and navbarBgColor like the sidebar, so the two read as one surface."
+        dark
+      >
+        <div className="w-full h-96 relative overflow-hidden border border-gray-700 rounded-lg">
+          <LeftNavImpl
+            selectedId={selectedId}
+            navigation={navigation}
+            {...handleMobileMenu("story-rail-dark")}
+            darkMode={true}
+            railItems={railItems}
+            railFooterItems={railFooterItems}
+            selectedRailId={darkRailId}
+            handleRailOnClick={(id) => setDarkRailId(id)}
+            handleBarsOnClick={(id) => setSelectedId(id)}
+            renderDashboardLogo={() => renderLogo()}
+            renderDashboardContent={() => (
+              <div className="p-6 text-gray-400 text-sm">
+                {`Open area: ${darkRailId}`}
+              </div>
+            )}
+            renderDashboardHeaderContent={renderHeader}
+          />
+        </div>
+      </StorySection>
+
       <StorySection
         title="Transparent"
         description="transparent makes the TOP HEADER BAR see-through, dropping its background, shadow and bottom border so a page can run its own hero or image up under it — the same pair Header carries. mobileOpaque keeps that bar solid below lg, where it holds the hamburger and is the only way back to the nav. The sidebar itself is unaffected. Shown over a gradient page so the effect is visible."

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "blixify-ui-web-mcp",
-  "version": "0.1.49",
+  "version": "0.1.50",
   "license": "MIT",
   "main": "lib/mcp/server.js",
   "bin": {