ui: add animation to head navbar

AmosChenZixuan · Apr 26, 2024 · f7f3eb4 · f7f3eb4
1 parent d129f15
commit f7f3eb4
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 7 deletions.
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -1,4 +1,6 @@
 'use client'
+import { useEffect, useState } from 'react'
+import { motion } from 'framer-motion'
 import siteMetadata from '@/data/siteMetadata'
 import useHeaderNavLinks from '@/data/headerNavLinks'
 import Image from 'next/image'
@@ -12,19 +14,37 @@ import { useTranslation } from 'utils/locale'
 
 const Header = () => {
   const { t } = useTranslation()
+  const [isScrolled, setIsScrolled] = useState(true)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY >= 100)
+    }
+
+    window.addEventListener('scroll', handleScroll)
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+    }
+  }, [])
 
   return (
-    <header
-      className="fixed left-0 right-0 top-2 z-50 mx-auto max-w-5xl
-    rounded-md bg-white/30 py-2 pl-2
-    pr-4 shadow-md backdrop-blur dark:bg-black/30 dark:shadow-gray-800"
+    <motion.header
+      className={`fixed left-0 right-0 top-2 z-50 mx-auto
+        rounded-md bg-white/30 py-2 pl-2
+        pr-4 ${isScrolled ? 'shadow-md' : ''} backdrop-blur dark:bg-black/30 dark:shadow-gray-800`}
+      initial={{ width: '100vw' }}
+      animate={{ width: isScrolled ? '80vw' : '100vw' }}
+      transition={{ duration: 0.5 }}
     >
-      <div className="mx-auto flex max-w-4xl items-center justify-between px-3 xl:max-w-5xl xl:px-0">
+      <div className="flex items-center justify-between px-3">
         <Link href="/" aria-label={siteMetadata.headerTitle} className="flex items-center">
           <div className="flex items-center justify-between">
-            <div className="mr-3">
+            <div className="mr-3 hidden md:block">
               <Image src="/static/images/logo.png" width="200" height="44" alt="logo" priority />
             </div>
+            <div className="mr-3 block md:hidden">
+              <Image src="/static/favicons/icon.png" width="44" height="44" alt="logo" priority />
+            </div>
             {typeof siteMetadata.headerTitle === 'string' ? (
               <div className="hidden h-6 text-2xl font-semibold sm:block">
                 {siteMetadata.headerTitle}
@@ -55,7 +75,7 @@ const Header = () => {
         </div>
         {/* <div className="absolute inset-x-0 middle-y-0 border-t border-gray-300"></div> */}
       </div>
-    </header>
+    </motion.header>
   )
 }
 

diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "autoprefixer": "^10.4.13",
     "contentlayer2": "0.4.4",
     "esbuild": "0.20.2",
+    "framer-motion": "^11.1.7",
     "github-slugger": "^2.0.0",
     "gray-matter": "^4.0.2",
     "hast-util-from-html-isomorphic": "^2.0.0",

diff --git a/yarn.lock b/yarn.lock
@@ -5769,6 +5769,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"framer-motion@npm:^11.1.7":
+  version: 11.1.7
+  resolution: "framer-motion@npm:11.1.7"
+  dependencies:
+    tslib: ^2.4.0
+  peerDependencies:
+    "@emotion/is-prop-valid": "*"
+    react: ^18.0.0
+    react-dom: ^18.0.0
+  peerDependenciesMeta:
+    "@emotion/is-prop-valid":
+      optional: true
+    react:
+      optional: true
+    react-dom:
+      optional: true
+  checksum: ba4f2f0823eec7b78fa87180545cf8c832929ce52de8bab34312a67bfd6dee4ab6ad17143b9df2efcd4ede7cb87fc326843a1101a6cad3031c89a6ad2160e037
+  languageName: node
+  linkType: hard
+
 "fs-minipass@npm:^2.0.0":
   version: 2.1.0
   resolution: "fs-minipass@npm:2.1.0"
@@ -10878,6 +10898,7 @@ __metadata:
     eslint-config-next: 14.2.1
     eslint-config-prettier: ^8.8.0
     eslint-plugin-prettier: ^5.0.0
+    framer-motion: ^11.1.7
     github-slugger: ^2.0.0
     gray-matter: ^4.0.2
     hast-util-from-html-isomorphic: ^2.0.0