Feat/dashboard - #560
Open
Shecodes174 wants to merge 2 commits into
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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)