admin
4ec108484e
- Add useBreakpoint hook for responsive breakpoint detection - Add MobileBottomNav component for mobile navigation - Update ClinicalSidebar with tablet icon-only mode and tooltips - Update PatientBanner with mobile minimal mode and overflow menu - Update PMRInterface to handle responsive layouts and mobile search - Add mobile card layouts to MedicationsView, ProblemsView, InvestigationsView, and DocumentsView - Desktop: 220px sidebar, full banner, tables - Tablet: 56px icon sidebar, condensed banner, scrollable tables - Mobile: Bottom nav, minimal banner, card layouts, search bar
70 lines
2.4 KiB
TypeScript
70 lines
2.4 KiB
TypeScript
import { ClipboardList, FileText, Pill, AlertTriangle, FlaskConical, FolderOpen, Send } from 'lucide-react'
|
|
import type { ViewId } from '../types/pmr'
|
|
|
|
interface NavItem {
|
|
id: ViewId
|
|
label: string
|
|
shortLabel: string
|
|
icon: React.ReactNode
|
|
}
|
|
|
|
const navItems: NavItem[] = [
|
|
{ id: 'summary', label: 'Summary', shortLabel: 'Summary', icon: <ClipboardList size={20} /> },
|
|
{ id: 'consultations', label: 'Consultations', shortLabel: 'Consult', icon: <FileText size={20} /> },
|
|
{ id: 'medications', label: 'Medications', shortLabel: 'Meds', icon: <Pill size={20} /> },
|
|
{ id: 'problems', label: 'Problems', shortLabel: 'Issues', icon: <AlertTriangle size={20} /> },
|
|
{ id: 'investigations', label: 'Investigations', shortLabel: 'Tests', icon: <FlaskConical size={20} /> },
|
|
{ id: 'documents', label: 'Documents', shortLabel: 'Docs', icon: <FolderOpen size={20} /> },
|
|
{ id: 'referrals', label: 'Referrals', shortLabel: 'Refer', icon: <Send size={20} /> },
|
|
]
|
|
|
|
interface MobileBottomNavProps {
|
|
activeView: ViewId
|
|
onViewChange: (view: ViewId) => void
|
|
}
|
|
|
|
export function MobileBottomNav({ activeView, onViewChange }: MobileBottomNavProps) {
|
|
const handleNavClick = (view: ViewId) => {
|
|
onViewChange(view)
|
|
window.location.hash = view
|
|
}
|
|
|
|
return (
|
|
<nav
|
|
className="fixed bottom-0 left-0 right-0 z-50 bg-pmr-sidebar border-t border-white/10"
|
|
style={{ paddingBottom: 'env(safe-area-inset-bottom)' }}
|
|
role="navigation"
|
|
aria-label="Mobile navigation"
|
|
>
|
|
<ul className="flex items-center justify-around h-14">
|
|
{navItems.map((item) => {
|
|
const isActive = activeView === item.id
|
|
return (
|
|
<li key={item.id}>
|
|
<button
|
|
type="button"
|
|
onClick={() => handleNavClick(item.id)}
|
|
className={`
|
|
flex flex-col items-center justify-center
|
|
w-12 h-14 rounded-lg
|
|
transition-colors duration-100
|
|
${isActive
|
|
? 'text-pmr-nhsblue'
|
|
: 'text-white/60 hover:text-white/90'}
|
|
`}
|
|
aria-current={isActive ? 'page' : undefined}
|
|
aria-label={item.label}
|
|
>
|
|
{item.icon}
|
|
<span className="text-[10px] mt-0.5 font-inter font-medium">
|
|
{item.shortLabel}
|
|
</span>
|
|
</button>
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
</nav>
|
|
)
|
|
}
|