feat: 🎸 style the header

Hoang-Nguyen-Huy · Oct 4, 2024 · 3b08518 · 3b08518
1 parent 3932d5d
commit 3b08518
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 63 deletions.
diff --git a/src/components/Contact.jsx b/src/components/Contact.jsx
@@ -52,6 +52,7 @@ export default function Contact() {
         minHeight: "100vh",
         backgroundColor: theme.mainContent.backgroundColor,
         color: theme.text.primary,
+        paddingTop: '8px'
       }}
     >
       <Container

diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
@@ -1,4 +1,6 @@
 import * as React from "react";
+import { useContext, useState, useEffect } from "react";
+import { Link, useLocation } from "react-router-dom";
 import AppBar from "@mui/material/AppBar";
 import Box from "@mui/material/Box";
 import Toolbar from "@mui/material/Toolbar";
@@ -9,39 +11,38 @@ import MenuIcon from "@mui/icons-material/Menu";
 import Container from "@mui/material/Container";
 import Button from "@mui/material/Button";
 import MenuItem from "@mui/material/MenuItem";
-import AdbIcon from "@mui/icons-material/Adb";
+import LocalFloristIcon from "@mui/icons-material/LocalFlorist";
 import ToggleThemeButton from "../Button/ToggleThemeButton";
 import { ThemeContext } from "../../themes/ThemeContext";
-import { useContext } from "react";
-import { Link, useLocation } from "react-router-dom";
+import { motion, AnimatePresence } from "framer-motion";
 
 const pages = [
-  {
-    name: "Home",
-    path: "/fer-lab1/",
-  },
-  {
-    name: "Special",
-    path: "/fer-lab1/natural",
-  },
-  {
-    name: "News",
-    path: "/fer-lab1/news",
-  },
-  {
-    name: "About",
-    path: "/fer-lab1/about",
-  },
-  {
-    name: "Contact",
-    path: "/fer-lab1/contact",
-  },
+  { name: "Home", path: "/fer-lab1/" },
+  { name: "Special", path: "/fer-lab1/natural" },
+  { name: "News", path: "/fer-lab1/news" },
+  { name: "About", path: "/fer-lab1/about" },
+  { name: "Contact", path: "/fer-lab1/contact" },
 ];
 
 export default function Header() {
-  const [anchorElNav, setAnchorElNav] = React.useState(null);
+  const [anchorElNav, setAnchorElNav] = useState(null);
   const { theme } = useContext(ThemeContext);
   const location = useLocation();
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const isScrolled = window.scrollY > 10;
+      if (isScrolled !== scrolled) {
+        setScrolled(isScrolled);
+      }
+    };
+
+    document.addEventListener("scroll", handleScroll);
+    return () => {
+      document.removeEventListener("scroll", handleScroll);
+    };
+  }, [scrolled]);
 
   const handleOpenNavMenu = (event) => {
     setAnchorElNav(event.currentTarget);
@@ -52,43 +53,54 @@ export default function Header() {
   };
 
   return (
-    <AppBar position='static' color={theme.header.backgroundColor}>
-      <Container maxWidth='xl'>
+    <AppBar
+      position="fixed"
+      sx={{
+        backgroundColor: scrolled ? theme.header.backgroundColor : "transparent",
+        boxShadow: scrolled ? 3 : 0,
+        transition: "all 0.3s ease-in-out",
+      }}
+    >
+      <Container maxWidth="xl">
         <Toolbar disableGutters>
-          <AdbIcon sx={{ display: { xs: "none", md: "flex" }, mr: 1 }} />
-          <Link to={`/fer-lab1/`} style={{ textDecoration: "none" }}>
+          <motion.div
+            initial={{ opacity: 0, scale: 0.5 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 0.5 }}
+          >
+            <LocalFloristIcon sx={{ display: { xs: "none", md: "flex" }, mr: 1, fontSize: 40 }} />
+          </motion.div>
+          <Link to={`/fer-lab1/`} style={{ textDecoration: "none", display: "flex", alignItems: "center" }}>
             <Typography
-              variant='h6'
+              variant="h6"
               noWrap
-              component='a'
-              href='#app-bar-with-responsive-menu'
               sx={{
                 mr: 2,
                 display: { xs: "none", md: "flex" },
-                fontFamily: "monospace",
+                fontFamily: "Poppins, sans-serif",
                 fontWeight: 700,
                 letterSpacing: ".3rem",
                 color: "inherit",
                 textDecoration: "none",
               }}
             >
-              LOGO
+              ORCHID HAVEN
             </Typography>
           </Link>
 
           <Box sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}>
             <IconButton
-              size='large'
-              aria-label='account of current user'
-              aria-controls='menu-appbar'
-              aria-haspopup='true'
+              size="large"
+              aria-label="account of current user"
+              aria-controls="menu-appbar"
+              aria-haspopup="true"
               onClick={handleOpenNavMenu}
-              color='inherit'
+              color="inherit"
             >
               <MenuIcon />
             </IconButton>
             <Menu
-              id='menu-appbar'
+              id="menu-appbar"
               anchorEl={anchorElNav}
               anchorOrigin={{
                 vertical: "bottom",
@@ -101,42 +113,37 @@ export default function Header() {
               }}
               open={Boolean(anchorElNav)}
               onClose={handleCloseNavMenu}
-              sx={{ display: { xs: "block", md: "none" } }}
+              sx={{
+                display: { xs: "block", md: "none" },
+              }}
             >
               {pages.map((page) => (
-                <MenuItem
-                  key={page.name}
-                  onClick={handleCloseNavMenu}
-                  component={Link}
-                  to={page.path}
-                >
-                  <Typography sx={{ textAlign: "center" }}>
-                    {page.name}
-                  </Typography>
+                <MenuItem key={page.name} onClick={handleCloseNavMenu} component={Link} to={page.path}>
+                  <Typography textAlign="center">{page.name}</Typography>
                 </MenuItem>
               ))}
             </Menu>
           </Box>
-          <AdbIcon sx={{ display: { xs: "flex", md: "none" }, mr: 1 }} />
+          <LocalFloristIcon sx={{ display: { xs: "flex", md: "none" }, mr: 1, fontSize: 32 }} />
           <Typography
-            variant='h5'
+            variant="h5"
             noWrap
-            component='a'
-            href='/fer-lab1/'
+            component={Link}
+            to="/fer-lab1/"
             sx={{
               mr: 2,
               display: { xs: "flex", md: "none" },
               flexGrow: 1,
-              fontFamily: "monospace",
+              fontFamily: "Poppins, sans-serif",
               fontWeight: 700,
               letterSpacing: ".3rem",
               color: "inherit",
               textDecoration: "none",
             }}
           >
-            LOGO
+            ORCHID HAVEN
           </Typography>
-          <Box sx={{ flexGrow: 1, display: { xs: "none", md: "flex" } }}>
+          <Box sx={{ flexGrow: 1, display: { xs: "none", md: "flex" }, justifyContent: "center" }}>
             {pages.map((page) => (
               <Button
                 key={page.name}
@@ -145,14 +152,25 @@ export default function Header() {
                 onClick={handleCloseNavMenu}
                 sx={{
                   my: 2,
+                  mx: 1,
                   color: "white",
                   display: "block",
-                  backgroundColor:
-                    location.pathname === page.path
-                      ? "rgba(255, 255, 255, 0.2)"
-                      : "transparent",
-                  "&:hover": {
-                    backgroundColor: "rgba(255, 255, 255, 0.1)",
+                  fontFamily: "Poppins, sans-serif",
+                  fontWeight: 500,
+                  position: "relative",
+                  "&::after": {
+                    content: '""',
+                    position: "absolute",
+                    width: "100%",
+                    height: "2px",
+                    bottom: 0,
+                    left: 0,
+                    backgroundColor: "white",
+                    transform: location.pathname === page.path ? "scaleX(1)" : "scaleX(0)",
+                    transition: "transform 0.3s ease-in-out",
+                  },
+                  "&:hover::after": {
+                    transform: "scaleX(1)",
                   },
                 }}
               >
@@ -166,4 +184,4 @@ export default function Header() {
       </Container>
     </AppBar>
   );
-}
+}
diff --git a/src/components/MainContent/Content.jsx b/src/components/MainContent/Content.jsx
@@ -20,6 +20,7 @@ export default function Content() {
         width: "100%",
         margin: "0 auto",
         backgroundColor: theme.mainContent.backgroundColor,
+        paddingTop: '36px'
       }}
     >
       {Orchids.map((orchid) => {

diff --git a/src/components/SpecialOrchid.jsx b/src/components/SpecialOrchid.jsx
@@ -31,6 +31,7 @@ export default function SpecialOrchid() {
           width: "100%",
           margin: "0 auto",
           backgroundColor: theme.mainContent.backgroundColor,
+          paddingTop: "36px",
         }}
       >
         {specialOrchids.map((orchid) => {