component.html.slim in satis-2.0.7

- old
+ new
@@ -1,45 +1,63 @@
 doctype html
 html lang="en"
   head
     = head
   body
+    = turbo_frame_tag "dialog"
     .h-screen.flex.overflow-hidden.bg-gray-100.dark:bg-gray-600 data-controller="satis-page"
       / Off-canvas menu for mobile, show/hide based on off-canvas menu state.
       .fixed.inset-0.flex.z-40.md:hidden.hidden aria-modal="true" role="dialog" data-satis-page-target="dialog"
 
         .fixed.inset-0.bg-gray-600.bg-opacity-75.hidden aria-hidden="true" data-satis-page-target="overlay"
 
         .relative.flex-1.flex.flex-col.max-w-xs.w-full.pt-5.pb-4.bg-white.transform.hidden data-satis-page-target="offCanvasMenu"
 
           .absolute.top-0.right-0.-mr-12.pt-2.hidden data-satis-page-target="closeButton"
-            button.ml-1.flex.items-center.justify-center.h-10.w-10.rounded-full.focus:outline-none.focus:ring-2.focus:ring-inset.focus:ring-white data-action="satis-page#close"
+            button.ml-1.flex.items-center.justify-center.h-10.w-10.rounded-full.focus:outline-none.focus:ring-2.focus:ring-inset.focus:ring-white data-action="click->satis-dialog#close"
               span.sr-only Close sidebar
               i.fal.fa-2x.fa-xmark.text-white aria-hidden="true"
           = sidebar_mobile
 
         .flex-shrink-0.w-14 aria-hidden="true"
           / Dummy element to force sidebar to shrink to fit close icon
 
-      / SIDEBAR - for desktop
-      .hidden.md:flex.md:flex-shrink-0
-        .flex.flex-col.w-64
-          /! Sidebar component, swap this element with another sidebar if you like
+      - unless Satis.config.full_width_topbar
+        / SIDEBAR - for desktop
+        .hidden.md:flex.md:flex-shrink-0
+          .flex.flex-col.w-64
+            /! Sidebar component, swap this element with another sidebar if you like
 
-          .flex.flex-col.flex-grow.border-r.border-gray-200.pt-5.pb-4.bg-white.overflow-y-auto.dark:bg-gray-900.dark:border-gray-700
-            = sidebar
+            .flex.flex-col.flex-grow.border-r.border-gray-200.pt-5.pb-4.bg-white.overflow-y-auto.dark:bg-gray-900.dark:border-gray-900.dark:border-opacity-75.dark:bg-opacity-75.dark:px-4.drop-shadow-xl.bg-opacity-75
+              = sidebar
 
       / TOPBAR
       .flex.flex-col.w-0.flex-1.overflow-hidden
-        .relative.z-10.flex-shrink-0.flex.h-16.bg-white.shadow.dark:bg-gray-900.dark:border-gray-700
+        .relative.z-10.flex-shrink-0.flex.h-16.bg-white.shadow.dark:bg-gray-900.dark:bg-opacity-75.dark:py-4.bg-opacity-75
           button.px-4.border-r.border-gray-200.text-gray-500.focus:outline-none.focus:ring-2.focus:ring-inset.focus:ring-primary-500.md:hidden data-action="satis-page#open"
             span.sr-only Open sidebar
             i.fal.fa-2x.fa-bars
 
           .flex-1.px-4.flex.justify-between
             = navbar
 
-        main.flex-1.relative.overflow-y-auto.focus:outline-none
-          .py-4
-            .max-w.mx-auto.px-4.sm:px-4.md:px-4
-              = body
+        - if Satis.config.full_width_topbar
+          .flex.flex-row
+
+            / SIDEBAR - for desktop
+            .hidden.md:flex.md:flex-shrink-0
+              .flex.flex-col.w-64
+                /! Sidebar component, swap this element with another sidebar if you like
+
+                .flex.flex-col.flex-grow.border-r.border-gray-200.pt-5.pb-4.bg-white.overflow-y-auto.dark:bg-gray-900.dark:border-gray-900.dark:border-opacity-75.dark:bg-opacity-75.dark:px-4.drop-shadow-xl.bg-opacity-75
+                  = sidebar
+
+            main.flex-1.relative.overflow-y-auto.focus:outline-none.dark:bg-gray-900
+              .mt-4
+                .max-w.mx-auto.px-4.sm:px-4.md:px-4
+                  = body
+        - else
+          main.flex-1.relative.overflow-y-auto.focus:outline-none.dark:bg-gray-900
+            .mt-4
+              .max-w.mx-auto.px-4.sm:px-4.md:px-4
+                = body
 