Sidebar improvements

tjek · Aug 29, 2024 · 9d4400d · 9d4400d
1 parent 2173ad1
commit 9d4400d
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 16 deletions.
diff --git a/lib/kits/core-ui/components/common/header.ts b/lib/kits/core-ui/components/common/header.ts
@@ -277,25 +277,27 @@ const Header = ({
     };
 
     const setNavColor = (color) => {
-        const sgnNav = container?.querySelector<HTMLDivElement>('.sgn__nav');
-
-        if (sgnNav) {
-            sgnNav.style.backgroundColor = color || 'transparent';
-            sgnNav.style.color =
-                getColorBrightness(color) === 'dark' ? '#ffffff' : '#000000';
-        }
-
         if (scriptEls.enableSidebar) {
-            const sidebar = container?.querySelector<HTMLDivElement>(
-                '.sgn__sidebar-content-container'
-            );
+            const sidebar =
+                container?.querySelector<HTMLDivElement>('.sgn__sidebar');
             if (sidebar) {
                 sidebar.style.backgroundColor = color || 'transparent';
                 sidebar.style.color =
                     getColorBrightness(color) === 'dark'
                         ? '#ffffff'
                         : '#000000';
             }
+        } else {
+            const sgnNav =
+                container?.querySelector<HTMLDivElement>('.sgn__nav');
+
+            if (sgnNav) {
+                sgnNav.style.backgroundColor = color || 'transparent';
+                sgnNav.style.color =
+                    getColorBrightness(color) === 'dark'
+                        ? '#ffffff'
+                        : '#000000';
+            }
         }
     };
 

diff --git a/lib/kits/core-ui/components/common/sidebar.styl b/lib/kits/core-ui/components/common/sidebar.styl
@@ -126,16 +126,15 @@
     position absolute
     display none
     z-index 99
-    height 80px
+    height 100vh
     margin auto
     width 100%
     text-align center
     animation-iteration-count 1
     animation-name sgn-animate-sidebar
     animation-timing-function ease
+    box-shadow rgba(0, 0, 0,  0.4) 0px 2px 4px, rgba(0, 0, 0, 0.2) 0px 0px 1px
 
-    .sgn__sidebar-content-container
-        box-shadow rgba(0, 0, 0,  0.4) 0px 2px 4px, rgba(0, 0, 0, 0.2) 0px 0px 1px
 
     > .sgn__nav
         position relative !important
@@ -145,7 +144,7 @@
         color inherit
         -webkit-transform none !important
         transform none !important
-        box-shadow rgba(0, 0, 0,  0.4) 0px 2px 4px, rgba(0, 0, 0, 0.2) 0px 0px 1px
+        box-shadow rgba(0, 0, 0, 0.4) 2px 0px 4px
 
         .sgn__nav-content
             padding 8px 8px 2px

diff --git a/lib/kits/core-ui/components/paged-publication/main-container.styl b/lib/kits/core-ui/components/paged-publication/main-container.styl
@@ -22,6 +22,7 @@
             z-index 99
 
         &[data-component-template-disable-header="true"]
+        &[data-component-template-enable-sidebar="true"]
             .verso__scroller
                 top 0
 

diff --git a/lib/kits/core-ui/components/paged-publication/main-container.ts b/lib/kits/core-ui/components/paged-publication/main-container.ts
@@ -68,7 +68,7 @@ const MainContainer = ({
     const render = () => {
         // @ts-expect-error
         el.innerHTML = Mustache.render(template?.innerHTML || defaultTemplate, {
-            disableHeader: scriptEls.disableHeader || scriptEls.enableSidebar,
+            disableHeader: scriptEls.disableHeader,
             enableSidebar: scriptEls.enableSidebar,
             sidebarPosition: scriptEls.sidebarPosition
         });