Add hire badge in nav on mobile

vallieres13 · Jan 22, 2024 · 364469f · 364469f
1 parent b9f15f6
commit 364469f
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -40,6 +40,13 @@ const Header = () => {
 				pointerEvents: 'none',
 				ease: 'power4.in'
 			});
+			gsap.to(mobile.current!.querySelector(':scope nav > .mobile ul li sup'), {
+				x: 15,
+				opacity: 0,
+				duration: .15,
+				pointerEvents: 'none',
+				ease: 'power4.in'
+			});
 			setIsMobileNavOpen(false);
 		} else {
 			gsap.to('main, #app > article, footer', {
@@ -58,6 +65,14 @@ const Header = () => {
 				pointerEvents: 'all',
 				ease: 'power4.out'
 			});
+			gsap.to(mobile.current!.querySelector(':scope nav > .mobile ul li sup'), {
+				x: 0,
+				opacity: 1,
+				delay: .16,
+				duration: .025,
+				pointerEvents: 'all',
+				ease: 'power4.out'
+			});
 			setIsMobileNavOpen(true);
 		}
 	}

diff --git a/src/styles/app.scss b/src/styles/app.scss
@@ -344,7 +344,8 @@ header {
 			pointer-events: none;
 
 			li {
-				display: block;
+				display: flex;
+				flex-direction: row-reverse;
 				overflow: hidden;
 				pointer-events: none;
 
@@ -358,7 +359,11 @@ header {
 				}
 
 				sup {
-					display: none;
+					display: grid;
+					opacity: 0;
+					margin: auto auto 1.8rem;
+					height: 10px;
+					transform: translateX(15px);
 				}
 			}
 		}