[FEATURE] Build Reusable Member Dashboard Layout with Sidebar, Header, Responsive Structure & Shared UI Components

Create a scalable and reusable Member Dashboard Layout System for the Commdesk platform.

This layout will serve as the foundation for all authenticated member/dashboard pages such as:

• Dashboard
• Profile
• Settings
• Messages
• Notifications
• Workspace
• Teams
• Analytics
• Tasks
• Billing
• Admin Pages
• Future Modules

The goal is to establish a clean architecture, responsive UX, and production-ready dashboard foundation that can scale as the platform grows.

---

🎯 Objectives

• Create a reusable dashboard shell/layout
• Add a modern responsive sidebar
• Create common dashboard navigation
• Ensure mobile responsiveness
• Improve maintainability
• Support nested routes/pages
• Build scalable layout architecture
• Add theme-ready structure
• Improve UX consistency across all member pages

---

🏗️ Layout Requirements

1. Main Dashboard Structure

Create a reusable layout wrapper:

<MemberLayout>
 ├── Sidebar
 ├── Top Navbar/Header
 ├── Main Content Area
 ├── Page Container
 ├── Mobile Navigation
 └── Optional Right Panel/Future Widgets

---

📂 Suggested Folder Structure

src/
│
├── layouts/
│   └── MemberLayout/
│       ├── MemberLayout.tsx
│       ├── Sidebar.tsx
│       ├── Header.tsx
│       ├── MobileSidebar.tsx
│       ├── NavItem.tsx
│       ├── Breadcrumb.tsx
│       ├── UserDropdown.tsx
│       └── index.ts
│
├── components/
│   └── dashboard/
│       ├── DashboardContainer.tsx
│       ├── PageHeader.tsx
│       ├── SearchBar.tsx
│       ├── NotificationBell.tsx
│       ├── ThemeToggle.tsx
│       ├── EmptyState.tsx
│       ├── LoadingState.tsx
│       └── ErrorState.tsx
│
├── routes/
│   └── dashboard/
│
└── styles/

---

🎨 Sidebar Features

Sidebar should include:

• Logo/Brand section
• Navigation links
• Active route highlighting
• Collapsible sidebar
• Expand/collapse animation
• Icons for each menu item
• Scrollable menu
• Bottom utility section
• Logout button
• Mobile drawer support
• Responsive behavior

---

📋 Sidebar Navigation Example

- Dashboard
- Workspace
- Messages
- Tasks
- Calendar
- Teams
- Analytics
- Notifications
- Settings
- Billing
- Help Center

---

🧩 Header/Navbar Requirements

Header should contain:

• Page title
• Breadcrumbs
• Search bar
• Notification icon
• User profile dropdown
• Theme toggle
• Mobile menu button
• Quick actions
• Workspace switcher (optional)

---

📱 Responsive Requirements

Mobile

• Sidebar becomes drawer
• Smooth open/close animation
• Sticky header
• Optimized spacing
• Bottom navigation optional

Tablet

• Semi-collapsed sidebar
• Adaptive content spacing

Desktop

• Full sidebar
• Fixed navigation
• Scrollable content area

---

✨ UI/UX Expectations

• Modern SaaS dashboard style
• Clean spacing system
• Consistent typography
• Smooth transitions
• Professional animations
• Minimal but premium design
• Accessibility support
• Keyboard navigation support

---

🌙 Theme Support

Prepare architecture for:

• Light mode
• Dark mode
• System theme detection

---

⚙️ Technical Requirements

Tech Stack

• React
• TypeScript
• Tailwind CSS
• React Router
• Framer Motion (optional)
• Lucide Icons

---

🧠 Recommended Architecture

Layout should support:

• Nested routing
• Protected routes
• Dynamic sidebar items
• Role-based navigation
• Future plugin/modules
• Permission-based rendering

---

🔐 Authentication Integration

Layout should:

• Only render for authenticated users
• Support user session state
• Handle unauthorized access
• Support loading states

---

🚀 Performance Considerations

• Lazy load dashboard pages
• Memoize sidebar items if needed
• Optimize re-renders
• Responsive image handling
• Avoid layout shifts

---

🧪 Suggested Testing

• Sidebar open/close
• Responsive layout behavior
• Route highlighting
• Mobile drawer
• Theme switching
• Accessibility navigation
• Keyboard shortcuts

---

✅ Acceptance Criteria

• Reusable MemberLayout created
• Responsive sidebar implemented
• Header/navbar implemented
• Mobile navigation working
• Nested routes supported
• Active navigation state working
• Dark mode ready
• Layout accessible
• Smooth animations added
• Production-ready folder structure
• Shared dashboard components added
• Clean TypeScript types/interfaces added

---

🔥 Expected Outcome

A scalable, modern, reusable, and production-ready dashboard layout system that becomes the core foundation of the entire Commdesk member experience.