Removed top bar, and updating sidebar
This commit is contained in:
@@ -10,7 +10,7 @@ interface CvmisLogoProps {
|
||||
|
||||
// ── Animation timing constants ──────────────────────────────────────
|
||||
// Rise phase: all pills rise together from below
|
||||
const RISE_DURATION_MS = 2500 // duration of the upward rise (ms)
|
||||
const RISE_DURATION_MS = 1250 // duration of the upward rise (ms)
|
||||
const RISE_DURATION_S = RISE_DURATION_MS / 1000
|
||||
const RISE_OPACITY_DURATION_S = 0.25 // opacity fade-in during rise (s)
|
||||
const RISE_EASING: [number, number, number, number] = [0.33, 1, 0.68, 1]
|
||||
@@ -18,11 +18,11 @@ const RISE_START_Y = 350 // initial Y offset (viewBox units)
|
||||
|
||||
// Fan phase: left and right pills fan outward
|
||||
const FAN_DELAY_AFTER_RISE_MS = RISE_DURATION_MS - 100 // delay before fan begins (ms from mount)
|
||||
const FAN_DURATION_S = 1 // duration of fan-out (s)
|
||||
const FAN_DURATION_S = 2 // duration of fan-out (s)
|
||||
const FAN_EASING = 'cubic-bezier(0.34, 1.56, 0.64, 1)'
|
||||
const FAN_ROTATION_DEG = 55 // rotation angle for fanned pills (±degrees)
|
||||
const FAN_HORIZONTAL_PX = 10 // horizontal offset for fanned pills (±px)
|
||||
const FAN_RIGHT_STAGGER_S = 0.0 // stagger delay for right pill (s)
|
||||
const FAN_HORIZONTAL_PX = -10 // horizontal offset for fanned pills (±px)
|
||||
const FAN_RIGHT_STAGGER_S = 0 // stagger delay for right pill (s)
|
||||
|
||||
// Total animation = rise delay + fan duration
|
||||
const TOTAL_ANIMATION_MS = FAN_DELAY_AFTER_RISE_MS + FAN_DURATION_S * 1000
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
import React, { useState, useEffect, useCallback, useRef } from 'react'
|
||||
import { motion } from 'framer-motion'
|
||||
import { ChevronRight } from 'lucide-react'
|
||||
import { TopBar } from './TopBar'
|
||||
import { SubNav } from './SubNav'
|
||||
import Sidebar from './Sidebar'
|
||||
import { CommandPalette } from './CommandPalette'
|
||||
import { DetailPanel } from './DetailPanel'
|
||||
@@ -23,17 +21,6 @@ import type { PaletteAction } from '@/lib/search'
|
||||
|
||||
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
|
||||
|
||||
const topbarVariants = {
|
||||
hidden: prefersReducedMotion ? { y: 0, opacity: 1 } : { y: -48, opacity: 0 },
|
||||
visible: {
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
transition: prefersReducedMotion
|
||||
? { duration: 0 }
|
||||
: { duration: 0.2, ease: 'easeOut' },
|
||||
},
|
||||
}
|
||||
|
||||
const sidebarVariants = {
|
||||
hidden: prefersReducedMotion ? { x: 0, opacity: 1 } : { x: -272, opacity: 0 },
|
||||
visible: {
|
||||
@@ -279,17 +266,19 @@ export function DashboardLayout() {
|
||||
return () => observer.disconnect()
|
||||
}, [])
|
||||
|
||||
const handleSearchClick = () => {
|
||||
setCommandPaletteOpen(true)
|
||||
}
|
||||
|
||||
const handlePaletteClose = useCallback(() => {
|
||||
setCommandPaletteOpen(false)
|
||||
}, [])
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const handleSectionClick = useCallback((_sectionId: string) => {
|
||||
// SubNav handles scrolling internally
|
||||
const handleSearchClick = useCallback(() => {
|
||||
setCommandPaletteOpen(true)
|
||||
}, [])
|
||||
|
||||
const scrollToSection = useCallback((tileId: string) => {
|
||||
const tileEl = document.querySelector(`[data-tile-id="${tileId}"]`)
|
||||
if (tileEl) {
|
||||
tileEl.scrollIntoView({ behavior: 'smooth', block: 'start' })
|
||||
}
|
||||
}, [])
|
||||
|
||||
// Constellation graph handlers
|
||||
@@ -337,10 +326,7 @@ export function DashboardLayout() {
|
||||
const handlePaletteAction = useCallback((action: PaletteAction) => {
|
||||
switch (action.type) {
|
||||
case 'scroll': {
|
||||
const tileEl = document.querySelector(`[data-tile-id="${action.tileId}"]`)
|
||||
if (tileEl) {
|
||||
tileEl.scrollIntoView({ behavior: 'smooth', block: 'start' })
|
||||
}
|
||||
scrollToSection(action.tileId)
|
||||
break
|
||||
}
|
||||
case 'expand': {
|
||||
@@ -370,48 +356,64 @@ export function DashboardLayout() {
|
||||
break
|
||||
}
|
||||
}
|
||||
}, [openPanel])
|
||||
}, [openPanel, scrollToSection])
|
||||
|
||||
return (
|
||||
<div
|
||||
className="font-ui"
|
||||
style={{ background: 'var(--bg-dashboard)', minHeight: '100vh' }}
|
||||
style={{ background: 'var(--bg-dashboard)', height: '100vh', overflow: 'hidden' }}
|
||||
>
|
||||
{/* TopBar — fixed at top */}
|
||||
<motion.div initial="hidden" animate="visible" variants={topbarVariants}>
|
||||
<TopBar onSearchClick={handleSearchClick} />
|
||||
</motion.div>
|
||||
<a
|
||||
href="#main-content"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '-48px',
|
||||
left: 0,
|
||||
background: 'var(--accent)',
|
||||
color: '#FFFFFF',
|
||||
padding: '8px 16px',
|
||||
textDecoration: 'none',
|
||||
zIndex: 120,
|
||||
borderRadius: '0 0 4px 0',
|
||||
fontSize: '14px',
|
||||
fontWeight: 600,
|
||||
}}
|
||||
onFocus={(e) => {
|
||||
e.currentTarget.style.top = '0'
|
||||
}}
|
||||
onBlur={(e) => {
|
||||
e.currentTarget.style.top = '-48px'
|
||||
}}
|
||||
>
|
||||
Skip to main content
|
||||
</a>
|
||||
|
||||
{/* SubNav — sticky below TopBar */}
|
||||
<SubNav activeSection={activeSection} onSectionClick={handleSectionClick} />
|
||||
|
||||
{/* Layout below TopBar + SubNav: Sidebar + Main */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
marginTop: 'calc(var(--topbar-height) + var(--subnav-height))',
|
||||
height: 'calc(100vh - var(--topbar-height) - var(--subnav-height))',
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
{/* Sidebar — hidden on mobile/tablet, visible on desktop */}
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
variants={sidebarVariants}
|
||||
className="hidden lg:block"
|
||||
style={{ flexShrink: 0 }}
|
||||
>
|
||||
<Sidebar />
|
||||
<Sidebar
|
||||
activeSection={activeSection}
|
||||
onNavigate={scrollToSection}
|
||||
onSearchClick={handleSearchClick}
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
{/* Main content — scrollable card grid */}
|
||||
<motion.main
|
||||
id="main-content"
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
variants={contentVariants}
|
||||
aria-label="Dashboard content"
|
||||
className="pmr-scrollbar p-5 pb-10 md:p-7 md:pb-12 lg:px-8 lg:pt-7 lg:pb-12"
|
||||
className="dashboard-main pmr-scrollbar p-5 pb-10 md:p-7 md:pb-12 lg:px-8 lg:pt-7 lg:pb-12"
|
||||
style={{
|
||||
flex: 1,
|
||||
overflowY: 'auto',
|
||||
|
||||
+431
-284
@@ -1,11 +1,47 @@
|
||||
import { AlertTriangle, AlertCircle } from 'lucide-react'
|
||||
import { useEffect, useState } from 'react'
|
||||
import type { CSSProperties, ReactNode } from 'react'
|
||||
import {
|
||||
AlertCircle,
|
||||
AlertTriangle,
|
||||
GraduationCap,
|
||||
type LucideIcon,
|
||||
Menu,
|
||||
Pill,
|
||||
Search,
|
||||
UserRound,
|
||||
Workflow,
|
||||
Wrench,
|
||||
X,
|
||||
} from 'lucide-react'
|
||||
import cvmisLogo from '../../cvmis-logo.svg'
|
||||
import { patient } from '@/data/patient'
|
||||
import { tags } from '@/data/tags'
|
||||
import { alerts } from '@/data/alerts'
|
||||
import type { Tag, Alert } from '@/types/pmr'
|
||||
|
||||
interface SidebarProps {
|
||||
activeSection: string
|
||||
onNavigate: (tileId: string) => void
|
||||
onSearchClick: () => void
|
||||
}
|
||||
|
||||
interface NavSection {
|
||||
id: string
|
||||
label: string
|
||||
tileId: string
|
||||
Icon: LucideIcon
|
||||
}
|
||||
|
||||
const navSections: NavSection[] = [
|
||||
{ id: 'overview', label: 'Overview', tileId: 'patient-summary', Icon: UserRound },
|
||||
{ id: 'projects', label: 'Projects', tileId: 'projects', Icon: Pill },
|
||||
{ id: 'experience', label: 'Experience', tileId: 'section-experience', Icon: Workflow },
|
||||
{ id: 'education', label: 'Education', tileId: 'section-education', Icon: GraduationCap },
|
||||
{ id: 'skills', label: 'Skills', tileId: 'section-skills', Icon: Wrench },
|
||||
]
|
||||
|
||||
interface SectionTitleProps {
|
||||
children: React.ReactNode
|
||||
children: ReactNode
|
||||
}
|
||||
|
||||
function SectionTitle({ children }: SectionTitleProps) {
|
||||
@@ -40,7 +76,7 @@ interface TagPillProps {
|
||||
}
|
||||
|
||||
function TagPill({ tag }: TagPillProps) {
|
||||
const styles: Record<Tag['colorVariant'], React.CSSProperties> = {
|
||||
const styles: Record<Tag['colorVariant'], CSSProperties> = {
|
||||
teal: {
|
||||
background: 'var(--accent-light)',
|
||||
color: 'var(--accent)',
|
||||
@@ -82,7 +118,7 @@ interface AlertFlagProps {
|
||||
function AlertFlag({ alert }: AlertFlagProps) {
|
||||
const Icon = alert.icon === 'AlertTriangle' ? AlertTriangle : AlertCircle
|
||||
|
||||
const styles: Record<Alert['severity'], React.CSSProperties> = {
|
||||
const styles: Record<Alert['severity'], CSSProperties> = {
|
||||
alert: {
|
||||
background: 'var(--alert-light)',
|
||||
color: 'var(--alert)',
|
||||
@@ -126,308 +162,419 @@ function AlertFlag({ alert }: AlertFlagProps) {
|
||||
)
|
||||
}
|
||||
|
||||
export default function Sidebar() {
|
||||
export default function Sidebar({ activeSection, onNavigate, onSearchClick }: SidebarProps) {
|
||||
const [isDesktop, setIsDesktop] = useState(() => window.matchMedia('(min-width: 1024px)').matches)
|
||||
const [isMobileExpanded, setIsMobileExpanded] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
const mediaQuery = window.matchMedia('(min-width: 1024px)')
|
||||
const updateDesktopState = (event: MediaQueryListEvent | MediaQueryList) => {
|
||||
const desktopMode = event.matches
|
||||
setIsDesktop(desktopMode)
|
||||
if (desktopMode) {
|
||||
setIsMobileExpanded(false)
|
||||
}
|
||||
}
|
||||
|
||||
updateDesktopState(mediaQuery)
|
||||
|
||||
const listener = (event: MediaQueryListEvent) => updateDesktopState(event)
|
||||
mediaQuery.addEventListener('change', listener)
|
||||
|
||||
return () => mediaQuery.removeEventListener('change', listener)
|
||||
}, [])
|
||||
|
||||
const isExpanded = isDesktop || isMobileExpanded
|
||||
|
||||
const handleNavActivate = (tileId: string) => {
|
||||
onNavigate(tileId)
|
||||
if (!isDesktop) {
|
||||
setIsMobileExpanded(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<aside
|
||||
style={{
|
||||
width: 'var(--sidebar-width)',
|
||||
minWidth: 'var(--sidebar-width)',
|
||||
background: 'var(--sidebar-bg)',
|
||||
borderRight: '1px solid var(--border)',
|
||||
overflowY: 'auto',
|
||||
padding: '24px 20px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '2px',
|
||||
}}
|
||||
className="pmr-scrollbar"
|
||||
>
|
||||
{/* PersonHeader Section */}
|
||||
<div
|
||||
<>
|
||||
{!isDesktop && isMobileExpanded && (
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Close sidebar navigation"
|
||||
onClick={() => setIsMobileExpanded(false)}
|
||||
style={{
|
||||
position: 'fixed',
|
||||
inset: 0,
|
||||
background: 'rgba(26,43,42,0.28)',
|
||||
border: 'none',
|
||||
zIndex: 108,
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<aside
|
||||
id="sidebar-panel"
|
||||
aria-label="Sidebar"
|
||||
style={{
|
||||
borderBottom: '2px solid var(--accent)',
|
||||
paddingBottom: '16px',
|
||||
marginBottom: '10px',
|
||||
position: isDesktop ? 'relative' : 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
width: isExpanded ? 'var(--sidebar-width)' : 'var(--sidebar-rail-width)',
|
||||
minWidth: isExpanded ? 'var(--sidebar-width)' : 'var(--sidebar-rail-width)',
|
||||
background: 'var(--sidebar-bg)',
|
||||
borderRight: '1px solid var(--border)',
|
||||
overflowY: isExpanded ? 'auto' : 'hidden',
|
||||
overflowX: 'hidden',
|
||||
padding: isExpanded ? '6px 16px' : '12px 8px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '10px',
|
||||
transition: 'width 180ms ease-out, min-width 180ms ease-out, padding 180ms ease-out',
|
||||
zIndex: isDesktop ? 'auto' : 110,
|
||||
}}
|
||||
className={isExpanded ? 'pmr-scrollbar' : undefined}
|
||||
>
|
||||
{/* Avatar */}
|
||||
<div
|
||||
style={{
|
||||
width: '60px',
|
||||
height: '60px',
|
||||
borderRadius: '50%',
|
||||
background: 'linear-gradient(135deg, var(--accent), #0A8080)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
color: '#FFFFFF',
|
||||
fontSize: '20px',
|
||||
fontWeight: 700,
|
||||
boxShadow: '0 2px 8px rgba(13,110,110,0.25)',
|
||||
marginBottom: '12px',
|
||||
}}
|
||||
>
|
||||
AC
|
||||
</div>
|
||||
|
||||
{/* Name */}
|
||||
<div
|
||||
style={{
|
||||
fontSize: '17px',
|
||||
fontWeight: 700,
|
||||
color: 'var(--text-primary)',
|
||||
letterSpacing: '-0.01em',
|
||||
}}
|
||||
>
|
||||
CHARLWOOD, Andrew
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<div
|
||||
style={{
|
||||
fontSize: '13px',
|
||||
fontFamily: 'Geist Mono, monospace',
|
||||
fontWeight: 400,
|
||||
color: 'var(--text-secondary)',
|
||||
marginTop: '2px',
|
||||
}}
|
||||
>
|
||||
Pharmacy Data Technologist
|
||||
</div>
|
||||
|
||||
{/* Status badge */}
|
||||
<div
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: '5px',
|
||||
marginTop: '8px',
|
||||
fontSize: '12px',
|
||||
fontWeight: 500,
|
||||
color: 'var(--success)',
|
||||
background: 'var(--success-light)',
|
||||
border: '1px solid var(--success-border)',
|
||||
padding: '3px 9px',
|
||||
borderRadius: '20px',
|
||||
}}
|
||||
>
|
||||
<span
|
||||
{!isDesktop && (
|
||||
<button
|
||||
type="button"
|
||||
aria-label={isExpanded ? 'Collapse sidebar navigation' : 'Expand sidebar navigation'}
|
||||
aria-expanded={isExpanded}
|
||||
aria-controls="sidebar-panel"
|
||||
onClick={() => setIsMobileExpanded((prev) => !prev)}
|
||||
className="sidebar-control"
|
||||
style={{
|
||||
width: '7px',
|
||||
height: '7px',
|
||||
borderRadius: '50%',
|
||||
background: 'var(--success)',
|
||||
animation: 'pulse 2s infinite',
|
||||
}}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span>{patient.badge}</span>
|
||||
</div>
|
||||
|
||||
{/* Details grid */}
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '1fr',
|
||||
gap: '8px',
|
||||
marginTop: '12px',
|
||||
}}
|
||||
>
|
||||
{/* GPhC No. */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
width: '100%',
|
||||
minHeight: '44px',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
fontSize: '13px',
|
||||
padding: '4px 0',
|
||||
justifyContent: isExpanded ? 'space-between' : 'center',
|
||||
gap: '8px',
|
||||
border: '1px solid var(--border-light)',
|
||||
background: 'var(--surface)',
|
||||
borderRadius: 'var(--radius-sm)',
|
||||
color: 'var(--text-primary)',
|
||||
padding: isExpanded ? '0 12px' : '0',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
<span style={{ color: 'var(--text-tertiary)', fontWeight: 400 }}>
|
||||
GPhC No.
|
||||
</span>
|
||||
<span
|
||||
{isExpanded && <span style={{ fontSize: '12px', fontWeight: 600 }}>Menu</span>}
|
||||
{isExpanded ? <X size={17} strokeWidth={2.4} /> : <Menu size={18} strokeWidth={2.4} />}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{isExpanded && (
|
||||
<section style={{ borderBottom: '2px solid var(--accent)', paddingBottom: '16px' }}>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-start',
|
||||
gap: '6px',
|
||||
marginBottom: '4px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={cvmisLogo}
|
||||
alt="CVMIS"
|
||||
style={{
|
||||
width: '140px',
|
||||
height: 'auto',
|
||||
display: 'block',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
fontSize: '11px',
|
||||
color: 'var(--text-tertiary)',
|
||||
letterSpacing: '0.04em',
|
||||
lineHeight: 1.1,
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
CVMIS v1.0
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={onSearchClick}
|
||||
className="sidebar-control"
|
||||
aria-label="Search. Press Control plus K"
|
||||
style={{
|
||||
width: '100%',
|
||||
minHeight: '44px',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: 'var(--radius-sm)',
|
||||
background: 'var(--surface)',
|
||||
color: 'var(--text-secondary)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
padding: '0 10px',
|
||||
cursor: 'pointer',
|
||||
marginBottom: '8px',
|
||||
}}
|
||||
>
|
||||
<Search size={16} style={{ color: 'var(--text-tertiary)', flexShrink: 0 }} aria-hidden="true" />
|
||||
<span style={{ flex: 1, textAlign: 'left', fontSize: '13px' }}>
|
||||
Search
|
||||
</span>
|
||||
<kbd
|
||||
style={{
|
||||
fontSize: '11px',
|
||||
color: 'var(--text-tertiary)',
|
||||
background: 'var(--bg-dashboard)',
|
||||
border: '1px solid var(--border)',
|
||||
padding: '2px 6px',
|
||||
borderRadius: '4px',
|
||||
lineHeight: 1,
|
||||
}}
|
||||
>
|
||||
Ctrl+K
|
||||
</kbd>
|
||||
</button>
|
||||
|
||||
<SectionTitle>Patient Data</SectionTitle>
|
||||
|
||||
<div
|
||||
style={{
|
||||
width: '60px',
|
||||
height: '60px',
|
||||
borderRadius: '50%',
|
||||
background: 'linear-gradient(135deg, var(--accent), #0A8080)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
color: '#FFFFFF',
|
||||
fontSize: '20px',
|
||||
fontWeight: 700,
|
||||
boxShadow: '0 2px 8px rgba(13,110,110,0.25)',
|
||||
marginBottom: '12px',
|
||||
}}
|
||||
>
|
||||
AC
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
fontSize: '17px',
|
||||
fontWeight: 700,
|
||||
color: 'var(--text-primary)',
|
||||
fontWeight: 500,
|
||||
letterSpacing: '-0.01em',
|
||||
}}
|
||||
>
|
||||
CHARLWOOD, Andrew
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
fontSize: '13px',
|
||||
fontFamily: 'Geist Mono, monospace',
|
||||
fontSize: '12px',
|
||||
letterSpacing: '0.12em',
|
||||
fontWeight: 400,
|
||||
color: 'var(--text-secondary)',
|
||||
marginTop: '2px',
|
||||
}}
|
||||
>
|
||||
{patient.nhsNumber.replace(/\s/g, '')}
|
||||
</span>
|
||||
</div>
|
||||
Pharmacy Data Technologist
|
||||
</div>
|
||||
|
||||
{/* Education */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
fontSize: '13px',
|
||||
padding: '4px 0',
|
||||
}}
|
||||
>
|
||||
<span style={{ color: 'var(--text-tertiary)', fontWeight: 400 }}>
|
||||
Education
|
||||
</span>
|
||||
<span
|
||||
<div
|
||||
style={{
|
||||
color: 'var(--text-primary)',
|
||||
fontWeight: 500,
|
||||
textAlign: 'right',
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '1fr',
|
||||
gap: '8px',
|
||||
marginTop: '12px',
|
||||
}}
|
||||
>
|
||||
{patient.qualification}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
fontSize: '13px',
|
||||
padding: '4px 0',
|
||||
}}
|
||||
>
|
||||
<span style={{ color: 'var(--text-tertiary)', fontWeight: 400 }}>GPhC No.</span>
|
||||
<span
|
||||
style={{
|
||||
color: 'var(--text-primary)',
|
||||
fontWeight: 500,
|
||||
fontFamily: 'Geist Mono, monospace',
|
||||
fontSize: '12px',
|
||||
letterSpacing: '0.12em',
|
||||
}}
|
||||
>
|
||||
{patient.nhsNumber.replace(/\s/g, '')}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Location */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
fontSize: '13px',
|
||||
padding: '4px 0',
|
||||
}}
|
||||
>
|
||||
<span style={{ color: 'var(--text-tertiary)', fontWeight: 400 }}>
|
||||
Location
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
color: 'var(--text-primary)',
|
||||
fontWeight: 500,
|
||||
textAlign: 'right',
|
||||
}}
|
||||
>
|
||||
{patient.address}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
fontSize: '13px',
|
||||
padding: '4px 0',
|
||||
}}
|
||||
>
|
||||
<span style={{ color: 'var(--text-tertiary)', fontWeight: 400 }}>Education</span>
|
||||
<span style={{ color: 'var(--text-primary)', fontWeight: 500, textAlign: 'right' }}>
|
||||
{patient.qualification}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Phone */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
fontSize: '13px',
|
||||
padding: '4px 0',
|
||||
}}
|
||||
>
|
||||
<span style={{ color: 'var(--text-tertiary)', fontWeight: 400 }}>
|
||||
Phone
|
||||
</span>
|
||||
<a
|
||||
href={`tel:${patient.phone}`}
|
||||
style={{
|
||||
color: 'var(--accent)',
|
||||
fontWeight: 500,
|
||||
textDecoration: 'none',
|
||||
textAlign: 'right',
|
||||
}}
|
||||
onMouseEnter={(e) =>
|
||||
(e.currentTarget.style.textDecoration = 'underline')
|
||||
}
|
||||
onMouseLeave={(e) =>
|
||||
(e.currentTarget.style.textDecoration = 'none')
|
||||
}
|
||||
>
|
||||
{patient.phone.replace(/(\d{5})(\d{6})/, '$1 $2')}
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
fontSize: '13px',
|
||||
padding: '4px 0',
|
||||
}}
|
||||
>
|
||||
<span style={{ color: 'var(--text-tertiary)', fontWeight: 400 }}>Location</span>
|
||||
<span style={{ color: 'var(--text-primary)', fontWeight: 500, textAlign: 'right' }}>
|
||||
{patient.address}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Email */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
fontSize: '13px',
|
||||
padding: '4px 0',
|
||||
}}
|
||||
>
|
||||
<span style={{ color: 'var(--text-tertiary)', fontWeight: 400 }}>
|
||||
Email
|
||||
</span>
|
||||
<a
|
||||
href={`mailto:${patient.email}`}
|
||||
style={{
|
||||
color: 'var(--accent)',
|
||||
fontWeight: 500,
|
||||
textDecoration: 'none',
|
||||
textAlign: 'right',
|
||||
}}
|
||||
onMouseEnter={(e) =>
|
||||
(e.currentTarget.style.textDecoration = 'underline')
|
||||
}
|
||||
onMouseLeave={(e) =>
|
||||
(e.currentTarget.style.textDecoration = 'none')
|
||||
}
|
||||
>
|
||||
{patient.email}
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
fontSize: '13px',
|
||||
padding: '4px 0',
|
||||
}}
|
||||
>
|
||||
<span style={{ color: 'var(--text-tertiary)', fontWeight: 400 }}>Phone</span>
|
||||
<a
|
||||
href={`tel:${patient.phone}`}
|
||||
style={{
|
||||
color: 'var(--accent)',
|
||||
fontWeight: 500,
|
||||
textDecoration: 'none',
|
||||
textAlign: 'right',
|
||||
}}
|
||||
onMouseEnter={(e) => (e.currentTarget.style.textDecoration = 'underline')}
|
||||
onMouseLeave={(e) => (e.currentTarget.style.textDecoration = 'none')}
|
||||
>
|
||||
{patient.phone.replace(/(\d{5})(\d{6})/, '$1 $2')}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Registered */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
fontSize: '13px',
|
||||
padding: '4px 0',
|
||||
}}
|
||||
>
|
||||
<span style={{ color: 'var(--text-tertiary)', fontWeight: 400 }}>
|
||||
Registered
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
color: 'var(--text-primary)',
|
||||
fontWeight: 500,
|
||||
textAlign: 'right',
|
||||
}}
|
||||
>
|
||||
{patient.registrationYear}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
fontSize: '13px',
|
||||
padding: '4px 0',
|
||||
}}
|
||||
>
|
||||
<span style={{ color: 'var(--text-tertiary)', fontWeight: 400 }}>Email</span>
|
||||
<a
|
||||
href={`mailto:${patient.email}`}
|
||||
style={{
|
||||
color: 'var(--accent)',
|
||||
fontWeight: 500,
|
||||
textDecoration: 'none',
|
||||
textAlign: 'right',
|
||||
}}
|
||||
onMouseEnter={(e) => (e.currentTarget.style.textDecoration = 'underline')}
|
||||
onMouseLeave={(e) => (e.currentTarget.style.textDecoration = 'none')}
|
||||
>
|
||||
{patient.email}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Tags Section */}
|
||||
<div style={{ padding: '16px 0 8px' }}>
|
||||
<SectionTitle>Tags</SectionTitle>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
gap: '5px',
|
||||
}}
|
||||
>
|
||||
{tags.map((tag) => (
|
||||
<TagPill key={tag.label} tag={tag} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
fontSize: '13px',
|
||||
padding: '4px 0',
|
||||
}}
|
||||
>
|
||||
<span style={{ color: 'var(--text-tertiary)', fontWeight: 400 }}>Registered</span>
|
||||
<span style={{ color: 'var(--text-primary)', fontWeight: 500, textAlign: 'right' }}>
|
||||
{patient.registrationYear}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Alerts / Highlights Section */}
|
||||
<div style={{ padding: '16px 0 8px' }}>
|
||||
<SectionTitle>Alerts / Highlights</SectionTitle>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '6px',
|
||||
}}
|
||||
>
|
||||
{alerts.map((alert, index) => (
|
||||
<AlertFlag key={index} alert={alert} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<section>
|
||||
{isExpanded && <SectionTitle>Navigation</SectionTitle>}
|
||||
<nav aria-label="Sidebar navigation" style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
|
||||
{navSections.map((section) => {
|
||||
const isActive = activeSection === section.id
|
||||
const Icon = section.Icon
|
||||
|
||||
return (
|
||||
<button
|
||||
key={section.id}
|
||||
type="button"
|
||||
onClick={() => handleNavActivate(section.tileId)}
|
||||
aria-current={isActive ? 'page' : undefined}
|
||||
aria-label={!isExpanded ? section.label : undefined}
|
||||
className="sidebar-control"
|
||||
style={{
|
||||
minHeight: '44px',
|
||||
border: '1px solid',
|
||||
borderColor: isActive ? 'var(--accent-border)' : 'transparent',
|
||||
background: isActive ? 'var(--accent-light)' : 'transparent',
|
||||
color: isActive ? 'var(--accent)' : 'var(--text-secondary)',
|
||||
borderRadius: 'var(--radius-sm)',
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: isExpanded ? 'flex-start' : 'center',
|
||||
gap: '10px',
|
||||
padding: isExpanded ? '0 10px' : '0',
|
||||
cursor: 'pointer',
|
||||
transition: 'background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out',
|
||||
}}
|
||||
>
|
||||
<Icon size={17} strokeWidth={2.2} />
|
||||
{isExpanded && (
|
||||
<span style={{ fontSize: '14px', fontWeight: 600 }}>
|
||||
{section.label}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</nav>
|
||||
</section>
|
||||
|
||||
{isExpanded && (
|
||||
<>
|
||||
<section style={{ paddingTop: '8px' }}>
|
||||
<SectionTitle>Tags</SectionTitle>
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '5px' }}>
|
||||
{tags.map((tag) => (
|
||||
<TagPill key={tag.label} tag={tag} />
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style={{ padding: '8px 0 4px' }}>
|
||||
<SectionTitle>Alerts / Highlights</SectionTitle>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
|
||||
{alerts.map((alert, index) => (
|
||||
<AlertFlag key={index} alert={alert} />
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)}
|
||||
</aside>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,17 +1,16 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
|
||||
// Map tile IDs to section IDs for SubNav
|
||||
const sectionTileMap: Record<string, string> = {
|
||||
'patient-summary': 'overview',
|
||||
'core-skills': 'skills',
|
||||
'career-activity': 'experience',
|
||||
'projects': 'projects',
|
||||
'education': 'education',
|
||||
'section-experience': 'experience',
|
||||
'section-education': 'education',
|
||||
'section-skills': 'skills',
|
||||
}
|
||||
|
||||
/**
|
||||
* Hook to track which section is currently visible using IntersectionObserver.
|
||||
* Observes tiles by their data-tile-id attribute and maps them to section IDs.
|
||||
* Observes tiles by their data-tile-id attribute inside main scroll content.
|
||||
*
|
||||
* @returns The currently active section ID
|
||||
*/
|
||||
@@ -19,46 +18,39 @@ export function useActiveSection(): string {
|
||||
const [activeSection, setActiveSection] = useState<string>('overview')
|
||||
|
||||
useEffect(() => {
|
||||
// Find all tiles with data-tile-id attribute
|
||||
const tiles = Array.from(
|
||||
document.querySelectorAll('[data-tile-id]')
|
||||
) as HTMLElement[]
|
||||
const root = document.getElementById('main-content')
|
||||
|
||||
if (tiles.length === 0) return
|
||||
if (tiles.length === 0 || !root) return
|
||||
|
||||
// IntersectionObserver to track which tile is visible
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
// Find the entry with the highest intersection ratio
|
||||
const visibleEntries = entries.filter((entry) => entry.isIntersecting)
|
||||
|
||||
if (visibleEntries.length === 0) return
|
||||
|
||||
// Get the most visible tile (highest intersection ratio)
|
||||
const mostVisible = visibleEntries.reduce((prev, current) =>
|
||||
current.intersectionRatio > prev.intersectionRatio ? current : prev
|
||||
)
|
||||
|
||||
// Get the tile ID and map to section ID
|
||||
const tileId = mostVisible.target.getAttribute('data-tile-id')
|
||||
if (tileId && sectionTileMap[tileId]) {
|
||||
setActiveSection(sectionTileMap[tileId])
|
||||
}
|
||||
},
|
||||
{
|
||||
// Trigger when tile is 25% visible
|
||||
threshold: [0, 0.25, 0.5, 0.75, 1],
|
||||
// Use viewport as root, with some margin for better UX
|
||||
rootMargin: '-80px 0px -80% 0px',
|
||||
root,
|
||||
rootMargin: '-12% 0px -60% 0px',
|
||||
}
|
||||
)
|
||||
|
||||
// Observe all tiles
|
||||
tiles.forEach((tile) => observer.observe(tile))
|
||||
|
||||
// Cleanup
|
||||
return () => {
|
||||
tiles.forEach((tile) => observer.unobserve(tile))
|
||||
observer.disconnect()
|
||||
}
|
||||
}, [])
|
||||
|
||||
|
||||
+21
-10
@@ -124,8 +124,7 @@
|
||||
--border: #D4E0DE;
|
||||
--border-light: #E4EDEB;
|
||||
--sidebar-width: 304px;
|
||||
--topbar-height: 56px;
|
||||
--subnav-height: 42px;
|
||||
--sidebar-rail-width: 64px;
|
||||
--radius-card: 8px;
|
||||
--radius-sm: 6px;
|
||||
--shadow-sm: 0 1px 2px rgba(26,43,42,0.05);
|
||||
@@ -273,9 +272,26 @@ html {
|
||||
background: var(--text-tertiary);
|
||||
}
|
||||
|
||||
/* SubNav horizontal scroll — hide scrollbar */
|
||||
.subnav-scroll::-webkit-scrollbar {
|
||||
display: none;
|
||||
/* Dashboard main content offset for mobile sidebar rail */
|
||||
.dashboard-main {
|
||||
margin-left: var(--sidebar-rail-width);
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.dashboard-main {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Sidebar control styles */
|
||||
.sidebar-control:hover {
|
||||
background: rgba(10, 128, 128, 0.05) !important;
|
||||
color: var(--accent) !important;
|
||||
}
|
||||
|
||||
.sidebar-control:focus-visible {
|
||||
outline: 2px solid rgba(13, 110, 110, 0.45);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.metric-card:hover {
|
||||
@@ -519,11 +535,6 @@ textarea:focus-visible {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
/* Instant SubNav transitions */
|
||||
.subnav-scroll button {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
/* Instant smooth scroll override */
|
||||
html {
|
||||
scroll-behavior: auto;
|
||||
|
||||
Reference in New Issue
Block a user