Animation for header menu

Author: kylejoe

src/app/components/HeaderMenu.module.css

@@ -5,9 +5,30 @@
   }
 }
 
+@keyframes slideDown {
+  from {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.headerVisible {
+  animation: slideDown 0.5s ease-out forwards;
+}
+
 .header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: rem(56);
+  z-index: 2;
+  animation: slideDown 0.5s ease-out forwards;
   background-color: var(--mantine-color-body);
-  height: rem(56px);
   border-bottom: rem(1px) solid
     light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
 }

src/app/components/HeaderMenu.tsx

@@ -15,6 +15,7 @@ import classes from "./HeaderMenu.module.css";
 import Image from "next/image";
 import Link from "next/link";
 import { IconBrandFacebook, IconBrandLinkedin } from "@tabler/icons-react";
+import { Fade } from "react-awesome-reveal";
 
 const links = [
   { link: "/#about", label: "About" },
@@ -101,17 +102,9 @@ export function HeaderMenu() {
   return (
     <>
       <header
-        className={classes.header}
-        style={{
-          position: "fixed",
-          top: 0,
-          left: 0,
-          right: 0,
-          height: rem(56),
-          zIndex: 2,
-          transition: "transform 400ms ease",
-          backgroundColor: "var(--mantine-color-body)",
-        }}
+        className={`${classes.header} ${
+          showHeader ? classes.headerVisible : ""
+        }`}
       >
         <Container size="lg">
           <div className={classes.inner}>