From 5605c76c583dc4865cb653bff3e3ee0dd01a73b7 Mon Sep 17 00:00:00 2001
From: kylejoe <halterman.kyle@gmail.com>
Date: Sun, 3 Mar 2024 22:16:40 -0800
Subject: [PATCH] Animation for header menu

---
 src/app/components/HeaderMenu.module.css | 23 ++++++++++++++++++++++-
 src/app/components/HeaderMenu.tsx        | 15 ++++-----------
 2 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/app/components/HeaderMenu.module.css b/src/app/components/HeaderMenu.module.css
index 79ecfa4..b201ee7 100644
--- a/src/app/components/HeaderMenu.module.css
+++ b/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));
 }
diff --git a/src/app/components/HeaderMenu.tsx b/src/app/components/HeaderMenu.tsx
index aebe6ce..655dd4e 100644
--- a/src/app/components/HeaderMenu.tsx
+++ b/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}>