@orsetra/shared-ui 1.6.0 → 1.6.1

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"
@@ -26,17 +26,21 @@ import { Skeleton } from "../skeleton"
 // ── Dynamic secondary navigation ──────────────────────────────────────────────
 
 interface SidebarNavigationContextValue {
-  injectedItems: SubMenuItem[] | null | undefined  // null = not injected, undefined = injected but loading
-  injectedTitle: string | null
-  setInjectedItems: React.Dispatch<React.SetStateAction<SubMenuItem[] | null | undefined>>
-  setInjectedTitle: React.Dispatch<React.SetStateAction<string | null>>
+  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,
-  setInjectedItems: () => {},
-  setInjectedTitle: () => {},
+  injectedItems:       null,
+  injectedTitle:       null,
+  injectedBackHref:    null,
+  setInjectedItems:    () => {},
+  setInjectedTitle:    () => {},
+  setInjectedBackHref: () => {},
 })
 
 export function useSidebarNavigation() {
@@ -48,16 +52,18 @@ export function useSidebarNavigation() {
  * (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) {
-  const { setInjectedItems, setInjectedTitle } = useSidebarNavigation()
+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]) // eslint-disable-line react-hooks/exhaustive-deps
+  }, [items, title, backHref]) // eslint-disable-line react-hooks/exhaustive-deps
 }
 
 // ── Sidebar storage ───────────────────────────────────────────────────────────
@@ -183,9 +189,10 @@ const SidebarProvider = React.forwardRef<
 
     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, setInjectedItems, setInjectedTitle }),
-      [injectedItems, injectedTitle]
+      () => ({ injectedItems, injectedTitle, injectedBackHref, setInjectedItems, setInjectedTitle, setInjectedBackHref }),
+      [injectedItems, injectedTitle, injectedBackHref]
     )
 
     return (
@@ -234,10 +241,11 @@ 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 } = useSidebarNavigation()
+  const { injectedItems, injectedTitle, injectedBackHref } = useSidebarNavigation()
 
   const isInjecting = injectedItems !== null  // null = default nav, undefined/array = detail page mounted
   const currentNavigation: SubMenuItem[] = isInjecting
@@ -245,6 +253,12 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
     : (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 || isInjecting) return []
     const navIds = new Set(currentNavigation.map((n) => n.id))
@@ -286,12 +300,32 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
       {/* Section label — hidden when collapsed */}
       {!isCollapsed && (
         injectedItems === undefined ? (
-          <div className="h-10 flex items-center px-4 flex-shrink-0">
+          <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">
-            <h2 className="text-xs font-semibold text-text-secondary uppercase tracking-wide truncate">
+          <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>
@@ -318,12 +352,13 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
             </div>
           ))
         ) : currentNavigation.map((item) => {
-          const activeItemId = !injectedItems && getCurrentMenuItem
+          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
@@ -351,12 +386,7 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
                 style={{ color: isActive ? '#0f62fe' : '#4589ff' }}
               />
               {!isCollapsed && (
-                <>
-                  <span className="flex-1 truncate">{item.name}</span>
-                  {item.applied && (
-                    <span className="h-1.5 w-1.5 rounded-full bg-green-500 flex-shrink-0" />
-                  )}
-                </>
+                <span className="flex-1 truncate">{item.name}</span>
               )}
             </Link>
           )
@@ -375,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 ?? ""

package/package.json

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