feat: add header shadow on scroll | fix: ios input auto zoom

MarcoEscaleira · Apr 16, 2024 · d1f3250 · d1f3250
1 parent 366a847
commit d1f3250
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/images/planet-earth.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
     <title>Meet the Countries</title>
     <meta
       name="description"

diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "@bahmutov/cypress-esbuild-preprocessor": "^2.2.0",
     "@hookform/resolvers": "^3.3.4",
     "@material-tailwind/react": "^2.1.9",
+    "@smakss/react-scroll-direction": "^4.1.0",
     "@tanstack/react-table": "^8.13.2",
     "@vercel/analytics": "^1.2.2",
     "d3-geo": "^3.1.0",

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -10,8 +10,9 @@ import {
   Tooltip,
   Typography,
 } from "@material-tailwind/react";
+import useDetectScroll, { Axis } from "@smakss/react-scroll-direction";
 import { format } from "date-fns";
-import { Menu, Home, Play, FileQuestion, X, CircleUserRound, Power, LibraryBig, ChevronRight } from "lucide-react";
+import { ChevronRight, CircleUserRound, FileQuestion, Home, LibraryBig, Menu, Play, Power, X } from "lucide-react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
 import useBreakpoint from "use-breakpoint";
@@ -24,6 +25,9 @@ import { QUIZ_OF_THE_DAY } from "@utils/queries/QuizOfTheDay.ts";
 export function Header() {
   // const { notifications, clear, markAllAsRead, markAsRead, add, update, remove, find, sort, unreadCount } =
   //   useNotificationCenter();
+  const {
+    scrollPosition: { top },
+  } = useDetectScroll({ axis: Axis.Y });
   const location = useLocation();
   const navigate = useNavigate();
   const { breakpoint } = useBreakpoint(BREAKPOINTS);
@@ -41,7 +45,7 @@ export function Header() {
   return (
     <>
       <header
-        className={`fixed left-0 top-0 z-10 w-full px-2 py-2 sm:px-6 sm:py-4 md:px-4 ${isHome ? "bg-transparent" : "bg-white"}`}
+        className={`fixed left-0 top-0 z-10 w-full px-2 py-2 sm:px-6 sm:py-4 md:px-4 ${isHome ? "bg-transparent" : "bg-white"} ${top > 5 ? "shadow" : ""}`}
       >
         <div className="flex items-center justify-between">
           <Tooltip content="Home">

diff --git a/yarn.lock b/yarn.lock
@@ -2080,6 +2080,11 @@
   resolved "https://registry.yarnpkg.com/@sideway/pinpoint/-/pinpoint-2.0.0.tgz#cff8ffadc372ad29fd3f78277aeb29e632cc70df"
   integrity sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==
 
+"@smakss/react-scroll-direction@^4.1.0":
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/@smakss/react-scroll-direction/-/react-scroll-direction-4.1.0.tgz#3ab08f9737ca9854eb6638538f10e0651df3eb96"
+  integrity sha512-sRUQVyuqRl8HqCg8pLTvb0/zZTQnFeFBx6fOvtRJ5xFY9OrWRfraTKFx9EDrivUFQXKSiX5tVnA+JKrGZOT2sg==
+
 "@tanstack/react-table@^8.13.2":
   version "8.13.2"
   resolved "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.13.2.tgz"