Feat/dashboard

[Shecodes174]

closes #390

Summary

Reworked the dashboard and notifications layout to adapt cleanly across desktop, tablet, and mobile breakpoints, with a single accessible navigation pattern across all sizes.

Changes
Sidebar nav — full labeled sidebar on desktop (≥1024px), collapses to an icon-only rail on tablet (768–1023px), becomes an off-canvas drawer behind a hamburger toggle on mobile (<768px)
Grids — stat cards and two-column panels use auto-fit/minmax() so they reflow by available width instead of a fixed breakpoint count; two-column body stacks to one column on tablet and below
Overflow safety — box-sizing: border-box globally, min-width: 0 on flex/grid children, text truncation (ellipsis) on labels, overflow-wrap: anywhere on notification copy, overflow-x: hidden as a backstop
Notifications view — filter chips wrap on narrow widths, timestamp/meta column drops below content on mobile instead of squeezing it
Accessibility
Hamburger button uses aria-expanded / aria-controls, drawer closes on Escape or backdrop click
Active nav item marked with aria-current="page"
Skip-to-content link, visible focus rings on all interactive elements
Testing
Manually checked layout at 375px, 768px, 1024px, and 1440px widths
Verified no horizontal scroll/overflow at any breakpoint
Verified nav is keyboard-operable and screen-reader labeled at each breakpoint
Files
dashboard.html — single-file implementation (markup, styles, and view-toggle script)

[drips-wave]

@Shecodes174 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits