jake/compassmock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(mobile): fix sidebar close button and scrollbar (#20)

Browse Source 
Show the Sheet close button with sidebar-matching colors
instead of hiding it, and hide the native scrollbar on
mobile via data-attribute scoped CSS.

Co-authored-by: Nicholai <nicholaivogelfilms@gmail.com>
This commit is contained in:
Nicholai 2026-02-04 16:13:57 -07:00 committed by GitHub
parent 06fcc5eacb
commit d9b3e33b6e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 8 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/globals.css
View File

@ -195,4 +195,11 @@
body { body {
@apply bg-background text-foreground; @apply bg-background text-foreground;
} }
}
[data-mobile="true"] [data-sidebar="content"] {
scrollbar-width: none;
}
[data-mobile="true"] [data-sidebar="content"]::-webkit-scrollbar {
display: none;
} }

2
src/components/ui/sidebar.tsx
View File

@ -187,7 +187,7 @@ function Sidebar({
data-sidebar="sidebar" data-sidebar="sidebar"
data-slot="sidebar" data-slot="sidebar"
data-mobile="true" data-mobile="true"
className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden" className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:text-sidebar-foreground [&>button]:opacity-80 [&>button]:hover:opacity-100"
style={ style={
{ {
"--sidebar-width": SIDEBAR_WIDTH_MOBILE, "--sidebar-width": SIDEBAR_WIDTH_MOBILE,