From 9d4400da01b497672ae0f4de0777457dc6279020 Mon Sep 17 00:00:00 2001
From: Jevy Larano <32891190+jrlarano@users.noreply.github.com>
Date: Thu, 29 Aug 2024 12:25:03 +0800
Subject: [PATCH] Sidebar improvements

---
 lib/kits/core-ui/components/common/header.ts  | 24 ++++++++++---------
 .../core-ui/components/common/sidebar.styl    |  7 +++---
 .../paged-publication/main-container.styl     |  1 +
 .../paged-publication/main-container.ts       |  2 +-
 4 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/lib/kits/core-ui/components/common/header.ts b/lib/kits/core-ui/components/common/header.ts
index 4b2d7467..bb4f954b 100644
--- a/lib/kits/core-ui/components/common/header.ts
+++ b/lib/kits/core-ui/components/common/header.ts
@@ -277,18 +277,9 @@ 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 =
@@ -296,6 +287,17 @@ const Header = ({
                         ? '#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
index 6bbb6120..c19ce697 100644
--- 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
index 6a4e4162..ee691d61 100644
--- 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
index 49505e60..72256554 100644
--- 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
         });