abhishekbhakat/zhealth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add profile avatar selection and enhance sidebar UI with icons

Browse Source
This commit is contained in:
abhishekbhakat
2025-12-20 12:26:28 +05:30
parent e558e19512
commit 69bc5675dc
28 changed files with 166 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/src/components/Layout.tsx
View File

@@ -6,6 +6,7 @@ interface User {
username: string
name: string | null
role: string
avatar_url: string | null
}
interface LayoutProps {
@@ -67,10 +68,10 @@ export function Layout({ children }: LayoutProps) {
const displayName = user.name || user.username
const navItems = [
{ path: '/', label: 'Dashboard', icon: '📊' },
{ path: '/profile', label: 'Profile', icon: '👤' },
{ path: '/insights', label: 'Insights', icon: '💡', disabled: true },
{ path: '/sources', label: 'Sources', icon: '📄' },
{ path: '/', label: 'Dashboard', icon: '/icons/healthcare/icons8-powerchart-50.png' },
{ path: '/profile', label: 'Profile', icon: '/icons/general/icons8-user-50.png' },
{ path: '/insights', label: 'Insights', icon: '/icons/general/icons8-idea-50.png', disabled: true },
{ path: '/sources', label: 'Sources', icon: '/icons/general/icons8-document-50.png' },
]
return (
@@ -90,7 +91,9 @@ export function Layout({ children }: LayoutProps) {
className={`sidebar-link ${location.pathname === item.path ? 'active' : ''} ${item.disabled ? 'disabled' : ''}`}
onClick={e => item.disabled && e.preventDefault()}
>
<span className="sidebar-icon">{item.icon}</span>
<span className="sidebar-icon">
<img src={item.icon} alt={item.label} />
</span>
<span className="sidebar-label">{item.label}</span>
{item.disabled && <span className="sidebar-badge">Soon</span>}
</Link>
@@ -105,7 +108,9 @@ export function Layout({ children }: LayoutProps) {
to="/admin"
className={`sidebar-link ${location.pathname === '/admin' ? 'active' : ''}`}
>
<span className="sidebar-icon">⚙️</span>
<span className="sidebar-icon">
<img src="/icons/user/icons8-add-user-group-woman-man-50.png" alt="Admin" />
</span>
<span className="sidebar-label">Manage Users</span>
</Link>
</div>
@@ -113,11 +118,20 @@ export function Layout({ children }: LayoutProps) {
<div className="sidebar-footer">
<div className="sidebar-user">
<div className="sidebar-user-name">{displayName}</div>
<div className="sidebar-user-role">
<span className={`indicator indicator-${user.role === 'admin' ? 'warning' : 'info'}`}>
{user.role}
</span>
<div className="sidebar-avatar">
{user.avatar_url ? (
<img src={user.avatar_url} alt={displayName} className="avatar-img" />
) : (
<div className="avatar-placeholder">{displayName[0].toUpperCase()}</div>
)}
</div>
<div className="sidebar-user-info">
<div className="sidebar-user-name">{displayName}</div>
<div className="sidebar-user-role">
<span className={`indicator indicator-${user.role === 'admin' ? 'warning' : 'info'}`}>
{user.role}
</span>
</div>
</div>
</div>
<div className="sidebar-actions">
@@ -126,14 +140,18 @@ export function Layout({ children }: LayoutProps) {
onClick={toggleTheme}
title={theme === 'dark' ? 'Light mode' : 'Dark mode'}
>
{theme === 'dark' ? '☀️' : '🌙'}
{theme === 'dark' ? (
<img src="/icons/general/icons8-sun-50.png" alt="Light" className="theme-icon" />
) : (
<img src="/icons/general/icons8-waxing-crescent-50.png" alt="Dark" className="theme-icon" />
)}
</button>
<button
className="sidebar-btn"
onClick={handleLogout}
title="Logout"
>
🚪
<img src="/icons/general/icons8-cancel-50.png" alt="Logout" className="theme-icon" />
</button>
</div>
</div>