@orsetra/shared-ui 1.5.31 → 1.6.1

package/components/layout/index.ts

@@ -25,7 +25,9 @@ export {
   SidebarRail,
   SidebarSeparator,
   SidebarTrigger,
-  useSidebar
+  useSidebar,
+  useSidebarNavigation,
+  useInjectSidebarNavigation,
 } from './sidebar/sidebar'
 // Skeleton is exported from ../ui to avoid duplicate exports
 export { RootLayoutWrapper, ibmPlexSans, ibmPlexMono } from './root-layout-wrapper'

package/components/layout/sidebar/data.tsx

@@ -46,10 +46,11 @@ export interface MainMenuItem {
 }
 
 export interface SubMenuItem {
-  id: string
-  name: string
-  href: string
-  icon: LucideIcon
+  id:       string
+  name:     string
+  href:     string
+  icon:     LucideIcon
+  applied?: boolean
 }
 
 export interface SidebarMenus {

package/components/layout/sidebar/sidebar.tsx

@@ -5,7 +5,7 @@ import { Slot } from "@radix-ui/react-slot"
 import { VariantProps, cva } from "class-variance-authority"
 import { PanelLeft, ChevronLeft, ChevronRight } from "lucide-react"
 import Link from "next/link"
-import { usePathname, useSearchParams } from "next/navigation"
+import { usePathname, useSearchParams, useRouter } from "next/navigation"
 
 import { useIsMobile } from "../../../hooks/use-mobile"
 import { cn } from "../../../lib/utils"
@@ -23,6 +23,51 @@ import { Logo } from "../../ui/logo"
 import { type SidebarMenus, type SubMenuItem, type MainMenuItem } from "./data"
 import { Skeleton } from "../skeleton"
 
+// ── Dynamic secondary navigation ──────────────────────────────────────────────
+
+interface SidebarNavigationContextValue {
+  injectedItems:       SubMenuItem[] | null | undefined  // null = not injected, undefined = injected but loading
+  injectedTitle:       string | null
+  injectedBackHref:    string | null
+  setInjectedItems:    React.Dispatch<React.SetStateAction<SubMenuItem[] | null | undefined>>
+  setInjectedTitle:    React.Dispatch<React.SetStateAction<string | null>>
+  setInjectedBackHref: React.Dispatch<React.SetStateAction<string | null>>
+}
+
+const SidebarNavigationContext = React.createContext<SidebarNavigationContextValue>({
+  injectedItems:       null,
+  injectedTitle:       null,
+  injectedBackHref:    null,
+  setInjectedItems:    () => {},
+  setInjectedTitle:    () => {},
+  setInjectedBackHref: () => {},
+})
+
+export function useSidebarNavigation() {
+  return React.useContext(SidebarNavigationContext)
+}
+
+/**
+ * Call inside a detail page/layout to replace the sidebar's secondary nav
+ * (and optionally its section title) for as long as the component is mounted.
+ * `items` must be referentially stable (useMemo / defined outside render).
+ */
+export function useInjectSidebarNavigation(items: SubMenuItem[] | undefined, title?: string, backHref?: string) {
+  const { setInjectedItems, setInjectedTitle, setInjectedBackHref } = useSidebarNavigation()
+  React.useEffect(() => {
+    setInjectedItems(items)
+    setInjectedTitle(title ?? null)
+    setInjectedBackHref(backHref ?? null)
+    return () => {
+      setInjectedItems(null)
+      setInjectedTitle(null)
+      setInjectedBackHref(null)
+    }
+  }, [items, title, backHref]) // eslint-disable-line react-hooks/exhaustive-deps
+}
+
+// ── Sidebar storage ───────────────────────────────────────────────────────────
+
 const SIDEBAR_STORAGE_KEY = "sidebar:state"
 const SIDEBAR_WIDTH = "14rem"
 const SIDEBAR_WIDTH_ICON = "3rem"
@@ -142,35 +187,47 @@ const SidebarProvider = React.forwardRef<
       [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
     )
 
+    const [injectedItems, setInjectedItems] = React.useState<SubMenuItem[] | null | undefined>(null)
+    const [injectedTitle, setInjectedTitle] = React.useState<string | null>(null)
+    const [injectedBackHref, setInjectedBackHref] = React.useState<string | null>(null)
+    const navContextValue = React.useMemo<SidebarNavigationContextValue>(
+      () => ({ injectedItems, injectedTitle, injectedBackHref, setInjectedItems, setInjectedTitle, setInjectedBackHref }),
+      [injectedItems, injectedTitle, injectedBackHref]
+    )
+
     return (
-      <SidebarContext.Provider value={contextValue}>
-        <TooltipProvider delayDuration={0}>
-          <div
-            style={
-              {
-                "--sidebar-width": SIDEBAR_WIDTH,
-                "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
-                ...style,
-              } as React.CSSProperties
-            }
-            suppressHydrationWarning
-            className={cn(
-              "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
-              className
-            )}
-            ref={ref}
-            {...props}
-          >
-            {children}
-          </div>
-        </TooltipProvider>
-      </SidebarContext.Provider>
+      <SidebarNavigationContext.Provider value={navContextValue}>
+        <SidebarContext.Provider value={contextValue}>
+          <TooltipProvider delayDuration={0}>
+            <div
+              style={
+                {
+                  "--sidebar-width": SIDEBAR_WIDTH,
+                  "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+                  ...style,
+                } as React.CSSProperties
+              }
+              suppressHydrationWarning
+              className={cn(
+                "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
+                className
+              )}
+              ref={ref}
+              {...props}
+            >
+              {children}
+            </div>
+          </TooltipProvider>
+        </SidebarContext.Provider>
+      </SidebarNavigationContext.Provider>
     )
   }
 )
 SidebarProvider.displayName = "SidebarProvider"
 
 
+const SKELETON_WIDTHS = ["68%", "85%", "58%", "92%", "74%"]
+
 interface SidebarProps {
   currentMenu?: string
   onMainMenuToggle?: () => void
@@ -184,20 +241,29 @@ interface SidebarProps {
 
 
 function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_url = "", sectionLabels = {}, getCurrentMenuItem, mainMenuItems = [] }: SidebarProps = {}) {
-  const pathname = usePathname()
+  const pathname    = usePathname()
   const searchParams = useSearchParams()
+  const router      = useRouter()
   const { state, toggleSidebar } = useSidebar()
+  const { injectedItems, injectedTitle, injectedBackHref } = useSidebarNavigation()
 
-  const currentNavigation: SubMenuItem[] = sidebarMenus['items']
-    || (currentMenu && sidebarMenus[currentMenu])
-    || []
+  const isInjecting = injectedItems !== null  // null = default nav, undefined/array = detail page mounted
+  const currentNavigation: SubMenuItem[] = isInjecting
+    ? (injectedItems ?? [])
+    : (sidebarMenus['items'] ?? (currentMenu && sidebarMenus[currentMenu]) ?? [])
 
   const isCollapsed = state === "collapsed"
+
+  const currentMainMenuItem = React.useMemo(
+    () => mainMenuItems.find(m => m.id === currentMenu),
+    [mainMenuItems, currentMenu]
+  )
+
   const filteredMainItems = React.useMemo(() => {
-    if (!isCollapsed || mainMenuItems.length === 0) return []
+    if (!isCollapsed || mainMenuItems.length === 0 || isInjecting) return []
     const navIds = new Set(currentNavigation.map((n) => n.id))
     return mainMenuItems.filter((item) => item.id !== currentMenu && !navIds.has(item.id) && !!item.href)
-  }, [isCollapsed, mainMenuItems, currentNavigation, currentMenu])
+  }, [isCollapsed, mainMenuItems, currentNavigation, currentMenu, isInjecting])
 
   return (
     <div
@@ -232,12 +298,38 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
       </div>
 
       {/* Section label — hidden when collapsed */}
-      {!isCollapsed && currentMenu && sectionLabels[currentMenu] && (
-        <div className="h-10 flex items-center px-4 flex-shrink-0">
-          <h2 className="text-xs font-semibold text-text-secondary uppercase tracking-wide">
-            {sectionLabels[currentMenu]}
-          </h2>
-        </div>
+      {!isCollapsed && (
+        injectedItems === undefined ? (
+          <div className="h-10 flex items-center px-4 flex-shrink-0 gap-2 border-b border-ui-border">
+            <div className="h-4 w-4 bg-gray-200 animate-pulse rounded flex-shrink-0" />
+            <div className="h-2.5 w-20 bg-gray-200 animate-pulse rounded" />
+          </div>
+        ) : (injectedTitle || (currentMenu && sectionLabels[currentMenu])) ? (
+          <div className="h-10 flex items-center px-4 flex-shrink-0 gap-2 border-b border-ui-border">
+            {isInjecting ? (
+              <button
+                type="button"
+                onClick={() => injectedBackHref ? router.push(injectedBackHref) : router.back()}
+                className="h-6 w-6 flex items-center justify-center text-text-secondary hover:text-text-primary hover:bg-ui-background rounded transition-colors flex-shrink-0"
+                title="Back"
+              >
+                <ChevronLeft className="h-3.5 w-3.5" />
+              </button>
+            ) : currentMainMenuItem ? (
+              <button
+                type="button"
+                onClick={() => router.push(currentMainMenuItem.href)}
+                className="h-6 w-6 flex items-center justify-center text-text-secondary hover:text-text-primary hover:bg-ui-background rounded transition-colors flex-shrink-0"
+                title={currentMainMenuItem.label}
+              >
+                <currentMainMenuItem.icon className="h-3.5 w-3.5" />
+              </button>
+            ) : null}
+            <h2 className="text-xs font-semibold text-text-secondary capitalize tracking-wide truncate flex-1">
+              {injectedTitle || sectionLabels[currentMenu!]}
+            </h2>
+          </div>
+        ) : null
       )}
 
       {/* Nav */}
@@ -245,12 +337,28 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
         "flex-1 overflow-y-auto",
         isCollapsed ? "px-1 py-3 space-y-0.5" : "px-3 py-4 space-y-1"
       )}>
-        {/* Secondary nav items */}
-        {currentNavigation.map((item) => {
-          const activeItemId = getCurrentMenuItem ? getCurrentMenuItem(pathname, searchParams) : null
+        {/* Secondary nav items — skeleton while injected but loading */}
+        {injectedItems === undefined ? (
+          SKELETON_WIDTHS.map((w, i) => (
+            <div
+              key={i}
+              className={cn(
+                "flex items-center border-l-4 border-transparent animate-pulse",
+                isCollapsed ? "p-2 justify-center" : "px-3 py-2 gap-x-3"
+              )}
+            >
+              <div className="h-4 w-4 bg-gray-200 flex-shrink-0" />
+              {!isCollapsed && <div className="h-3 bg-gray-200 rounded" style={{ width: w }} />}
+            </div>
+          ))
+        ) : currentNavigation.map((item) => {
+          const activeItemId = !isInjecting && getCurrentMenuItem
+            ? getCurrentMenuItem(pathname, searchParams)
+            : null
+          const itemPath = item.href.split('?')[0]
           const isActive = activeItemId
             ? item.id === activeItemId
-            : (pathname === item.href || pathname.startsWith(`${item.href}/`))
+            : (pathname === itemPath || pathname.startsWith(`${itemPath}/`))
 
           const handleClick = (e: React.MouseEvent) => {
             const href = item.href
@@ -277,7 +385,9 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
                 className="h-4 w-4 flex-shrink-0"
                 style={{ color: isActive ? '#0f62fe' : '#4589ff' }}
               />
-              {!isCollapsed && item.name}
+              {!isCollapsed && (
+                <span className="flex-1 truncate">{item.name}</span>
+              )}
             </Link>
           )
 
@@ -295,7 +405,7 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
         {/* Main menu items — only in collapsed mode, below secondary items, neutral color */}
         {filteredMainItems.length > 0 && (
           <>
-            <div className="border-t border-ui-border mx-1 my-2" />
+            <div className="border-b border-ui-border mx-1 my-2" />
             {filteredMainItems.map((item) => {
               const handleClick = (e: React.MouseEvent) => {
                 const href = item.href ?? ""
@@ -817,6 +927,8 @@ const SidebarMenuSubButton = React.forwardRef<
 SidebarMenuSubButton.displayName = "SidebarMenuSubButton"
 
 export {
+  useSidebarNavigation,
+  useInjectSidebarNavigation,
   Sidebar,
   SidebarContent,
   SidebarFooter,

package/package.json

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