feat: add variables in sidebar and navbar for realtime customization

privy-open-source · May 15, 2024 · 8b439fc · 8b439fc
1 parent 40505ef
commit 8b439fc
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 5 deletions.
diff --git a/src/components/navbar/Navbar.vue b/src/components/navbar/Navbar.vue
@@ -93,13 +93,19 @@ provide(NAVBAR_SETTINGS, {
   --p-navbar-sticky-top: theme(spacing.0);
   --p-navbar-collapse-max-height: 20rem; /** 320px */
   --p-navbar-padding-x: theme(spacing.3);
+  --p-navbar-padding-left: var(--p-navbar-padding-x);
+  --p-navbar-padding-right: var(--p-navbar-padding-x);
   --p-navbar-padding-y: theme(spacing.3);
+  --p-navbar-padding-top: var(--p-navbar-padding-y);
+  --p-navbar-padding-bottom: var(--p-navbar-padding-y);
   --p-navbar-bg: theme(backgroundColor.default.DEFAULT);
   --p-navbar-bg-dark: theme(backgroundColor.dark.default.DEFAULT);
-  --p-navbar-shadow: theme(boxShadow.lg);
+  --p-navbar-shadow: none;
+  --p-navbar-shadow-on-scroll: theme(boxShadow.lg);
 
-  @apply bg-[color:var(--p-navbar-bg)] relative px-[var(--p-navbar-padding-x)] py-[var(--p-navbar-padding-y)] flex items-center flex-wrap transition-shadow duration-150 ease-in-out;
+  @apply bg-[color:var(--p-navbar-bg)] relative pl-[var(--p-navbar-padding-left)] pr-[var(--p-navbar-padding-right)] pt-[var(--p-navbar-padding-top)] pb-[var(--p-navbar-padding-bottom)] flex items-center flex-wrap transition-shadow duration-150 ease-in-out;
   @apply dark:bg-[color:var(--p-navbar-bg-dark)];
+  box-shadow: var(--p-navbar-shadow);
 
   &&--fixed {
     @apply fixed left-0 top-0 w-full z-[var(--p-navbar-z-index)];
@@ -110,7 +116,8 @@ provide(NAVBAR_SETTINGS, {
   }
 
   &&--shadow {
-    @apply shadow-[var(--p-navbar-shadow)] transition-shadow duration-150 ease-in-out;
+    @apply transition-shadow duration-150 ease-in-out;
+    box-shadow: var(--p-navbar-shadow-on-scroll);
   }
 
   &&--expand {

diff --git a/src/components/navbar/index.md b/src/components/navbar/index.md
@@ -583,9 +583,15 @@ Navbar use local CSS variables on `.navbar` for enhanced real-time customization
 --p-navbar-sticky-top: theme(spacing.0);
 --p-navbar-collapse-max-height: 20rem; /* 320px */
 --p-navbar-padding-x: theme(spacing.3);
+--p-navbar-padding-left: var(--p-navbar-padding-x);
+--p-navbar-padding-right: var(--p-navbar-padding-x);
 --p-navbar-padding-y: theme(spacing.3);
+--p-navbar-padding-top: var(--p-navbar-padding-y);
+--p-navbar-padding-bottom: var(--p-navbar-padding-y);
 --p-navbar-bg: theme(backgroundColor.default.DEFAULT);
 --p-navbar-bg-dark: theme(backgroundColor.dark.default.DEFAULT);
+--p-navbar-shadow: none;
+--p-navbar-shadow-on-scroll: theme(boxShadow.lg);
 ```
 ## API
 

diff --git a/src/components/sidebar/Sidebar.vue b/src/components/sidebar/Sidebar.vue
@@ -134,9 +134,14 @@ provide(SIDEBAR_SETTINGS, {
   --p-sidebar-z-index: theme(zIndex.fixed);
   --p-sidebar-sticky-top: theme(spacing.0);
   --p-sidebar-padding-x: theme(spacing.2);
+  --p-sidebar-padding-left: var(--p-sidebar-padding-x);
+  --p-sidebar-padding-right: var(--p-sidebar-padding-x);
   --p-sidebar-padding-y: theme(spacing.4);
+  --p-sidebar-padding-top: var(--p-sidebar-padding-y);
+  --p-sidebar-padding-bottom: var(--p-sidebar-padding-y);
+  --p-sidebar-shadow: theme(boxShadow.lg);
 
-  @apply bg-[color:var(--p-sidebar-bg)] px-[var(--p-sidebar-padding-x)] py-[var(--p-sidebar-padding-y)] flex flex-col items-stretch;
+  @apply bg-[color:var(--p-sidebar-bg)] pt-[var(--p-sidebar-padding-top)] pb-[var(--p-sidebar-padding-bottom)] pl-[var(--p-sidebar-padding-left)] pr-[var(--p-sidebar-padding-right)] flex flex-col items-stretch;
   @apply dark:bg-[color:var(--p-sidebar-bg-dark)];
 
   /**
@@ -161,6 +166,7 @@ provide(SIDEBAR_SETTINGS, {
   */
   &&--fixed {
     @apply fixed z-[var(--p-sidebar-z-index)] top-0 h-full shadow-lg;
+    /* box-shadow: var(--p-sidebar-shadow); */
 
     .sidebar__menus {
       @apply grow h-full overflow-y-auto py-2;

diff --git a/src/components/sidebar/SidebarContent.vue b/src/components/sidebar/SidebarContent.vue
@@ -21,7 +21,6 @@ export default defineComponent({
       const navs = props.bottom
         ? findAllChildren(slots.default(), 'SidebarNav').filter((vnode) => toBoolean(vnode.props?.bottom))
         : findAllChildren(slots.default(), '*').filter((vnode) => toBoolean(vnode.props?.bottom) !== true)
-
       return navs.map((nav) => h(nav))
     }
   },

diff --git a/src/components/sidebar/index.md b/src/components/sidebar/index.md
@@ -806,7 +806,12 @@ Sidebar use local CSS variables for enhanced real-time customization.
 --p-sidebar-z-index: theme(zIndex.fixed);
 --p-sidebar-sticky-top: theme(spacing.0);
 --p-sidebar-padding-x: theme(spacing.2);
+--p-sidebar-padding-left: var(--p-sidebar-padding-x);
+--p-sidebar-padding-right: var(--p-sidebar-padding-x);
 --p-sidebar-padding-y: theme(spacing.4);
+--p-sidebar-padding-top: var(--p-sidebar-padding-y);
+--p-sidebar-padding-bottom: var(--p-sidebar-padding-y);
+--p-sidebar-shadow: theme(boxShadow.lg);
 ```
 
 ### `.sidebar__brand`