thePR0M3TH3AN/bitvid
1
0 Fork 0
mirror of https://github.com/PR0M3TH3AN/bitvid.git synced 2026-10-27 07:52:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(mobile): sidebar nav becomes an app-grid on mobile (#7)

Browse Source 
Below the desktop breakpoint (<1024px), the open/expanded sidebar's primary nav
renders as a 3-column grid of icon tiles with the title centered below each icon
(app-grid feel), instead of the desktop vertical list. Desktop and the collapsed
icon rail are unchanged.

- Scoped to `.sidebar-nav` so the footer "More" links are untouched.
- Token-only (no raw measurements), high specificity via the sidebar-expanded
  prefix (no !important). Labels wrap at spaces, not mid-word.
- Validated live in-browser; lint clean.

Option A (grid shows on the open mobile menu). An always-on variant was deferred —
it would require widening/overlaying the mobile sidebar.

Co-Authored-By: Claude Opus 4.8 <[email protected]>
This commit is contained in:
thePR0M3TH3ANandClaude Opus 4.8 committed 2026-06-29 12:52:17 -04:00
1 parent e73b627ddd
commit d0f8859f8b
2 files changed
+53
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

css/tailwind.source.css
+45
View File
@@ -4714,6 +4714,51 @@
justify-content: flex-start;
}
/* Mobile (below the desktop breakpoint): render the OPEN (expanded) sidebar's
primary nav as an app-grid — icon tiles with the title centered below each
icon — instead of the desktop vertical list. Desktop and the collapsed icon
rail are unchanged. Scoped to `.sidebar-nav` so the footer "More" links are
untouched. Uses the sidebar-expanded prefix for specificity (no !important). */
@media (max-width: calc(theme("screens.lg") - var(--breakpoint-edge-offset))) {
body.sidebar-expanded #sidebar .sidebar-nav,
#sidebar.sidebar-expanded .sidebar-nav {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-2xs);
align-items: start;
}
body.sidebar-expanded #sidebar .sidebar-nav .sidebar-nav-link,
#sidebar.sidebar-expanded .sidebar-nav .sidebar-nav-link {
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center;
gap: var(--space-2xs);
width: 100%;
min-height: 0;
padding-block: var(--space-xs);
padding-inline: var(--space-3xs);
/* the desktop hover slide is meaningless for centered tiles */
--sidebar-nav-translate-x: 0;
}
body.sidebar-expanded #sidebar .sidebar-nav .sidebar-nav-link .sidebar-text,
#sidebar.sidebar-expanded
.sidebar-nav
.sidebar-nav-link
.sidebar-text {
font-size: var(--font-size-2xs);
font-weight: 600;
line-height: 1.1;
text-align: center;
/* wrap at spaces, not mid-word (so "Recently Added" breaks cleanly) */
overflow-wrap: break-word;
word-break: normal;
hyphens: none;
}
}
body.sidebar-collapsed #sidebar .sidebar-text,
#sidebar.sidebar-collapsed .sidebar-text {
display: none;