feat(navbar): animate navbar for large and medium size

konstaui · Sep 8, 2022 · 30adb31 · 30adb31
1 parent 9bc4ef8
commit 30adb31
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 15 deletions.
diff --git a/src/react/components/Navbar.jsx b/src/react/components/Navbar.jsx
@@ -63,6 +63,7 @@ const Navbar = forwardRef((props, ref) => {
   const innerElRef = useRef(null);
   const titleContainerElRef = useRef(null);
   const titleElRef = useRef(null);
+  const subnavbarElRef = useRef(null);
 
   const wasScrollable = useRef(null);
 
@@ -99,7 +100,9 @@ const Navbar = forwardRef((props, ref) => {
     const maxTranslate = titleContainerHeight.current;
     const scrollProgress = Math.max(Math.min(scrollTop / maxTranslate, 1), 0);
 
-    bgElRef.current.style.opacity = transparent ? scrollProgress : '';
+    bgElRef.current.style.opacity = transparent
+      ? -0.5 + scrollProgress * 1.5
+      : '';
     if (medium || large) {
       bgElRef.current.style.transform = `translateY(-${
         scrollProgress * maxTranslate
@@ -113,7 +116,12 @@ const Navbar = forwardRef((props, ref) => {
       titleContainerElRef.current.style.opacity = 1 - scrollProgress * 2;
     }
     if (titleElRef.current) {
-      titleElRef.current.style.opacity = -0.5 + scrollProgress * 2;
+      titleElRef.current.style.opacity = -0.5 + scrollProgress * 1.5;
+    }
+    if ((medium || large) && subnavbarElRef.current) {
+      subnavbarElRef.current.style.transform = `translateY(-${
+        scrollProgress * maxTranslate
+      }px)`;
     }
   };
 
@@ -210,7 +218,11 @@ const Navbar = forwardRef((props, ref) => {
           {title}
         </div>
       )}
-      {subnavbar && <div className={c.subnavbar}>{subnavbar}</div>}
+      {subnavbar && (
+        <div className={c.subnavbar} ref={subnavbarElRef}>
+          {subnavbar}
+        </div>
+      )}
     </Component>
   );
 });

diff --git a/src/shared/classes/NavbarClasses.js b/src/shared/classes/NavbarClasses.js
@@ -38,6 +38,7 @@ export const NavbarClasses = (props, colors, classes) => {
     base: {
       common: cls(
         `w-full z-20 top-0 pt-safe`,
+        (large || medium) && 'pointer-events-none',
         positionClass('sticky', classes)
       ),
       ios: cls(fontSizeIos, colors.textIos),
@@ -55,15 +56,17 @@ export const NavbarClasses = (props, colors, classes) => {
     subnavbar: {
       common: cls(
         'relative flex items-center',
-        subnavbarClassName || subnavbarClass
+        subnavbarClassName || subnavbarClass,
+        (large || medium) && 'pointer-events-auto'
       ),
       ios: 'h-11 pl-2-safe pr-2-safe',
       material: 'h-14 pl-4-safe pr-4-safe',
     },
     inner: {
       common: cls(
         'flex relative items-center w-full overflow-hidden',
-        innerClassName || innerClass
+        innerClassName || innerClass,
+        (large || medium) && 'pointer-events-auto z-10'
       ),
       ios: cls(
         'pl-2-safe pr-2-safe h-11',
@@ -72,7 +75,10 @@ export const NavbarClasses = (props, colors, classes) => {
       material: 'justify-start h-16 pl-safe pr-safe',
     },
     titleContainer: {
-      common: 'flex items-center px-4 relative',
+      common: cls(
+        'flex items-center px-4 relative',
+        (large || medium) && 'pointer-events-auto'
+      ),
       ios: cls(
         medium && cls(titleMediumFontSizeIos, 'h-11 font-semibold'),
         large && cls(titleLargeFontSizeIos, 'h-13 font-bold')

diff --git a/src/svelte/components/Navbar.svelte b/src/svelte/components/Navbar.svelte
@@ -52,19 +52,20 @@
   let innerElRef = null;
   let titleContainerElRef = null;
   let titleElRef = null;
+  let subnavbarElRef = null;
 
   $: isScrollable = medium || large || transparent;
   let wasScrollable = isScrollable;
 
   const dark = useDarkClasses();
 
+  let theme;
+  theme = useTheme((v) => (theme = v));
+
   $: colors = NavbarColors(colorsProp, dark);
 
   $: isOutline = typeof outline === 'undefined' ? theme === 'ios' : outline;
 
-  let theme;
-  theme = useTheme((v) => (theme = v));
-
   $: c = useThemeClasses(
     { ios, material },
     NavbarClasses(
@@ -128,7 +129,7 @@
     const maxTranslate = titleContainerHeight;
     const scrollProgress = Math.max(Math.min(scrollTop / maxTranslate, 1), 0);
 
-    bgElRef.style.opacity = transparent ? scrollProgress : '';
+    bgElRef.style.opacity = transparent ? -0.5 + scrollProgress * 1.5 : '';
     if (medium || large) {
       bgElRef.style.transform = `translateY(-${
         scrollProgress * maxTranslate
@@ -142,7 +143,12 @@
       titleContainerElRef.style.opacity = 1 - scrollProgress * 2;
     }
     if (titleElRef) {
-      titleElRef.style.opacity = -0.5 + scrollProgress * 2;
+      titleElRef.style.opacity = -0.5 + scrollProgress * 1.5;
+    }
+    if ((medium || large) && subnavbarElRef) {
+      subnavbarElRef.style.transform = `translateY(-${
+        scrollProgress * maxTranslate
+      }px)`;
     }
   };
 
@@ -230,7 +236,7 @@
     </div>
   {/if}
   {#if $$slots.subnavbar}
-    <div class={c.subnavbar}>
+    <div class={c.subnavbar} bind:this={subnavbarElRef}>
       <slot name="subnavbar" />
     </div>
   {/if}

diff --git a/src/vue/components/Navbar.vue b/src/vue/components/Navbar.vue
@@ -26,7 +26,7 @@
       {{ title }}
       <slot name="title" />
     </div>
-    <div v-if="slots.subnavbar" :class="c.subnavbar">
+    <div v-if="slots.subnavbar" ref="subnavbarElRef" :class="c.subnavbar">
       <slot name="subnavbar" />
     </div>
   </component>
@@ -98,6 +98,7 @@
       const innerElRef = ref(null);
       const titleContainerElRef = ref(null);
       const titleElRef = ref(null);
+      const subnavbarElRef = ref(null);
 
       const isScrollable = computed(
         () => props.transparent || props.large || props.medium
@@ -164,7 +165,9 @@
           0
         );
 
-        bgElRef.value.style.opacity = props.transparent ? scrollProgress : '';
+        bgElRef.value.style.opacity = props.transparent
+          ? -0.5 + scrollProgress * 1.5
+          : '';
         if (props.medium || props.large) {
           bgElRef.value.style.transform = `translateY(-${
             scrollProgress * maxTranslate
@@ -178,7 +181,12 @@
           titleContainerElRef.value.style.opacity = 1 - scrollProgress * 2;
         }
         if (titleElRef.value) {
-          titleElRef.value.style.opacity = -0.5 + scrollProgress * 2;
+          titleElRef.value.style.opacity = -0.5 + scrollProgress * 1.5;
+        }
+        if ((props.medium || props.large) && subnavbarElRef.value) {
+          subnavbarElRef.value.style.transform = `translateY(-${
+            scrollProgress * maxTranslate
+          }px)`;
         }
       };
 
@@ -249,6 +257,7 @@
         innerElRef,
         titleContainerElRef,
         titleElRef,
+        subnavbarElRef,
       };
     },
   };