add background to raw template and fix so that page doesnt scroll pas…

…t it (#1271)
denoland · Dec 17, 2024 · c39771e · c39771e
1 parent f800be1
commit c39771e
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/_components/Sidebar.tsx b/_components/Sidebar.tsx
@@ -208,8 +208,8 @@ function SidebarCategory(props: {
             ? (
               <SidebarCategory
                 item={item}
-                url={props.url}
                 search={props.search}
+                url={props.url}
               />
             )
             : (

diff --git a/_includes/raw.tsx b/_includes/raw.tsx
@@ -8,7 +8,7 @@ export default function Raw(props: Lume.Data, helpers: Lume.Helpers) {
       {props.sidebar && (
         <>
           <aside
-            class="absolute top-0 bottom-0 -left-74 sidebar-open:left-0 w-74 border-r border-foreground-tertiary bg-background-primary z-50 xl:hidden transition-all"
+            class="fixed top-0 bottom-0 -left-74 sidebar-open:left-0 w-74 border-r border-foreground-tertiary bg-background-primary z-50 xl:hidden transition-all"
             id="sidebar"
             data-open="false"
           >
@@ -47,6 +47,12 @@ export default function Raw(props: Lume.Data, helpers: Lume.Helpers) {
               url={props.url}
             />
           </aside>
+          <div
+            class="fixed inset-0 backdrop-brightness-50 z-40 hidden sidebar-open:block sidebar-open:xl:hidden"
+            id="sidebar-cover"
+            data-open="false"
+          >
+          </div>
         </>
       )}
       <div style={{ scrollbarGutter: "stable" }}>