@spacemade/ui 0.0.1

package/src/components/common/layout/SideNavLayout.tsx

@@ -0,0 +1,1016 @@
+'use client'
+
+import { useState, useEffect, useRef, ReactNode } from 'react'
+import { createPortal } from 'react-dom'
+import { useRouter } from '@lib/next-router'
+import { useUserAuthContext } from '@context/UserAuthContext'
+import Link from 'next/link'
+import Button from '@components/common/button/Button'
+import { canAccessApp } from '@helpers/permissions'
+import { useListOrgsQuery, useSetActiveOrgMutation } from '@store/slice/api/orgApiSlice'
+import { useAppDispatch } from '@store/hooks'
+import { projectApiSlice } from '@store/slice/api/projectApiSlice'
+import { vectorStoreApiSlice } from '@store/slice/api/vectorStoreApiSlice'
+import { vectorStoreFileApiSlice } from '@store/slice/api/vectorStoreFileApiSlice'
+import { projectFileApiSlice } from '@store/slice/api/projectFileApiSlice'
+import { projectUserPermissionsApiSlice } from '@store/slice/api/projectUserPermissionApiSlice'
+import { stripeApiSlice } from '@store/slice/api/stripeApiSlice'
+import { invoiceApiSlice } from '@store/slice/api/invoiceApiSlice'
+import { siteApiSlice } from '@store/slice/api/siteApiSlice'
+import { pageApiSlice } from '@store/slice/api/pageApiSlice'
+import { apiTokenApiSlice } from '@store/slice/api/apiTokenSlice'
+import { productsApiSlice } from '@store/slice/api/productsApiSlice'
+import { OptimizedImage } from '@components/common/Image/OptimizedImage'
+import { colorCirclePNG } from '@helpers/images'
+
+type NavItem = {
+  label: string
+  icon?: ReactNode | string // ReactNode OR bootstrap icon class OR image URL
+  title?: string
+  href?: string
+  onClick?: () => void
+  external?: boolean
+  activeHrefs?: string[]
+}
+
+type MainNavMode = 'auto' | 'list' | 'select'
+type NavAppKey = 'projects' | 'storage' | 'users' | 'providers'
+
+type SideNavLayoutProps = {
+  children: ReactNode
+  sidebarTopContent?: (isCollapsed: boolean, setIsCollapsed: (v: boolean) => void) => ReactNode
+  sidebarContent?: (isCollapsed: boolean, setIsCollapsed: (v: boolean) => void) => ReactNode
+  mainNavTitle?: string
+  mainNavItems?: NavItem[]
+  renderMainNav?: (isCollapsed: boolean, setIsCollapsed: (v: boolean) => void) => ReactNode
+  /** controls Explore rendering – 'auto' = homepage list, others select */
+  mainNavMode?: MainNavMode
+  /** toggle id="mainContentArea" on non-blog content wrapper */
+  useMainContentAreaId?: boolean
+}
+
+const DEFAULT_ITEMS: NavItem[] = [
+  { label: 'Storage', icon: <i className="bi bi-grid-3x3-gap-fill" />, title: 'Stores', href: '/storage' },
+  { label: 'Projects', icon: <i className="bi bi-kanban" />, title: 'Projects', href: '/projects' },
+  { label: 'Providers', icon: <i className="bi bi-building" />, title: 'Providers', href: '/providers' },
+  //{ label: 'Docs', icon: <i className="bi bi-journal-text" />, title: 'Docs', href: '/docs' },
+  { label: 'Users', icon: <i className="bi bi-people" />, title: 'Users', href: '/users' },
+  { label: 'Groups', icon: <i className="bi bi-diagram-3" />, title: 'Groups', href: '/groups' },
+  // { label: 'Api', icon: <i className="bi bi-motherboard" />, title: 'Api', href: '/openapi' },
+]
+
+const SideNavLayout = ({
+  children,
+  sidebarTopContent,
+  sidebarContent,
+  mainNavTitle = 'Apps',
+  mainNavItems,
+  renderMainNav,
+  mainNavMode = 'auto',
+  useMainContentAreaId = true
+}: SideNavLayoutProps) => {
+  const { user, isConnected, activeOrgId, setActiveOrgId } = useUserAuthContext()
+  const isAuthenticated = !!user?.id
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const { data: orgMembershipsData } = useListOrgsQuery(undefined, {
+    skip: !isAuthenticated || !isConnected,
+    refetchOnMountOrArgChange: true,
+  })
+  const [setActiveOrg, { isLoading: isSettingOrg }] = useSetActiveOrgMutation()
+
+  const isSlugPage = !!router.query.slug
+  const isBlogPage = router.pathname === '/blog' || router.pathname.startsWith('/blog/')
+  const isMainBlogPage = router.pathname === '/blog'
+  const isBlogDetailPage = router.pathname === '/blog/[postSlug]'
+  const isSettingsRoute = router.pathname === '/settings' || router.pathname.startsWith('/settings/')
+  const mainContentAreaIdProps = useMainContentAreaId ? { id: 'mainContentArea' } : {}
+
+  const [isCollapsed, setIsCollapsed] = useState(false)
+  const [isMobile, setIsMobile] = useState(false)
+  const [isMobileOpen, setIsMobileOpen] = useState(false)
+  const [hasMarketplaceHeader, setHasMarketplaceHeader] = useState(false)
+
+  // --- Select-style Explore state ---
+  const [isOpen, setIsOpen] = useState(false)
+  const [menuDir, setMenuDir] = useState<'up' | 'down'>('down')
+  const [menuMaxHeight, setMenuMaxHeight] = useState<number>(240)
+  const [menuPos, setMenuPos] = useState<{ left: number; top?: number; bottom?: number; width: number }>({ left: 0, top: 0, width: 200 })
+  const triggerRef = useRef<HTMLButtonElement | null>(null)
+  const menuRef = useRef<HTMLDivElement | null>(null)
+  const sidebarRef = useRef<HTMLDivElement | null>(null)
+
+  // NEW: navigation lock + pending selection
+  const [navPendingHref, setNavPendingHref] = useState<string | null>(null)
+  const [navPendingLabel, setNavPendingLabel] = useState<string | null>(null)
+
+  // Org picker dropdown state
+  const [isOrgPickerOpen, setIsOrgPickerOpen] = useState(false)
+  const orgPickerRef = useRef<HTMLButtonElement | null>(null)
+  const orgMenuRef = useRef<HTMLDivElement | null>(null)
+
+  // Watch screen size to determine mobile mode
+  useEffect(() => {
+    const handleResize = () => {
+      const mobile = window.innerWidth < 768
+      setIsMobile(mobile)
+      if (!mobile) setIsMobileOpen(false)
+    }
+    handleResize()
+    window.addEventListener('resize', handleResize)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [])
+
+  useEffect(() => {
+    const marketplaceHeader =
+      document.querySelector('.bg-marketplace-header') ||
+      document.getElementById('bg-marketplace-header')
+    setHasMarketplaceHeader(!!marketplaceHeader)
+  }, [])
+
+  const itemsToRender = mainNavItems && mainNavItems.length > 0 ? mainNavItems : DEFAULT_ITEMS
+  const permissionRows = user?.permissions
+  const orgPermissionRows = Array.isArray(permissionRows)
+    ? (activeOrgId ? permissionRows.filter((row) => row.orgId === activeOrgId) : [])
+    : []
+  const hasPermissionConfig = orgPermissionRows.length > 0
+  const hasOrgMembershipsFromUser = Array.isArray(user?.orgMemberships)
+  const orgMemberships = orgMembershipsData ?? (hasOrgMembershipsFromUser ? user?.orgMemberships : []) ?? []
+  const orgMembershipsResolved = !!orgMembershipsData || hasOrgMembershipsFromUser
+  const activeMembership =
+    orgMemberships.find((m) => m.orgId === activeOrgId) ||
+    orgMemberships.find((m) => m.org?.orgType === 'personal') ||
+    orgMemberships[0]
+  const activeOrg = activeMembership?.org
+  const isPersonalOrgByOrg = (org?: any) => {
+    if (!org) return false
+    const slug = String(org.slug || '').trim().toLowerCase()
+    const name = String(org.name || '').trim()
+    const username = String(user?.name || '').trim().toLowerCase()
+    return (
+      org?.orgType === 'personal' ||
+      (!!slug && slug.endsWith('-personal')) ||
+      (!!name && /\(personal\b/i.test(name)) ||
+      (!!slug && !!username && slug === username)
+    )
+  }
+  const isPersonalOrg = isPersonalOrgByOrg(activeOrg)
+  const isBusinessOrg = activeOrg?.orgType === 'business'
+  const isOrgOwner =
+    !!user?.id &&
+    !!activeOrg?.ownerId &&
+    String(activeOrg.ownerId).trim() === String(user.id).trim()
+  const shouldHideUsersInNav = !orgMembershipsResolved || !orgMemberships.length || isPersonalOrg
+  const NAV_APP_MAP: Record<string, NavAppKey> = {
+    '/projects': 'projects',
+    '/storage': 'storage',
+    '/users': 'users',
+    '/groups': 'users',
+    '/providers': 'providers',
+  }
+  const normalizeNavHref = (href: string) => {
+    const raw = href.split('#')[0].split('?')[0]
+    if (raw === '/') return '/'
+    return raw.endsWith('/') ? raw.slice(0, -1) : raw
+  }
+
+  const filteredItems = itemsToRender.filter((item) => {
+    if (!item.href) return true
+    const normalizedHref = normalizeNavHref(item.href)
+    const appKey = NAV_APP_MAP[normalizedHref]
+    if (!appKey) return false
+    if ((normalizedHref === '/users' || normalizedHref === '/groups') && shouldHideUsersInNav) return false
+    if (isOrgOwner) return true
+    if (isBusinessOrg && !hasPermissionConfig) return false
+    if (!hasPermissionConfig) return true
+    const hasAppRows = orgPermissionRows.some((row: any) => row.appKey === appKey)
+    if (isBusinessOrg && !hasAppRows) return false
+    if (!hasAppRows) return true
+    return canAccessApp(orgPermissionRows, appKey, 'read')
+  })
+
+  const currentPath = (() => {
+    const raw = (router.asPath || router.pathname || '/').split('#')[0].split('?')[0]
+    if (raw === '/') return '/'
+    return raw.endsWith('/') ? raw.slice(0, -1) : raw
+  })()
+  const currentPathSegments = currentPath.split('/').filter(Boolean)
+  const detailScopedApps = new Set(['projects', 'groups'])
+  const firstPathSegment = currentPathSegments[0] || ''
+  const secondPathSegment = currentPathSegments[1] || ''
+  const isRootResourceDetailRoute =
+    detailScopedApps.has(firstPathSegment) &&
+    currentPathSegments.length > 1 &&
+    secondPathSegment !== 'public'
+  const shouldHideOrgPicker = isRootResourceDetailRoute
+
+  const isItemActive = (item?: NavItem) => {
+    const href = item?.href
+    if (!href) return false
+    const activeHrefs = item.activeHrefs || [href]
+    return activeHrefs.some((activeHref) => {
+      const normalizedHref = activeHref === '/' ? '/' : activeHref.replace(/\/+$/, '')
+      if (normalizedHref === '/') return currentPath === '/'
+      return currentPath === normalizedHref || currentPath.startsWith(`${normalizedHref}/`)
+    })
+  }
+
+  const resetOrgScopedCaches = () => {
+    dispatch(projectApiSlice.util.resetApiState())
+    dispatch(vectorStoreApiSlice.util.resetApiState())
+    dispatch(vectorStoreFileApiSlice.util.resetApiState())
+    dispatch(projectFileApiSlice.util.resetApiState())
+    dispatch(projectUserPermissionsApiSlice.util.resetApiState())
+    // Settings-scoped caches
+    dispatch(stripeApiSlice.util.resetApiState())
+    dispatch(invoiceApiSlice.util.resetApiState())
+    dispatch(siteApiSlice.util.resetApiState())
+    dispatch(pageApiSlice.util.resetApiState())
+    dispatch(apiTokenApiSlice.util.resetApiState())
+    dispatch(productsApiSlice.util.resetApiState())
+  }
+
+  useEffect(() => {
+    if (!isAuthenticated) return
+    if (activeOrgId || !activeMembership?.orgId) return
+    setActiveOrg({ orgId: activeMembership.orgId })
+      .unwrap()
+      .then((res) => setActiveOrgId(res.orgId))
+      .catch(() => {})
+  }, [activeMembership?.orgId, activeOrgId, isAuthenticated, setActiveOrg, setActiveOrgId])
+
+  const sidebarClass = [
+    'sidebar-column',
+    isCollapsed ? 'collapsed' : '',
+    isMobile ? 'position-fixed top-0 start-0 h-100 bg-white' : 'position-relative',
+    isMobile && !isMobileOpen ? 'd-none' : '',
+  ]
+    .filter(Boolean)
+    .join(' ')
+
+  // 1) Replace your current pushRoute with this:
+  const pushRoute = (href: string) => {
+    // menu should already be closed; just navigate on next frame
+    // (rAF helps ensure the close renders before route change)
+    requestAnimationFrame(() => {
+      // setTimeout as a Safari fallback micro-delay
+      setTimeout(() => router.push(href), 0)
+    })
+  }
+
+  // 2) Update handleItemClick to close the menu BEFORE navigating:
+  const handleItemClick = (item: NavItem) => {
+    if (navPendingHref) return // locked
+    if (item.onClick) {
+      item.onClick()
+      return
+    }
+    if (item.href) {
+      if (item.external) {
+        window.open(item.href, '_blank', 'noopener,noreferrer')
+      } else {
+        // lock + show spinner in trigger
+        setNavPendingHref(item.href)
+        setNavPendingLabel(item.label)
+
+        // close dropdown first, then navigate
+        setIsOpen(false)
+        pushRoute(item.href)
+      }
+    }
+  }
+
+  // Clear pending when route completes/errors
+  useEffect(() => {
+    const done = () => {
+      setNavPendingHref(null)
+      setNavPendingLabel(null)
+      setIsOpen(false)
+    }
+    const start = () => {
+      // ensure menu stays locked if it remains visible during transition
+    }
+    router.events.on('routeChangeStart', start)
+    router.events.on('routeChangeComplete', done)
+    router.events.on('routeChangeError', done)
+    return () => {
+      router.events.off('routeChangeStart', start)
+      router.events.off('routeChangeComplete', done)
+      router.events.off('routeChangeError', done)
+    }
+  }, [router.events])
+
+  const handleLogoClick = (e: React.MouseEvent) => {
+    e.preventDefault()
+    if (router.pathname === '/') {
+      router.reload()
+    } else {
+      router.push('/')
+    }
+  }
+
+  // --- Explore Select helpers ---
+  const isImgUrl = (s?: string) => !!s && /^(\/|https?:\/\/|data:image)/i.test(s)
+  const isBiClass = (s?: string) => !!s && /\bbi\b/.test(s)
+
+  const renderThumb = (icon?: NavItem['icon']) => {
+    if (!icon) return <span aria-hidden>🧠</span>
+    if (typeof icon !== 'string') return icon
+    if (isImgUrl(icon)) {
+      return <img src={icon} alt="" style={{ width: 30, height: 30, objectFit: 'cover', borderRadius: 6 }} />
+    }
+    if (isBiClass(icon)) return <i className={icon} />
+    return <span>{icon}</span>
+  }
+
+  const selectedOption = filteredItems.find((item) => isItemActive(item)) || filteredItems[0]
+
+  // Decide up/down via TRIGGER, but set left/width to SIDEBAR (=> 100% width)
+  const computeMenuPlacement = () => {
+    const btn = triggerRef.current
+    const sidebarEl = sidebarRef.current
+    if (!btn || !sidebarEl) return
+
+    const btnRect = btn.getBoundingClientRect()
+    const hostRect = sidebarEl.getBoundingClientRect()
+    const vh = window.innerHeight
+    const vw = window.innerWidth
+
+    const below = vh - btnRect.bottom - 8
+    const above = btnRect.top - 8
+    const minMenu = 200
+    const dir: 'up' | 'down' = below < minMenu && above > below ? 'up' : 'down'
+    setMenuDir(dir)
+
+    const maxH = Math.max(180, Math.floor((dir === 'down' ? below : above) - 8))
+    setMenuMaxHeight(maxH)
+
+    const width = Math.min(hostRect.width, vw - 16)
+    let left = Math.round(hostRect.left + window.scrollX)
+    left = Math.max(8, Math.min(left, vw - width - 8))
+
+    if (dir === 'down') {
+      const top = Math.round(btnRect.bottom + window.scrollY + 8)
+      setMenuPos({ left, top, width })
+    } else {
+      const bottom = Math.round(vh - btnRect.top + 8)
+      setMenuPos({ left, bottom, width })
+    }
+  }
+
+  useEffect(() => {
+    if (!isOpen) return
+    const onScrollOrResize = () => computeMenuPlacement()
+    const onClickAway = (e: MouseEvent) => {
+      if (navPendingHref) return // locked; ignore outside clicks
+      if (triggerRef.current?.contains(e.target as Node)) return
+      if (menuRef.current?.contains(e.target as Node)) return
+      setIsOpen(false)
+    }
+    const onKey = (e: KeyboardEvent) => {
+      if (navPendingHref) return
+      if (e.key === 'Escape') setIsOpen(false)
+    }
+    window.addEventListener('resize', onScrollOrResize)
+    window.addEventListener('scroll', onScrollOrResize, true)
+    window.addEventListener('click', onClickAway)
+    window.addEventListener('keydown', onKey)
+    computeMenuPlacement()
+    return () => {
+      window.removeEventListener('resize', onScrollOrResize)
+      window.removeEventListener('scroll', onScrollOrResize, true)
+      window.removeEventListener('click', onClickAway)
+      window.removeEventListener('keydown', onKey)
+    }
+  }, [isOpen, navPendingHref])
+
+  // Org picker outside click handler
+  useEffect(() => {
+    if (!isOrgPickerOpen) return
+    const onClickAway = (e: MouseEvent) => {
+      if (orgPickerRef.current?.contains(e.target as Node)) return
+      if (orgMenuRef.current?.contains(e.target as Node)) return
+      setIsOrgPickerOpen(false)
+    }
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setIsOrgPickerOpen(false)
+    }
+    window.addEventListener('click', onClickAway)
+    window.addEventListener('keydown', onKey)
+    return () => {
+      window.removeEventListener('click', onClickAway)
+      window.removeEventListener('keydown', onKey)
+    }
+  }, [isOrgPickerOpen])
+
+  const onOpenToggle = () => {
+    if (navPendingHref) return // locked
+    if (!isOpen) computeMenuPlacement()
+    setIsOpen(v => !v)
+  }
+
+  // Keyboard navigation within menu (portal)
+  const onMenuKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (e) => {
+    if (navPendingHref) {
+      e.preventDefault()
+      return
+    }
+    const root = menuRef.current || document.body
+    const items = Array.from(root.querySelectorAll<HTMLButtonElement>('[data-option="true"]'))
+    const idx = items.findIndex(el => el === document.activeElement)
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      const next = items[(idx + 1 + items.length) % items.length]
+      next?.focus()
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      const prev = items[(idx - 1 + items.length) % items.length]
+      prev?.focus()
+    }
+  }
+
+  // Get icon for org membership
+  const getOrgIcon = (membership: typeof activeMembership) => {
+    if (!membership) return colorCirclePNG
+    const org = membership.org
+    const isPersonal = isPersonalOrgByOrg(org)
+
+    return isPersonal
+      ? user?.profileMedia?.media?.sourceUrl || colorCirclePNG
+      : org?.profileMedia?.media?.sourceUrl ||
+        org?.profileImageUrl ||
+        colorCirclePNG
+  }
+
+  const isPersonalMembership = (membership: typeof activeMembership) => {
+    if (!membership) return false
+    const org = membership.org
+    return isPersonalOrgByOrg(org)
+  }
+
+  const getOrgDisplayName = (membership: typeof activeMembership) => {
+    if (!membership) return 'Organization'
+    const fallbackName = (membership.org?.name || 'Organization').replace(/\s*\(Personal\)\s*$/i, '')
+    if (!isPersonalMembership(membership)) return fallbackName
+    const username = String((user as any)?.username || user?.name || '').trim()
+    if (!username) return fallbackName
+    return username.charAt(0).toUpperCase() + username.slice(1)
+  }
+
+  // Handle org change
+  const handleOrgChange = async (nextOrgId: string) => {
+    if (!nextOrgId || nextOrgId === activeOrgId || isSettingOrg) return
+    setIsOrgPickerOpen(false)
+    try {
+      const result = await setActiveOrg({ orgId: nextOrgId }).unwrap()
+      setActiveOrgId(result.orgId)
+      resetOrgScopedCaches()
+      router.replace(router.asPath)
+    } catch {
+      // ignore for now; UI stays on current org
+    }
+  }
+
+  // --- Resolve which Explore variant to show
+  const hasSupplementalSidebarSections = !!(sidebarTopContent || sidebarContent)
+  const resolvedMainNavMode: MainNavMode =
+    mainNavMode !== 'auto'
+      ? mainNavMode
+      : (router.pathname === '/' || !hasSupplementalSidebarSections ? 'list' : 'select')
+
+  // Original LIST variant
+  const renderExploreList = () => (
+    <>
+      <h2 className="mt-4 sidebar-heading sidebar-nav-heading">{mainNavTitle}</h2>
+      <ul className="sidebar-list sidebar-nav-list">
+        {filteredItems.map((item, idx) => {
+          const isActive = isItemActive(item)
+          return (
+            <li
+              key={`${item.label}-${idx}`}
+              className={`sidebar-item sidebar-nav-item ${isActive ? 'active' : ''}`}
+              onClick={() => handleItemClick(item)}
+              title={item.title || item.label}
+              role="button"
+              aria-current={isActive ? 'page' : undefined}
+              style={isActive ? { background: 'var(--bs-alice-blue, #eff5fb)' } : undefined}
+            >
+              <span
+                className="sidebar-link sidebar-nav-link"
+                style={isActive ? { color: 'var(--bs-primary, #0d6efd)', fontWeight: 700 } : undefined}
+              >
+                <span className="icon-fw d-inline-flex align-items-center justify-content-center">
+                  {typeof item.icon === 'string'
+                    ? (/\bbi\b/.test(item.icon) ? <i className={item.icon} /> : <span>{item.icon}</span>)
+                    : item.icon}
+                </span>
+                {!isCollapsed && <span className="ms-2">{item.label}</span>}
+              </span>
+            </li>
+          )
+        })}
+      </ul>
+    </>
+  )
+
+  // Select (portal) variant
+  const renderExploreSelect = () => {
+    // what to show in the trigger while navigating
+    const triggerLabel = navPendingLabel ?? selectedOption?.label ?? 'Select'
+    const triggerSpinning = !!navPendingHref
+
+    return (
+      <>
+        <h2 className="mt-5 sidebar-heading sidebar-nav-heading">{mainNavTitle}</h2>
+
+        {/* Trigger (collapses to 38x38 icon-only) */}
+        <button
+          ref={triggerRef}
+          type="button"
+          className="form-select form-select-sm sidebar-nav-trigger border-0 border-right-1"
+          style={{
+            minWidth: isCollapsed ? 38 : '100px',
+            width: isCollapsed ? 38 : '100%',
+            height: 38,
+            textAlign: 'left',
+            paddingRight: isCollapsed ? 0 : '2.3rem',
+            paddingLeft: isCollapsed ? 0 : '0.75rem',
+            backgroundImage: isCollapsed || triggerSpinning
+              ? 'none'
+              : "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e\")",
+            backgroundRepeat: 'no-repeat',
+            backgroundPosition: 'right 0.4rem center',
+            backgroundSize: '16px 12px',
+            borderRadius: 10,
+            boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.1)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: isCollapsed ? 'center' : 'flex-start',
+            gap: isCollapsed ? 0 : '0.5rem',
+            cursor: triggerSpinning ? 'progress' : 'pointer',
+            opacity: triggerSpinning ? 0.9 : 1
+          }}
+          onClick={onOpenToggle}
+          aria-expanded={isOpen}
+          aria-haspopup="listbox"
+          aria-busy={triggerSpinning || undefined}
+          aria-disabled={triggerSpinning || undefined}
+          aria-label={isCollapsed ? triggerLabel : undefined}
+          title={isCollapsed ? triggerLabel : undefined}
+        >
+          <span className="d-flex align-items-center">
+            <span className={isCollapsed ? '' : 'me-2'}>
+              {triggerSpinning ? (
+                <span className="spinner-border spinner-border-sm" role="status" aria-label="Loading" />
+              ) : (
+                // show selected/pending icon
+                renderThumb(
+                  (navPendingHref
+                    ? filteredItems.find(i => i.href === navPendingHref)?.icon
+                    : selectedOption?.icon)
+                )
+              )}
+            </span>
+            {!isCollapsed && <span>{triggerLabel}</span>}
+          </span>
+        </button>
+
+        {/* Menu (PORTAL, 100% of sidebar) */}
+        {isOpen && createPortal(
+          <div
+            ref={menuRef}
+            role="listbox"
+            tabIndex={-1}
+            className={`shadow-sm rounded-3 border bg-white explore-menu-portal ${navPendingHref ? 'locked' : ''}`}
+            style={{
+              position: 'fixed',
+              zIndex: 3000,
+              left: menuPos.left,
+              top: menuPos.top,
+              bottom: menuPos.bottom,
+              width: menuPos.width,
+              maxHeight: menuMaxHeight,
+              overflowY: 'auto',
+              padding: '4px'
+            }}
+            onKeyDown={onMenuKeyDown}
+            aria-busy={!!navPendingHref || undefined}
+            aria-disabled={!!navPendingHref || undefined}
+          >
+            {filteredItems.map((item, idx) => {
+              const isActive = isItemActive(item)
+              const isPending = !!navPendingHref && item.href === navPendingHref
+              const disabled = !!navPendingHref
+              return (
+                <button
+                  key={`${item.label}-${idx}`}
+                  type="button"
+                  role="option"
+                  tabIndex={disabled ? -1 : 0}
+                  data-option="true"
+                  className={`w-100 text-start px-3 py-2 bg-transparent border-0 d-flex align-items-center explore-option ${isActive ? 'active' : ''} ${disabled ? 'disabled' : ''}`}
+                  onClick={() => {
+                    if (disabled) return
+                    setIsOpen(false)
+                    handleItemClick(item)
+                  }}
+                  onKeyDown={(e) => {
+                    if (disabled) { e.preventDefault(); return }
+                    if (e.key === 'Enter' || e.key === ' ') {
+                      e.preventDefault()
+                      setIsOpen(false)
+                      handleItemClick(item)
+                    }
+                  }}
+                  title={item.title || item.label}
+                  aria-selected={isActive || isPending}
+                  aria-disabled={disabled || undefined}
+                >
+                  <span className="me-2 thumb">
+                    {isPending ? (
+                      <span className="spinner-border spinner-border-sm" role="status" aria-label="Loading" />
+                    ) : (
+                      renderThumb(item.icon)
+                    )}
+                  </span>
+                  <span className="flex-grow-1 label">{item.label}</span>
+                  {(isActive || isPending) && !isPending && <i className="bi bi-check2" aria-hidden />}
+                </button>
+              )
+            })}
+          </div>,
+          document.body
+        )}
+
+        <ul className="list-unstyled mt-2 mb-0 text-muted small text-center" aria-hidden={!!navPendingHref}>
+          <li>Press ↑/↓ to navigate</li>
+        </ul>
+
+        {/* Global so it affects the portal */}
+        <style jsx global>{`
+          .sidebar-nav-heading {
+            color: var(--bs-dark-900, #111117);
+            font-size: .875rem;
+            font-weight: 700;
+            line-height: 1.25;
+            text-transform: none;
+            letter-spacing: normal;
+            margin-bottom: .5rem;
+            padding: 0 .75rem;
+          }
+          .sidebar-nav-list .sidebar-nav-item {
+            border-radius: .375rem;
+            margin-bottom: .1rem;
+            transition: background-color .12s ease, color .12s ease;
+          }
+          .sidebar-nav-list .sidebar-nav-item:hover,
+          .sidebar-nav-list .sidebar-nav-item.active {
+            background: var(--bs-alice-blue, #eff5fb);
+          }
+          .sidebar-nav-list .sidebar-nav-item.active .sidebar-nav-link {
+            color: var(--bs-primary, #0d6efd);
+            font-weight: 700;
+          }
+          .sidebar-nav-list .sidebar-nav-link {
+            color: var(--bs-dark-900, #111117);
+            font-size: .95rem;
+            font-weight: 600;
+            line-height: 1.2;
+            min-height: 2.25rem;
+            padding: .5rem .75rem;
+          }
+          .sidebar-nav-trigger {
+            color: var(--bs-dark-900, #111117) !important;
+            font-size: .95rem !important;
+            font-weight: 600 !important;
+          }
+          .explore-menu-portal .explore-option {
+            border-radius: .5rem;
+            margin: 2px 0;
+            color: var(--bs-dark-900, #111117);
+            font-size: .95rem;
+            font-weight: 600;
+            outline: none;
+            transition: background-color .12s ease, color .12s ease, box-shadow .12s ease, opacity .12s ease;
+          }
+          .explore-menu-portal:not(.locked) .explore-option:hover,
+          .explore-menu-portal:not(.locked) .explore-option:focus-visible {
+            background: var(--bs-alice-blue, #eff5fb);
+            color: inherit;
+            box-shadow: none;
+          }
+          .explore-menu-portal .explore-option.active {
+            background: var(--bs-alice-blue, #eff5fb);
+            color: var(--bs-primary, #0d6efd);
+            font-weight: 700;
+            box-shadow: none;
+          }
+          .explore-menu-portal .explore-option .thumb {
+            display: inline-flex;
+            width: 1.25rem;
+            height: 1.25rem;
+            align-items: center;
+            justify-content: center;
+          }
+          .explore-menu-portal .explore-option .thumb img {
+            width: 1.25rem;
+            height: 1.25rem;
+            object-fit: cover;
+            border-radius: .375rem;
+          }
+          /* Locked (navigating) state */
+          .explore-menu-portal.locked {
+            pointer-events: none;
+            user-select: none;
+            cursor: progress;
+          }
+          .explore-menu-portal.locked .explore-option {
+            opacity: .7;
+          }
+          .explore-menu-portal.locked .explore-option .spinner-border {
+            opacity: 1;
+          }
+        `}</style>
+      </>
+    )
+  }
+
+  // Choose which Explore to render (unless renderMainNav override is provided)
+  const defaultMainNav = resolvedMainNavMode === 'list'
+    ? renderExploreList()
+    : renderExploreSelect()
+  const mainNavContent = isSettingsRoute
+    ? null
+    : renderMainNav
+      ? renderMainNav(isCollapsed, setIsCollapsed)
+      : defaultMainNav
+  const shouldShowMainNav = !!mainNavContent
+
+  return (
+    <div
+      className="d-flex w-100"
+      style={{
+        height: isAuthenticated ? '100vh' : 'auto',
+        minHeight: isAuthenticated ? '100vh' : 'auto',
+      }}
+    >
+      {isAuthenticated && (
+        <>
+          {/* ref for width/left */}
+          <div
+            ref={sidebarRef}
+            className={sidebarClass}
+            style={{
+              width: isCollapsed ? '40px' : '250px',
+              zIndex: 1400,
+              boxShadow: isMobileOpen ? '2px 0 5px rgba(0,0,0,0.2)' : undefined
+            }}
+          >
+            <div className={`logo-row ${isCollapsed ? 'logo-row-collapsed' : ''}`}>
+              <Link
+                href="/"
+                className="logo-link"
+                onClick={handleLogoClick}
+              >
+                <img src="/images/logo/Osirus-Logo-Icon.svg" alt="Osirus Logo" />
+              </Link>
+
+              {/* Collapse on desktop */}
+              {!isCollapsed && !isMobile && (
+                <Button
+                  onClick={() => setIsCollapsed(true)}
+                  className="collapse-button w-xs-30p h-xs-30p"
+                  title="Collapse Sidebar"
+                  ariaLabel="Collapse Sidebar"
+                >
+                  <i className="bi bi-layout-sidebar" />
+                </Button>
+              )}
+
+              {/* Expand on desktop */}
+              {isCollapsed && !isMobile && (
+                <Button
+                  onClick={() => setIsCollapsed(false)}
+                  className="expand-button"
+                  title="Expand Sidebar"
+                  ariaLabel="Expand Sidebar"
+                >
+                  <i className="bi bi-layout-sidebar-reverse" />
+                </Button>
+              )}
+
+              {/* Close (X) on mobile */}
+              {isMobile && (
+                <Button
+                  onClick={() => setIsMobileOpen(false)}
+                  className="position-absolute"
+                  style={{ top: '8px', right: '10px', width: '18px', height: '18px', minWidth: 'unset', zIndex: 3 }}
+                  title="Close Sidebar"
+                  ariaLabel="Close Sidebar"
+                >
+                  <i className="bi bi-x-lg" />
+                </Button>
+              )}
+            </div>
+
+            {!isCollapsed && orgMemberships.length > 0 && !shouldHideOrgPicker && (
+              <div className="mt-4 position-relative">
+                {/* Custom Org Picker Button */}
+                <button
+                  ref={orgPickerRef}
+                  type="button"
+                  className="w-100 d-flex align-items-center gap-2 px-1 py-2 bg-white border rounded sidebar-nav-trigger"
+                  style={{
+                    cursor: isSettingOrg ? 'wait' : 'pointer',
+                    opacity: isSettingOrg ? 0.7 : 1
+                  }}
+                  onClick={() => !isSettingOrg && setIsOrgPickerOpen(v => !v)}
+                  disabled={isSettingOrg}
+                  aria-expanded={isOrgPickerOpen}
+                  aria-haspopup="listbox"
+                >
+                  <OptimizedImage
+                    src={getOrgIcon(activeMembership)}
+                    alt={getOrgDisplayName(activeMembership)}
+                    width={32}
+                    height={32}
+                    className="rounded-circle object-fit-cover"
+                  />
+                  <span className="flex-grow-1 text-start text-truncate">
+                    {getOrgDisplayName(activeMembership)}
+                  </span>
+                  <i className={`bi bi-chevron-${isOrgPickerOpen ? 'up' : 'down'}`} />
+                </button>
+
+                {/* Org Picker Dropdown (Portal) */}
+                {isOrgPickerOpen && createPortal(
+                  <div
+                    ref={orgMenuRef}
+                    role="listbox"
+                    className="shadow-sm rounded border bg-white"
+                    style={{
+                      position: 'fixed',
+                      zIndex: 3000,
+                      left: orgPickerRef.current?.getBoundingClientRect().left || 0,
+                      top: (orgPickerRef.current?.getBoundingClientRect().bottom || 0) + 4,
+                      width: orgPickerRef.current?.getBoundingClientRect().width || 200,
+                      maxHeight: 300,
+                      overflowY: 'auto',
+                      padding: '4px'
+                    }}
+                  >
+                    {(() => {
+                      const personalOrgs = orgMemberships.filter(
+                        (m) => isPersonalMembership(m)
+                      )
+                      const businessOrgs = orgMemberships.filter(
+                        (m) => !isPersonalMembership(m)
+                      )
+
+                      const renderOrgButton = (membership: typeof orgMemberships[0]) => {
+                        const isActive = membership.orgId === activeOrgId
+                        const displayName = getOrgDisplayName(membership)
+                        return (
+                          <button
+                            key={membership.id}
+                            type="button"
+                            role="option"
+                            className={`w-100 text-start d-flex align-items-center gap-2 px-1 py-2 bg-transparent border-0 rounded org-option ${isActive ? 'active' : ''}`}
+                            onClick={() => handleOrgChange(membership.orgId)}
+                            aria-selected={isActive}
+                          >
+                            <OptimizedImage
+                              src={getOrgIcon(membership)}
+                              alt={displayName}
+                              width={24}
+                              height={24}
+                              className="rounded-circle object-fit-cover"
+                            />
+                            <span className="flex-grow-1 text-truncate">
+                              {displayName}
+                            </span>
+                            {isActive && <i className="bi bi-check2" />}
+                          </button>
+                        )
+                      }
+
+                      return (
+                        <>
+                          {personalOrgs.map(renderOrgButton)}
+                          {personalOrgs.length > 0 && businessOrgs.length > 0 && (
+                            <div className="border-top my-1">
+                              <small className="d-block px-1 pt-2 pb-1 text-muted" style={{ fontSize: '0.7rem', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Organizations</small>
+                            </div>
+                          )}
+                          {businessOrgs.map(renderOrgButton)}
+                        </>
+                      )
+                    })()}
+
+                    {/* Add Organization Button */}
+                    <div className="border-top mt-1 pt-1">
+                      <a
+                        className="w-100 text-start d-flex align-items-center gap-2 px-1 py-2 bg-transparent border-0 rounded org-option add-org-btn text-decoration-none"
+                        href="/settings/organizations/new"
+                        onClick={() => setIsOrgPickerOpen(false)}
+                      >
+                        <div className="d-flex align-items-center justify-content-center rounded-circle bg-light" style={{ width: 24, height: 24 }}>
+                          <i className="bi bi-plus" style={{ fontSize: '1rem' }} />
+                        </div>
+                        <span className="flex-grow-1 fw-semibold">Add Organization</span>
+                      </a>
+                    </div>
+                  </div>,
+                  document.body
+                )}
+
+                <style jsx global>{`
+                  .org-option {
+                    transition: background-color .12s ease;
+                  }
+                  .org-option:hover,
+                  .org-option:focus-visible {
+                    background: var(--bs-alice-blue, #eff5fb) !important;
+                    outline: none;
+                  }
+                  .org-option.active {
+                    background: var(--bs-alice-blue, #eff5fb) !important;
+                    color: var(--bs-dark-900, #111117);
+                  }
+                `}</style>
+              </div>
+            )}
+
+            {sidebarTopContent && sidebarTopContent(isCollapsed, setIsCollapsed)}
+
+            {/* Main nav: custom renderer or resolved default */}
+            {mainNavContent}
+
+            {sidebarContent && sidebarContent(isCollapsed, setIsCollapsed)}
+          </div>
+
+          {/* Mobile expand toggle */}
+          {isMobile && !isMobileOpen && (
+            <Button
+              onClick={() => setIsMobileOpen(true)}
+              className="d-block d-md-none position-fixed"
+              title="Open Sidebar"
+              ariaLabel="Open Sidebar"
+              style={{
+                top: '1rem',
+                left: '1rem',
+                height: '18px',
+                width: '18px',
+                margin: 0,
+                padding: 0,
+                minWidth: 'unset',
+                zIndex: 1100
+              }}
+            >
+              <i className="bi bi-layout-sidebar-reverse" />
+            </Button>
+          )}
+        </>
+      )}
+
+      <div
+        className={`flex-grow-1 d-flex flex-column align-items-center`}
+        style={{ overflowY: isAuthenticated ? 'auto' : 'visible', width: '100%' }}
+      >
+        {isBlogPage ? (
+          // ✅ Blog pages: no mainContentArea wrapper (no id / no padding classes)
+          <div className={`d-flex justify-content-start flex-column w-100 ${isSlugPage || hasMarketplaceHeader
+                ? ''
+                : !isAuthenticated
+                  ? isMainBlogPage
+                    ? 'container px-4'
+                    : ''
+                  : isBlogDetailPage
+                    ? ''
+                    : 'authenticated-padding'
+              }`}>{children}</div>
+        ) : (
+          // ✅ Everything else: keep mainContentArea behavior
+          <div
+            {...mainContentAreaIdProps}
+            className={`d-flex justify-content-start flex-column w-100 ${isSlugPage || hasMarketplaceHeader
+                ? ''
+                : !isAuthenticated
+                  ? useMainContentAreaId
+                    ? 'unauthenticated-padding'
+                    : ''
+                  : useMainContentAreaId
+                    ? ''
+                    : 'authenticated-padding'
+              }`}
+          >
+            {children}
+          </div>
+        )}
+      </div>
+
+    </div>
+  )
+}
+
+export default SideNavLayout