feat: Linear-style sidebar with explicit toggle
Rewrite sidebar from scratch: 256px expanded, 56px collapsed via click toggle + [ keyboard shortcut. Two-phase CSS transitions (labels fade then width contracts). Contextual ContentHeader replaces UtilityBar (no logo, just actions). Remove framer-motion sidebar primitive, hover-to-expand, and sidebar-context.
This commit is contained in:
Usman Baig
@@ -3,7 +3,7 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import Link from 'next/link'
|
||||
import { ThemeToggle, AppLauncher, UserMenu, type CipheraApp } from '@ciphera-net/ui'
|
||||
import { ThemeToggle, AppLauncher, UserMenu, type CipheraApp, MenuIcon } from '@ciphera-net/ui'
|
||||
import { useAuth } from '@/lib/auth/context'
|
||||
import { useSettingsModal } from '@/lib/settings-modal-context'
|
||||
import { getUserOrganizations, switchContext, type OrganizationMember } from '@/lib/api/organization'
|
||||
@@ -38,7 +38,11 @@ const CIPHERA_APPS: CipheraApp[] = [
|
||||
},
|
||||
]
|
||||
|
||||
export default function UtilityBar() {
|
||||
export default function ContentHeader({
|
||||
onMobileMenuOpen,
|
||||
}: {
|
||||
onMobileMenuOpen: () => void
|
||||
}) {
|
||||
const auth = useAuth()
|
||||
const router = useRouter()
|
||||
const { openSettings } = useSettingsModal()
|
||||
@@ -48,7 +52,7 @@ export default function UtilityBar() {
|
||||
if (auth.user) {
|
||||
getUserOrganizations()
|
||||
.then((organizations) => setOrgs(Array.isArray(organizations) ? organizations : []))
|
||||
.catch(err => logger.error('Failed to fetch orgs for utility bar', err))
|
||||
.catch(err => logger.error('Failed to fetch orgs', err))
|
||||
}
|
||||
}, [auth.user])
|
||||
|
||||
@@ -65,33 +69,22 @@ export default function UtilityBar() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="shrink-0 flex items-center justify-between border-b border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-4 sm:px-8 py-3.5">
|
||||
{/* Left: Pulse logo */}
|
||||
<div className="shrink-0 flex items-center justify-between border-b border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-4 sm:px-6 py-3.5">
|
||||
{/* Left: mobile hamburger */}
|
||||
<div className="flex items-center gap-3">
|
||||
<Link
|
||||
href="/"
|
||||
className="flex items-center gap-3 group relative"
|
||||
<button
|
||||
onClick={onMobileMenuOpen}
|
||||
className="md:hidden p-2 -ml-2 text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white"
|
||||
aria-label="Open navigation"
|
||||
>
|
||||
<div className="relative w-10 h-10 sm:w-11 sm:h-11 flex items-center justify-center shrink-0">
|
||||
<img
|
||||
src="/pulse_icon_no_margins.png"
|
||||
alt="Pulse Logo"
|
||||
className="w-full h-full object-contain group-hover:scale-105 transition-transform duration-300 transform-gpu will-change-transform [backface-visibility:hidden]"
|
||||
/>
|
||||
</div>
|
||||
<span className="text-xl sm:text-2xl font-bold text-neutral-900 dark:text-white tracking-tight group-hover:text-brand-orange transition-colors duration-300">
|
||||
Pulse
|
||||
</span>
|
||||
</Link>
|
||||
<MenuIcon className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Right: actions */}
|
||||
<div className="flex items-center gap-3">
|
||||
<ThemeToggle />
|
||||
<AppLauncher
|
||||
apps={CIPHERA_APPS}
|
||||
currentAppId="pulse"
|
||||
/>
|
||||
<AppLauncher apps={CIPHERA_APPS} currentAppId="pulse" />
|
||||
<NotificationCenter />
|
||||
<UserMenu
|
||||
auth={auth}
|
||||
@@ -1,7 +1,8 @@
|
||||
'use client'
|
||||
|
||||
import PulseSidebar from './Sidebar'
|
||||
import UtilityBar from './UtilityBar'
|
||||
import { useState, useCallback } from 'react'
|
||||
import Sidebar from './Sidebar'
|
||||
import ContentHeader from './ContentHeader'
|
||||
|
||||
export default function DashboardShell({
|
||||
siteId,
|
||||
@@ -10,12 +11,21 @@ export default function DashboardShell({
|
||||
siteId: string
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
const [mobileOpen, setMobileOpen] = useState(false)
|
||||
const closeMobile = useCallback(() => setMobileOpen(false), [])
|
||||
const openMobile = useCallback(() => setMobileOpen(true), [])
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-screen overflow-hidden">
|
||||
<UtilityBar />
|
||||
<div className="flex flex-1 overflow-hidden">
|
||||
<PulseSidebar siteId={siteId} />
|
||||
<main className="flex-1 min-w-0 overflow-y-auto">
|
||||
<div className="flex h-screen overflow-hidden">
|
||||
<Sidebar
|
||||
siteId={siteId}
|
||||
mobileOpen={mobileOpen}
|
||||
onMobileClose={closeMobile}
|
||||
onMobileOpen={openMobile}
|
||||
/>
|
||||
<div className="flex-1 flex flex-col min-w-0 overflow-hidden">
|
||||
<ContentHeader onMobileMenuOpen={openMobile} />
|
||||
<main className="flex-1 overflow-y-auto">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
|
||||
@@ -1,17 +1,10 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect, useRef } from 'react'
|
||||
import { useState, useEffect, useRef, useCallback } from 'react'
|
||||
import Link from 'next/link'
|
||||
import { usePathname, useRouter } from 'next/navigation'
|
||||
import { motion } from 'framer-motion'
|
||||
import { listSites, type Site } from '@/lib/api/sites'
|
||||
import { useAuth } from '@/lib/auth/context'
|
||||
import {
|
||||
Sidebar as SidebarPrimitive,
|
||||
SidebarBody,
|
||||
SidebarLink,
|
||||
useSidebar,
|
||||
} from '@/components/ui/sidebar'
|
||||
import {
|
||||
LayoutDashboardIcon,
|
||||
PathIcon,
|
||||
@@ -21,14 +14,22 @@ import {
|
||||
CloudUploadIcon,
|
||||
HeartbeatIcon,
|
||||
SettingsIcon,
|
||||
CollapseLeftIcon,
|
||||
CollapseRightIcon,
|
||||
ChevronUpDownIcon,
|
||||
PlusIcon,
|
||||
XIcon,
|
||||
MenuIcon,
|
||||
} from '@ciphera-net/ui'
|
||||
|
||||
const SIDEBAR_KEY = 'pulse_sidebar_collapsed'
|
||||
|
||||
type IconWeight = 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone'
|
||||
|
||||
interface NavItem {
|
||||
label: string
|
||||
href: (siteId: string) => string
|
||||
icon: React.ComponentType<{ className?: string; weight?: 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone' }>
|
||||
icon: React.ComponentType<{ className?: string; weight?: IconWeight }>
|
||||
matchPrefix?: boolean
|
||||
}
|
||||
|
||||
@@ -64,61 +65,72 @@ const SETTINGS_ITEM: NavItem = {
|
||||
matchPrefix: true,
|
||||
}
|
||||
|
||||
function SitePicker({ sites, siteId }: { sites: Site[]; siteId: string }) {
|
||||
const { open: sidebarOpen } = useSidebar()
|
||||
// ─── Site Picker ────────────────────────────────────────────
|
||||
|
||||
function SitePicker({
|
||||
sites,
|
||||
siteId,
|
||||
collapsed,
|
||||
}: {
|
||||
sites: Site[]
|
||||
siteId: string
|
||||
collapsed: boolean
|
||||
}) {
|
||||
const [open, setOpen] = useState(false)
|
||||
const [search, setSearch] = useState('')
|
||||
const ref = useRef<HTMLDivElement>(null)
|
||||
const pathname = usePathname()
|
||||
const router = useRouter()
|
||||
|
||||
const currentSite = sites.find((s) => s.id === siteId)
|
||||
const initial = currentSite?.name?.charAt(0)?.toUpperCase() || '?'
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (e: MouseEvent) => {
|
||||
const handler = (e: MouseEvent) => {
|
||||
if (ref.current && !ref.current.contains(e.target as Node)) {
|
||||
setOpen(false)
|
||||
setSearch('')
|
||||
}
|
||||
}
|
||||
document.addEventListener('mousedown', handleClickOutside)
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside)
|
||||
document.addEventListener('mousedown', handler)
|
||||
return () => document.removeEventListener('mousedown', handler)
|
||||
}, [])
|
||||
|
||||
const switchSite = (id: string) => {
|
||||
router.push(`/sites/${id}${pathname.replace(/^\/sites\/[^/]+/, '')}`)
|
||||
setOpen(false)
|
||||
setSearch('')
|
||||
}
|
||||
|
||||
const filtered = sites.filter(
|
||||
(s) =>
|
||||
s.name.toLowerCase().includes(search.toLowerCase()) ||
|
||||
s.domain.toLowerCase().includes(search.toLowerCase())
|
||||
)
|
||||
|
||||
const switchSite = (id: string) => {
|
||||
const currentPageType = pathname.replace(/^\/sites\/[^/]+/, '')
|
||||
router.push(`/sites/${id}${currentPageType}`)
|
||||
setOpen(false)
|
||||
setSearch('')
|
||||
}
|
||||
|
||||
const initial = currentSite?.name?.charAt(0)?.toUpperCase() || '?'
|
||||
|
||||
return (
|
||||
<div className="relative mb-4" ref={ref}>
|
||||
<div className="relative px-3 mb-4" ref={ref}>
|
||||
<button
|
||||
onClick={() => setOpen(!open)}
|
||||
className="w-full flex items-center gap-2.5 rounded-lg px-1 py-2 text-sm font-medium text-neutral-700 dark:text-neutral-200 hover:bg-white/10 dark:hover:bg-white/5"
|
||||
className={`w-full flex items-center gap-2.5 rounded-lg px-2 py-2 text-sm font-medium text-neutral-700 dark:text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-800 ${
|
||||
collapsed ? 'justify-center' : ''
|
||||
}`}
|
||||
title={collapsed ? currentSite?.name || 'Select site' : undefined}
|
||||
>
|
||||
<span className="w-7 h-7 rounded-md bg-brand-orange/10 text-brand-orange flex items-center justify-center text-xs font-bold shrink-0">
|
||||
{initial}
|
||||
</span>
|
||||
{sidebarOpen && (
|
||||
<>
|
||||
<span
|
||||
className={`flex items-center gap-1 min-w-0 flex-1 overflow-hidden transition-opacity duration-150 ${
|
||||
collapsed ? 'opacity-0 w-0' : 'opacity-100'
|
||||
}`}
|
||||
>
|
||||
<span className="truncate flex-1 text-left">{currentSite?.name || 'Select site'}</span>
|
||||
<ChevronUpDownIcon className="w-4 h-4 text-neutral-400 shrink-0" />
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div className="absolute left-0 right-0 top-full mt-1 z-50 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-xl overflow-hidden min-w-[220px]">
|
||||
<div className="absolute left-3 right-3 top-full mt-1 z-50 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-xl overflow-hidden min-w-[220px]">
|
||||
<div className="p-2">
|
||||
<input
|
||||
type="text"
|
||||
@@ -169,110 +181,225 @@ function SitePicker({ sites, siteId }: { sites: Site[]; siteId: string }) {
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarContent({ siteId }: { siteId: string }) {
|
||||
const { user } = useAuth()
|
||||
const { open } = useSidebar()
|
||||
// ─── Nav Item ───────────────────────────────────────────────
|
||||
|
||||
function NavLink({
|
||||
item,
|
||||
siteId,
|
||||
collapsed,
|
||||
onClick,
|
||||
}: {
|
||||
item: NavItem
|
||||
siteId: string
|
||||
collapsed: boolean
|
||||
onClick?: () => void
|
||||
}) {
|
||||
const pathname = usePathname()
|
||||
const href = item.href(siteId)
|
||||
const active = item.matchPrefix ? pathname.startsWith(href) : pathname === href
|
||||
|
||||
return (
|
||||
<Link
|
||||
href={href}
|
||||
onClick={onClick}
|
||||
title={collapsed ? item.label : undefined}
|
||||
className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium ${
|
||||
collapsed ? 'justify-center' : ''
|
||||
} ${
|
||||
active
|
||||
? 'bg-brand-orange/10 text-brand-orange'
|
||||
: 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800'
|
||||
}`}
|
||||
>
|
||||
<item.icon className="w-[18px] h-[18px] shrink-0" weight={active ? 'fill' : 'regular'} />
|
||||
<span
|
||||
className={`whitespace-nowrap overflow-hidden transition-opacity duration-150 ${
|
||||
collapsed ? 'opacity-0 w-0' : 'opacity-100'
|
||||
}`}
|
||||
>
|
||||
{item.label}
|
||||
</span>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Main Sidebar ───────────────────────────────────────────
|
||||
|
||||
export default function Sidebar({
|
||||
siteId,
|
||||
mobileOpen,
|
||||
onMobileClose,
|
||||
onMobileOpen,
|
||||
}: {
|
||||
siteId: string
|
||||
mobileOpen: boolean
|
||||
onMobileClose: () => void
|
||||
onMobileOpen: () => void
|
||||
}) {
|
||||
const { user } = useAuth()
|
||||
const canEdit = user?.role === 'owner' || user?.role === 'admin'
|
||||
const pathname = usePathname()
|
||||
const [sites, setSites] = useState<Site[]>([])
|
||||
const [collapsed, setCollapsed] = useState(() => {
|
||||
if (typeof window === 'undefined') return false
|
||||
return localStorage.getItem(SIDEBAR_KEY) === 'true'
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
listSites().then(setSites).catch(() => {})
|
||||
}, [])
|
||||
|
||||
const isActive = (item: NavItem) => {
|
||||
const href = item.href(siteId)
|
||||
return item.matchPrefix ? pathname.startsWith(href) : pathname === href
|
||||
// Close mobile on navigation
|
||||
useEffect(() => {
|
||||
onMobileClose()
|
||||
}, [pathname, onMobileClose])
|
||||
|
||||
// Keyboard shortcut: [ to toggle
|
||||
useEffect(() => {
|
||||
const handler = (e: KeyboardEvent) => {
|
||||
if (e.key === '[' && !e.metaKey && !e.ctrlKey && !e.altKey) {
|
||||
const tag = (e.target as HTMLElement)?.tagName
|
||||
if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return
|
||||
e.preventDefault()
|
||||
toggle()
|
||||
}
|
||||
}
|
||||
document.addEventListener('keydown', handler)
|
||||
return () => document.removeEventListener('keydown', handler)
|
||||
}, [collapsed])
|
||||
|
||||
const toggle = useCallback(() => {
|
||||
setCollapsed((prev) => {
|
||||
const next = !prev
|
||||
localStorage.setItem(SIDEBAR_KEY, String(next))
|
||||
return next
|
||||
})
|
||||
}, [])
|
||||
|
||||
const sidebarContent = (isMobile: boolean) => {
|
||||
const isCollapsed = isMobile ? false : collapsed
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full overflow-x-hidden">
|
||||
{/* Logo */}
|
||||
<Link
|
||||
href="/"
|
||||
className={`flex items-center gap-3 px-5 py-5 shrink-0 group ${isCollapsed ? 'justify-center px-0' : ''}`}
|
||||
>
|
||||
<img
|
||||
src="/pulse_icon_no_margins.png"
|
||||
alt="Pulse"
|
||||
className="w-8 h-8 shrink-0 object-contain group-hover:scale-105 transition-transform duration-200"
|
||||
/>
|
||||
<span
|
||||
className={`text-lg font-bold text-neutral-900 dark:text-white tracking-tight group-hover:text-brand-orange transition-all duration-150 whitespace-nowrap overflow-hidden ${
|
||||
isCollapsed ? 'opacity-0 w-0' : 'opacity-100'
|
||||
}`}
|
||||
>
|
||||
Pulse
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
{/* Site Picker */}
|
||||
<SitePicker sites={sites} siteId={siteId} collapsed={isCollapsed} />
|
||||
|
||||
{/* Nav Groups */}
|
||||
<nav className="flex-1 overflow-y-auto overflow-x-hidden px-3 space-y-4">
|
||||
{NAV_GROUPS.map((group) => (
|
||||
<div key={group.label}>
|
||||
<div
|
||||
className={`overflow-hidden transition-all duration-150 ${
|
||||
isCollapsed ? 'h-2' : 'h-auto'
|
||||
}`}
|
||||
>
|
||||
{!isCollapsed && (
|
||||
<p className="px-2.5 mb-1 text-[11px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider">
|
||||
{group.label}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-0.5">
|
||||
{group.items.map((item) => (
|
||||
<NavLink
|
||||
key={item.label}
|
||||
item={item}
|
||||
siteId={siteId}
|
||||
collapsed={isCollapsed}
|
||||
onClick={isMobile ? onMobileClose : undefined}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{/* Bottom */}
|
||||
<div className="border-t border-neutral-200 dark:border-neutral-800 px-3 py-3 space-y-0.5 shrink-0">
|
||||
{canEdit && (
|
||||
<NavLink
|
||||
item={SETTINGS_ITEM}
|
||||
siteId={siteId}
|
||||
collapsed={isCollapsed}
|
||||
onClick={isMobile ? onMobileClose : undefined}
|
||||
/>
|
||||
)}
|
||||
{!isMobile && (
|
||||
<button
|
||||
onClick={toggle}
|
||||
className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-400 dark:text-neutral-500 hover:text-neutral-600 dark:hover:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 w-full ${
|
||||
isCollapsed ? 'justify-center' : ''
|
||||
}`}
|
||||
title={collapsed ? 'Expand sidebar (press [)' : 'Collapse sidebar (press [)'}
|
||||
>
|
||||
{collapsed ? (
|
||||
<CollapseRightIcon className="w-[18px] h-[18px] shrink-0" />
|
||||
) : (
|
||||
<>
|
||||
<CollapseLeftIcon className="w-[18px] h-[18px] shrink-0" />
|
||||
<span className="whitespace-nowrap overflow-hidden">Collapse</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
|
||||
{/* Site Picker */}
|
||||
<SitePicker sites={sites} siteId={siteId} />
|
||||
|
||||
{/* Nav Groups */}
|
||||
{NAV_GROUPS.map((group) => (
|
||||
<div key={group.label} className="mb-4">
|
||||
{open && (
|
||||
<motion.p
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
className="px-1 mb-1 text-[11px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider"
|
||||
{/* Desktop */}
|
||||
<aside
|
||||
className="hidden md:flex flex-col shrink-0 border-r border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 overflow-hidden"
|
||||
style={{
|
||||
width: collapsed ? 56 : 256,
|
||||
transition: 'width 200ms cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
}}
|
||||
>
|
||||
{group.label}
|
||||
</motion.p>
|
||||
)}
|
||||
<div className="flex flex-col gap-0.5">
|
||||
{group.items.map((item) => (
|
||||
<SidebarLink
|
||||
key={item.label}
|
||||
active={isActive(item)}
|
||||
link={{
|
||||
label: item.label,
|
||||
href: item.href(siteId),
|
||||
icon: (
|
||||
<item.icon
|
||||
className={`h-5 w-5 flex-shrink-0 ${
|
||||
isActive(item)
|
||||
? 'text-brand-orange'
|
||||
: 'text-neutral-700 dark:text-neutral-200'
|
||||
}`}
|
||||
weight={isActive(item) ? 'fill' : 'regular'}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
className={
|
||||
isActive(item)
|
||||
? 'bg-brand-orange/10 text-brand-orange rounded-lg px-1'
|
||||
: 'rounded-lg px-1'
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{sidebarContent(false)}
|
||||
</aside>
|
||||
|
||||
{/* Bottom: Settings */}
|
||||
<div className="border-t border-neutral-700/30 pt-3">
|
||||
{canEdit && (
|
||||
<SidebarLink
|
||||
active={isActive(SETTINGS_ITEM)}
|
||||
link={{
|
||||
label: SETTINGS_ITEM.label,
|
||||
href: SETTINGS_ITEM.href(siteId),
|
||||
icon: (
|
||||
<SETTINGS_ITEM.icon
|
||||
className={`h-5 w-5 flex-shrink-0 ${
|
||||
isActive(SETTINGS_ITEM)
|
||||
? 'text-brand-orange'
|
||||
: 'text-neutral-700 dark:text-neutral-200'
|
||||
}`}
|
||||
weight={isActive(SETTINGS_ITEM) ? 'fill' : 'regular'}
|
||||
{/* Mobile overlay */}
|
||||
{mobileOpen && (
|
||||
<>
|
||||
<div
|
||||
className="fixed inset-0 z-40 bg-black/30 md:hidden"
|
||||
onClick={onMobileClose}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
className={
|
||||
isActive(SETTINGS_ITEM)
|
||||
? 'bg-brand-orange/10 text-brand-orange rounded-lg px-1'
|
||||
: 'rounded-lg px-1'
|
||||
}
|
||||
/>
|
||||
)}
|
||||
<aside className="fixed inset-y-0 left-0 z-50 w-72 bg-white dark:bg-neutral-900 border-r border-neutral-200 dark:border-neutral-800 shadow-xl md:hidden animate-in slide-in-from-left duration-200">
|
||||
<div className="flex items-center justify-between px-4 py-3 border-b border-neutral-200 dark:border-neutral-800">
|
||||
<span className="text-sm font-semibold text-neutral-900 dark:text-white">Navigation</span>
|
||||
<button
|
||||
onClick={onMobileClose}
|
||||
className="p-1.5 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300"
|
||||
>
|
||||
<XIcon className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
{sidebarContent(true)}
|
||||
</aside>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default function PulseSidebar({ siteId }: { siteId: string }) {
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<SidebarPrimitive open={open} setOpen={setOpen}>
|
||||
<SidebarBody className="justify-between gap-6 border-r border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900">
|
||||
<SidebarContent siteId={siteId} />
|
||||
</SidebarBody>
|
||||
</SidebarPrimitive>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,191 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import Link, { LinkProps } from "next/link";
|
||||
import React, { useState, createContext, useContext } from "react";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { List as Menu, X } from "@phosphor-icons/react";
|
||||
|
||||
interface Links {
|
||||
label: string;
|
||||
href: string;
|
||||
icon: React.JSX.Element | React.ReactNode;
|
||||
}
|
||||
|
||||
interface SidebarContextProps {
|
||||
open: boolean;
|
||||
setOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
animate: boolean;
|
||||
}
|
||||
|
||||
const SidebarContext = createContext<SidebarContextProps | undefined>(
|
||||
undefined
|
||||
);
|
||||
|
||||
export const useSidebar = () => {
|
||||
const context = useContext(SidebarContext);
|
||||
if (!context) {
|
||||
throw new Error("useSidebar must be used within a SidebarProvider");
|
||||
}
|
||||
return context;
|
||||
};
|
||||
|
||||
export const SidebarProvider = ({
|
||||
children,
|
||||
open: openProp,
|
||||
setOpen: setOpenProp,
|
||||
animate = true,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
open?: boolean;
|
||||
setOpen?: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
animate?: boolean;
|
||||
}) => {
|
||||
const [openState, setOpenState] = useState(false);
|
||||
|
||||
const open = openProp !== undefined ? openProp : openState;
|
||||
const setOpen = setOpenProp !== undefined ? setOpenProp : setOpenState;
|
||||
|
||||
return (
|
||||
<SidebarContext.Provider value={{ open, setOpen, animate }}>
|
||||
{children}
|
||||
</SidebarContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export const Sidebar = ({
|
||||
children,
|
||||
open,
|
||||
setOpen,
|
||||
animate,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
open?: boolean;
|
||||
setOpen?: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
animate?: boolean;
|
||||
}) => {
|
||||
return (
|
||||
<SidebarProvider open={open} setOpen={setOpen} animate={animate}>
|
||||
{children}
|
||||
</SidebarProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export const SidebarBody = (props: React.ComponentProps<typeof motion.div>) => {
|
||||
return (
|
||||
<>
|
||||
<DesktopSidebar {...props} />
|
||||
<MobileSidebar {...(props as React.ComponentProps<"div">)} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const DesktopSidebar = ({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof motion.div>) => {
|
||||
const { open, setOpen, animate } = useSidebar();
|
||||
return (
|
||||
<motion.div
|
||||
className={cn(
|
||||
"h-full px-4 py-4 hidden md:flex md:flex-col bg-neutral-100 dark:bg-neutral-800 w-[300px] flex-shrink-0",
|
||||
className
|
||||
)}
|
||||
animate={{
|
||||
width: animate ? (open ? "300px" : "60px") : "300px",
|
||||
}}
|
||||
onMouseEnter={() => setOpen(true)}
|
||||
onMouseLeave={() => setOpen(false)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
export const MobileSidebar = ({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<"div">) => {
|
||||
const { open, setOpen } = useSidebar();
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={cn(
|
||||
"h-10 px-4 py-4 flex flex-row md:hidden items-center justify-between bg-neutral-100 dark:bg-neutral-800 w-full"
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<div className="flex justify-end z-20 w-full">
|
||||
<Menu
|
||||
className="text-neutral-800 dark:text-neutral-200 cursor-pointer"
|
||||
onClick={() => setOpen(!open)}
|
||||
/>
|
||||
</div>
|
||||
<AnimatePresence>
|
||||
{open && (
|
||||
<motion.div
|
||||
initial={{ x: "-100%", opacity: 0 }}
|
||||
animate={{ x: 0, opacity: 1 }}
|
||||
exit={{ x: "-100%", opacity: 0 }}
|
||||
transition={{
|
||||
duration: 0.3,
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
className={cn(
|
||||
"fixed h-full w-full inset-0 bg-white dark:bg-neutral-900 p-10 z-[100] flex flex-col justify-between",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className="absolute right-10 top-10 z-50 text-neutral-800 dark:text-neutral-200 cursor-pointer"
|
||||
onClick={() => setOpen(!open)}
|
||||
>
|
||||
<X />
|
||||
</div>
|
||||
{children}
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const SidebarLink = ({
|
||||
link,
|
||||
className,
|
||||
active,
|
||||
...props
|
||||
}: {
|
||||
link: Links;
|
||||
className?: string;
|
||||
active?: boolean;
|
||||
props?: LinkProps;
|
||||
}) => {
|
||||
const { open, animate } = useSidebar();
|
||||
return (
|
||||
<Link
|
||||
href={link.href}
|
||||
className={cn(
|
||||
"flex items-center justify-start gap-2 group/sidebar py-2",
|
||||
active && "text-brand-orange",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{link.icon}
|
||||
<motion.span
|
||||
animate={{
|
||||
display: animate ? (open ? "inline-block" : "none") : "inline-block",
|
||||
opacity: animate ? (open ? 1 : 0) : 1,
|
||||
}}
|
||||
className="text-neutral-700 dark:text-neutral-200 text-sm group-hover/sidebar:translate-x-1 transition duration-150 whitespace-pre inline-block !p-0 !m-0"
|
||||
>
|
||||
{link.label}
|
||||
</motion.span>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
@@ -1,31 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import { createContext, useCallback, useContext, useState } from 'react'
|
||||
|
||||
interface SidebarContextValue {
|
||||
mobileOpen: boolean
|
||||
openMobile: () => void
|
||||
closeMobile: () => void
|
||||
}
|
||||
|
||||
const SidebarContext = createContext<SidebarContextValue>({
|
||||
mobileOpen: false,
|
||||
openMobile: () => {},
|
||||
closeMobile: () => {},
|
||||
})
|
||||
|
||||
export function SidebarProvider({ children }: { children: React.ReactNode }) {
|
||||
const [mobileOpen, setMobileOpen] = useState(false)
|
||||
const openMobile = useCallback(() => setMobileOpen(true), [])
|
||||
const closeMobile = useCallback(() => setMobileOpen(false), [])
|
||||
|
||||
return (
|
||||
<SidebarContext.Provider value={{ mobileOpen, openMobile, closeMobile }}>
|
||||
{children}
|
||||
</SidebarContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export function useSidebar() {
|
||||
return useContext(SidebarContext)
|
||||
}
|
||||
Reference in New Issue
Block a user