ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(sidebar): scope elevated mobile z-index to course sidebar (#720)

Browse Source
This commit is contained in:
Rotimi Best
2026-07-10 08:43:37 +01:00
committed by GitHub
parent 035d976d14 b888725125
commit e04d024a3a
2 changed files with 5 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/dashboard/src/lib/features/course/components/sidebar/course-sidebar.svelte
+1 -1
View File
@@ -112,7 +112,7 @@
{#if !isOrgLoaded} {#if !isOrgLoaded}
<SidebarSkeleton /> <SidebarSkeleton />
{:else} {:else}
<Sidebar.Root collapsible="icon" class="ui:z-150!"> <Sidebar.Root collapsible="icon" class="ui:z-150!" mobileOverlayClass="ui:z-150!">
<Sidebar.Header> <Sidebar.Header>
<CourseSidebarLogo /> <CourseSidebarLogo />
</Sidebar.Header> </Sidebar.Header>
packages/ui/src/base/sidebar/sidebar.svelte
+4 -2
View File
@@ -11,12 +11,14 @@
variant = 'sidebar', variant = 'sidebar',
collapsible = 'offcanvas', collapsible = 'offcanvas',
class: className, class: className,
mobileOverlayClass,
children, children,
...restProps ...restProps
}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
side?: 'left' | 'right'; side?: 'left' | 'right';
variant?: 'sidebar' | 'floating' | 'inset'; variant?: 'sidebar' | 'floating' | 'inset';
collapsible?: 'offcanvas' | 'icon' | 'none'; collapsible?: 'offcanvas' | 'icon' | 'none';
mobileOverlayClass?: string;
} = $props(); } = $props();
const sidebar = useSidebar(); const sidebar = useSidebar();
@@ -39,9 +41,9 @@
data-sidebar="sidebar" data-sidebar="sidebar"
data-slot="sidebar" data-slot="sidebar"
data-mobile="true" data-mobile="true"
overlayClass="ui:z-150!" overlayClass={mobileOverlayClass}
class={cn( class={cn(
'ui:bg-sidebar ui:text-sidebar-foreground ui:w-(--sidebar-width) ui:z-150! ui:p-0 ui:[&>button]:hidden', 'ui:bg-sidebar ui:text-sidebar-foreground ui:w-(--sidebar-width) ui:p-0 ui:[&>button]:hidden',
className className
)} )}
style="--sidebar-width: {SIDEBAR_WIDTH_MOBILE};" style="--sidebar-width: {SIDEBAR_WIDTH_MOBILE};"