@orsetra/shared-ui 1.7.7 → 1.8.0

package/components/layout/layout-container.tsx

@@ -60,6 +60,7 @@ function LayoutContent({
         main.map((item) => ({
           id: item.id,
           label: item.label,
+          description: item.description,
           icon: resolveIcon(item.icon),
           href: item.href,
         }))
@@ -71,6 +72,7 @@ function LayoutContent({
         menus[key] = subMenu.items.map((item) => ({
           id: item.id,
           name: item.label,
+          description: item.description,
           href: item.href,
           icon: resolveIcon(item.icon),
         }))

package/components/layout/sidebar/data.tsx

@@ -41,16 +41,18 @@ import {
 export interface MainMenuItem {
   id: string
   label: string
+  description?: string
   icon: LucideIcon
   href: string
 }
 
 export interface SubMenuItem {
-  id:       string
-  name:     string
-  href:     string
-  icon:     LucideIcon
-  applied?: boolean
+  id:          string
+  name:        string
+  description?: string
+  href:        string
+  icon:        LucideIcon
+  applied?:    boolean
 }
 
 export interface SidebarMenus {
@@ -72,15 +74,17 @@ export interface Project {
 export interface ApiMainMenuItem {
   id: string
   label: string
+  description?: string
   icon: string
   href: string
 }
 
 export interface ApiSubMenuItem {
-  id: string
-  label: string
-  href: string
-  icon: string
+  id:          string
+  label:       string
+  description?: string
+  href:        string
+  icon:        string
 }
 
 export interface ApiSubMenu {

package/components/layout/sidebar/main-sidebar-flyout.tsx

@@ -0,0 +1,72 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../lib/utils"
+import type { MainMenuItem, SubMenuItem } from "./data"
+
+interface MainSidebarFlyoutProps {
+  item: MainMenuItem
+  /** Sub-items with hrefs already resolved by the parent */
+  subItems: SubMenuItem[]
+  onMouseEnter: () => void
+  onMouseLeave: () => void
+}
+
+export function MainSidebarFlyout({
+  item,
+  subItems,
+  onMouseEnter,
+  onMouseLeave,
+}: MainSidebarFlyoutProps) {
+  const Icon = item.icon
+
+  return (
+    <div
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      className="h-full flex flex-col flex-shrink-0 overflow-hidden bg-gray-50 border-r border-ui-border shadow-[4px_0_20px_-4px_rgba(0,0,0,0.10)] w-72 lg:w-80"
+    >
+      {/* ── Section label — same style as secondary sidebar section header ── */}
+      <div className="h-8 lg:h-10 flex items-center px-3 lg:px-4 flex-shrink-0 gap-2">
+        <Icon className="h-3.5 w-3.5 flex-shrink-0" style={{ color: "#4589ff" }} />
+        <h2 className="text-xs font-semibold text-text-secondary capitalize tracking-wide truncate flex-1">
+          {item.label}
+        </h2>
+      </div>
+
+      {/* ── Description ─────────────────────────────────────────────────────── */}
+      {item.description && (
+        <p className="px-3 lg:px-4 pb-3 text-xs text-text-secondary leading-relaxed">
+          {item.description}
+        </p>
+      )}
+
+      {/* ── Nav items — identical to secondary sidebar ───────────────────────── */}
+      <nav className="flex-1 overflow-y-auto px-2 lg:px-3 py-3 lg:py-4 space-y-0.5 lg:space-y-1">
+        {subItems.map((sub) => {
+          const SubIcon = sub.icon
+          return (
+            <a
+              key={sub.id}
+              href={sub.href}
+              className={cn(
+                "flex items-start transition-colors border-l-4",
+                "px-2 lg:px-3 py-2 gap-x-3",
+                "text-text-secondary hover:bg-ui-background hover:text-text-primary",
+                "border-transparent hover:border-interactive",
+              )}
+            >
+              <SubIcon className="h-4 w-4 flex-shrink-0 mt-0.5" style={{ color: "#4589ff" }} />
+              <div className="min-w-0 flex-1">
+                <p className="text-sm leading-snug truncate">{sub.name}</p>
+                {sub.description && (
+                  <p className="text-xs text-text-secondary leading-relaxed mt-0.5 line-clamp-2">{sub.description}</p>
+                )}
+              </div>
+            </a>
+          )
+        })}
+      </nav>
+    </div>
+  )
+}

package/components/layout/sidebar/main-sidebar.tsx

@@ -2,11 +2,12 @@
 
 import * as React from "react"
 import { cn } from "../../../lib/utils"
-
 import { Button } from "../../ui/button"
 import { Logo } from "../../ui/logo"
 import { type MainMenuItem, type SidebarMenus } from "./data"
 import { X, Menu, ChevronDown, ChevronRight } from "lucide-react"
+import { useIsMobile } from "../../../hooks/use-mobile"
+import { MainSidebarFlyout } from "./main-sidebar-flyout"
 
 export type SidebarMode = 'expanded' | 'minimized' | 'hidden'
 
@@ -34,27 +35,50 @@ export function MainSidebar({
   mainMenuItems = [],
 }: MainSidebarProps) {
   const isMinimized = mode === 'minimized'
+  const isMobile = useIsMobile()
+
+  // Accordion — mobile only
   const [expandedMenu, setExpandedMenu] = React.useState<string | null>(null)
+  React.useEffect(() => { if (!isOpen) setExpandedMenu(null) }, [isOpen])
+
+  // Fly-out — desktop only
+  const [hoveredItem, setHoveredItem] = React.useState<MainMenuItem | null>(null)
+  const closeTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)
+  React.useEffect(() => { if (isMobile) setHoveredItem(null) }, [isMobile])
+
+  const cancelCloseTimer = () => {
+    if (closeTimerRef.current) {
+      clearTimeout(closeTimerRef.current)
+      closeTimerRef.current = null
+    }
+  }
 
-  // Reset accordion when sidebar closes
-  React.useEffect(() => {
-    if (!isOpen) setExpandedMenu(null)
-  }, [isOpen])
+  const startCloseTimer = () => {
+    cancelCloseTimer()
+    closeTimerRef.current = setTimeout(() => setHoveredItem(null), 150)
+  }
+
+  const handleNavItemMouseEnter = (item: MainMenuItem) => {
+    if (isMobile) return
+    const hasSubMenu = (sidebarMenus[item.id]?.length ?? 0) > 0
+    if (!hasSubMenu) return
+    cancelCloseTimer()
+    setHoveredItem(item)
+  }
 
   const handleMenuClick = (item: MainMenuItem) => {
     const menuId = item.id
     const hasSubMenu = (sidebarMenus[menuId]?.length ?? 0) > 0
 
-    // Accordion: expand/collapse inline for any non-minimized mode
-    if (!isMinimized && hasSubMenu) {
+    // Mobile: toggle accordion
+    if (isMobile && !isMinimized && hasSubMenu) {
       setExpandedMenu((prev) => (prev === menuId ? null : menuId))
       return
     }
 
+    // Desktop: navigate directly
     onMenuSelect(menuId)
-    if (!isMinimized && onSecondarySidebarOpen) {
-      onSecondarySidebarOpen()
-    }
+    if (!isMinimized && onSecondarySidebarOpen) onSecondarySidebarOpen()
 
     if (item.href) {
       const path = item.href.startsWith('http://') || item.href.startsWith('https://')
@@ -63,9 +87,7 @@ export function MainSidebar({
       window.location.href = path
     }
 
-    if (!isMinimized) {
-      onToggle()
-    }
+    if (!isMinimized) onToggle()
   }
 
   const buildSubItemHref = (menuId: string, href: string): string => {
@@ -87,119 +109,146 @@ export function MainSidebar({
 
   return (
     <>
+      {/* Mobile backdrop — behind the nav+flyout container */}
       {isOpen && !isMinimized && (
-        <div
-          className="fixed inset-0 bg-black/40 z-40"
-          onClick={onToggle}
-        />
+        <div className="fixed inset-0 bg-black/40 z-40" onClick={onToggle} />
       )}
 
+      {/*
+        Single fixed flex container — nav + flyout are flex children.
+        The flyout is never "in front of" the nav; it's always to its right.
+      */}
       <div className={cn(
-        "fixed left-0 top-0 h-full bg-white border-r border-ui-border z-50 transform transition-all duration-300 ease-in-out overflow-y-auto",
-        isMinimized ? "w-16" : "w-56 lg:w-60 xl:w-64 shadow-xl",
-        isMinimized
-          ? "translate-x-0"
-          : (isOpen ? "translate-x-0" : "-translate-x-full")
+        "fixed left-0 top-0 h-full z-50 flex",
+        "transform transition-all duration-300 ease-in-out",
+        isMinimized ? "translate-x-0" : (isOpen ? "translate-x-0" : "-translate-x-full"),
       )}>
+
+        {/* ── Main nav panel ────────────────────────────────────────────────── */}
         <div className={cn(
-          "flex items-center h-14 border-b border-ui-border bg-white sticky top-0 z-10",
-          isMinimized ? "justify-center px-2" : "justify-between px-3 lg:px-4"
+          "h-full flex flex-col bg-white border-r border-ui-border overflow-y-auto flex-shrink-0",
+          isMinimized ? "w-16" : "w-56 lg:w-60 xl:w-64",
+          // Shadow only when flyout is not open (avoid double shadow)
+          !hoveredItem && !isMinimized && "shadow-xl",
         )}>
-          {!isMinimized && <Logo className="text-2xl font-semibold text-text-primary" href={main_base_url} />}
-          {isMinimized ? (
-            <Logo className="text-xl font-semibold text-text-primary" iconOnly href={main_base_url} />
-          ) : (
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={onToggle}
-              className="h-8 w-8 p-0 hover:bg-ui-background text-text-secondary"
-            >
-              <X className="h-4 w-4" />
-            </Button>
-          )}
-        </div>
-
-        <nav className={cn("space-y-0.5 lg:space-y-1", isMinimized ? "p-2" : "p-2 lg:p-3")}>
-          {mainMenuItems.map((item) => {
-            const Icon = item.icon
-            const hasSubMenu = (sidebarMenus[item.id]?.length ?? 0) > 0
-            const isActive = currentMenu === item.id
-            const isExpanded = expandedMenu === item.id
-
-            const itemHref = !hasSubMenu && item.href
-              ? (item.href.startsWith('http://') || item.href.startsWith('https://')
-                  ? new URL(item.href).pathname
-                  : item.href)
-              : undefined
-
-            const itemClassName = cn(
-              "w-full flex items-center text-left transition-all duration-150 font-medium",
-              isMinimized ? "justify-center p-2 lg:p-3" : "gap-2 lg:gap-3 px-2 lg:px-3 py-1.5 lg:py-2",
-              isActive
-                ? "bg-interactive/10 text-interactive border-l-4 border-interactive"
-                : "text-text-primary hover:bg-ui-background border-l-4 border-transparent"
-            )
-
-            const itemContent = (
+          {/* Header */}
+          <div className={cn(
+            "flex items-center h-14 border-b border-ui-border bg-white sticky top-0 z-10 flex-shrink-0",
+            isMinimized ? "justify-center px-2" : "justify-between px-3 lg:px-4",
+          )}>
+            {isMinimized ? (
+              <Logo className="text-xl font-semibold text-text-primary" iconOnly href={main_base_url} />
+            ) : (
               <>
-                <Icon className={cn(
-                  "h-5 w-5 flex-shrink-0",
-                  isActive ? "text-interactive" : "text-text-secondary"
-                )} />
-                {!isMinimized && (
-                  <>
-                    <span className="text-base flex-1">{item.label}</span>
-                    {hasSubMenu && (
-                      isExpanded
-                        ? <ChevronDown className="h-4 w-4 text-text-secondary flex-shrink-0" />
-                        : <ChevronRight className="h-4 w-4 text-text-secondary flex-shrink-0" />
-                    )}
-                  </>
-                )}
+                <Logo className="text-2xl font-semibold text-text-primary" href={main_base_url} />
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={onToggle}
+                  className="h-8 w-8 p-0 hover:bg-ui-background text-text-secondary"
+                >
+                  <X className="h-4 w-4" />
+                </Button>
               </>
-            )
-
-            return (
-              <div key={item.id}>
-                {itemHref ? (
-                  <a
-                    href={itemHref}
-                    className={itemClassName}
-                    title={isMinimized ? item.label : undefined}
-                  >
-                    {itemContent}
-                  </a>
-                ) : (
-                  <button
-                    onClick={() => handleMenuClick(item)}
-                    className={itemClassName}
-                    title={isMinimized ? item.label : undefined}
-                  >
-                    {itemContent}
-                  </button>
-                )}
-
-                {/* Inline accordion sub-items */}
-                {!isMinimized && isExpanded && hasSubMenu && (
-                  <div className="pl-3 lg:pl-4 pb-1">
-                    {sidebarMenus[item.id].map((subItem) => (
-                      <a
-                        key={subItem.id}
-                        href={buildSubItemHref(item.id, subItem.href)}
-                        onClick={(e) => handleSubMenuClick(e, item.id, subItem.href)}
-                        className="flex items-center gap-2 lg:gap-3 px-2 lg:px-3 py-1.5 lg:py-2 text-sm text-text-secondary hover:bg-ui-background hover:text-text-primary transition-colors no-underline border-l-2 border-ui-border hover:border-interactive"
-                      >
-                        <subItem.icon className="h-4 w-4 flex-shrink-0 text-text-secondary" />
-                        {subItem.name}
-                      </a>
-                    ))}
-                  </div>
-                )}
-              </div>
-            )
-          })}
-        </nav>
+            )}
+          </div>
+
+          {/* Nav items */}
+          <nav className={cn("flex-1 space-y-0.5 lg:space-y-1", isMinimized ? "p-2" : "p-2 lg:p-3")}>
+            {mainMenuItems.map((item) => {
+              const Icon = item.icon
+              const hasSubMenu   = (sidebarMenus[item.id]?.length ?? 0) > 0
+              const isActive     = currentMenu === item.id
+              const isExpanded   = expandedMenu === item.id
+              const isFlyActive  = hoveredItem?.id === item.id
+
+              const itemHref = !hasSubMenu && item.href
+                ? (item.href.startsWith('http://') || item.href.startsWith('https://')
+                    ? new URL(item.href).pathname
+                    : item.href)
+                : undefined
+
+              const itemCls = cn(
+                "w-full flex items-center text-left transition-all duration-150 font-medium",
+                isMinimized ? "justify-center p-2 lg:p-3" : "gap-2 lg:gap-3 px-2 lg:px-3 py-1.5 lg:py-2",
+                isActive || isFlyActive
+                  ? "bg-interactive/10 text-interactive border-l-4 border-interactive"
+                  : "text-text-primary hover:bg-ui-background border-l-4 border-transparent",
+              )
+
+              const itemContent = (
+                <>
+                  <Icon className={cn(
+                    "h-5 w-5 flex-shrink-0",
+                    isActive || isFlyActive ? "text-interactive" : "text-text-secondary",
+                  )} />
+                  {!isMinimized && (
+                    <>
+                      <span className="text-base flex-1">{item.label}</span>
+                      {isMobile && hasSubMenu && (
+                        isExpanded
+                          ? <ChevronDown  className="h-4 w-4 text-text-secondary flex-shrink-0" />
+                          : <ChevronRight className="h-4 w-4 text-text-secondary flex-shrink-0" />
+                      )}
+                    </>
+                  )}
+                </>
+              )
+
+              return (
+                <div
+                  key={item.id}
+                  onMouseEnter={() => handleNavItemMouseEnter(item)}
+                  onMouseLeave={startCloseTimer}
+                >
+                  {itemHref ? (
+                    <a href={itemHref} className={itemCls} title={isMinimized ? item.label : undefined}>
+                      {itemContent}
+                    </a>
+                  ) : (
+                    <button onClick={() => handleMenuClick(item)} className={itemCls} title={isMinimized ? item.label : undefined}>
+                      {itemContent}
+                    </button>
+                  )}
+
+                  {/* Accordion — mobile only */}
+                  {isMobile && !isMinimized && isExpanded && hasSubMenu && (
+                    <div className="pl-3 lg:pl-4 pb-1">
+                      <p className="px-2 pt-1 pb-0.5 text-[10px] font-semibold text-text-secondary uppercase tracking-widest">
+                        {item.label}
+                      </p>
+                      {sidebarMenus[item.id].map((subItem) => (
+                        <a
+                          key={subItem.id}
+                          href={buildSubItemHref(item.id, subItem.href)}
+                          onClick={(e) => handleSubMenuClick(e, item.id, subItem.href)}
+                          className="flex items-center gap-2 lg:gap-3 px-2 lg:px-3 py-1.5 lg:py-2 text-sm text-text-secondary hover:bg-ui-background hover:text-text-primary transition-colors no-underline border-l-2 border-ui-border hover:border-interactive"
+                        >
+                          <subItem.icon className="h-4 w-4 flex-shrink-0 text-text-secondary" />
+                          {subItem.name}
+                        </a>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              )
+            })}
+          </nav>
+        </div>
+
+        {/* ── Flyout — desktop only, flex child to the right of nav ─────────── */}
+        {!isMobile && hoveredItem && (
+          <MainSidebarFlyout
+            item={hoveredItem}
+            subItems={(sidebarMenus[hoveredItem.id] ?? []).map(sub => ({
+              ...sub,
+              href: buildSubItemHref(hoveredItem.id, sub.href),
+            }))}
+            onMouseEnter={cancelCloseTimer}
+            onMouseLeave={startCloseTimer}
+          />
+        )}
+
       </div>
     </>
   )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orsetra/shared-ui",
-  "version": "1.7.7",
+  "version": "1.8.0",
   "description": "Shared UI components for Orsetra platform",
   "main": "./index.ts",
   "types": "./index.ts",