v0.12.11 new drawer menu notification feature

This commit is contained in:
2026-03-23 22:59:03 -04:00
parent bcd9f4a060
commit dec24eb842
7 changed files with 62 additions and 35 deletions

View File

@@ -13,7 +13,7 @@ const NAV_ICON = {
settings: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M5.34 18.66l-1.41 1.41M12 2v2M12 20v2M4.93 4.93l1.41 1.41M18.66 18.66l1.41 1.41M2 12h2M20 12h2"/></svg>,
};
export default function NavDrawer({ open, onClose, onMessages, onGroupMessages, onSchedule, onScheduleManager, onBranding, onSettings, onUsers, onGroupManager, onHostPanel, features = {}, currentPage = 'chat', isMobile = false }) {
export default function NavDrawer({ open, onClose, onMessages, onGroupMessages, onSchedule, onScheduleManager, onBranding, onSettings, onUsers, onGroupManager, onHostPanel, features = {}, currentPage = 'chat', isMobile = false, unreadMessages = false, unreadGroupMessages = false }) {
const { user } = useAuth();
const drawerRef = useRef(null);
const isAdmin = user?.role === 'admin';
@@ -36,7 +36,7 @@ export default function NavDrawer({ open, onClose, onMessages, onGroupMessages,
}, [open, onClose]);
const item = (icon, label, onClick, opts = {}) => {
const { active, disabled, badge } = opts;
const { active, disabled, badge, dot } = opts;
return (
<button
className={`nav-drawer-item${active ? ' active' : ''}${disabled ? ' disabled' : ''}`}
@@ -46,6 +46,7 @@ export default function NavDrawer({ open, onClose, onMessages, onGroupMessages,
{icon}
<span>{label}</span>
{badge && <span className="nav-drawer-badge">{badge}</span>}
{dot && <span className="nav-drawer-unread-dot" />}
</button>
);
};
@@ -64,8 +65,8 @@ export default function NavDrawer({ open, onClose, onMessages, onGroupMessages,
</div>
{/* User section */}
{item(NAV_ICON.messages, 'Messages', onMessages, { active: currentPage === 'chat' })}
{hasUserGroups && item(NAV_ICON.groupmessages, 'Group Messages', onGroupMessages, { active: currentPage === 'groupmessages' })}
{item(NAV_ICON.messages, 'Messages', onMessages, { active: currentPage === 'chat', dot: unreadMessages })}
{hasUserGroups && item(NAV_ICON.groupmessages, 'Group Messages', onGroupMessages, { active: currentPage === 'groupmessages', dot: unreadGroupMessages })}
{features.scheduleManager && item(NAV_ICON.schedules, 'Schedules', onSchedule, { active: currentPage === 'schedule' })}
{/* Admin section */}