feat(header): implement responsive

iqbalpa · Jul 15, 2024 · 0005808 · 0005808
1 parent 6afa391
commit 0005808
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 36 deletions.
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cookies-next": "^4.2.1",
+    "hamburger-react": "^2.5.1",
     "jwt-decode": "^4.0.0",
     "lucide-react": "^0.407.0",
     "next": "14.2.2",

diff --git a/src/components/dropdown/dropdown.tsx b/src/components/dropdown/dropdown.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import Link from 'next/link';
+
+const Dropdown: React.FC<{ isScrolled: boolean }> = ({ isScrolled }) => {
+  return (
+    <div
+      className={`flex w-full flex-col transition-all duration-500 ${
+        isScrolled ? 'bg-opacity-100' : 'bg-opacity-10'
+      } bg-slate-800 text-center text-white`}
+    >
+      <Link
+        href="/watchlist"
+        className="py-2 duration-150 hover:scale-105 hover:bg-slate-900 hover:bg-opacity-50 hover:font-semibold"
+      >
+        Watchlist
+      </Link>
+      <Link
+        href="signin"
+        className="py-2 duration-150 hover:scale-105 hover:bg-slate-900 hover:bg-opacity-50 hover:font-semibold"
+      >
+        Login
+      </Link>
+    </div>
+  );
+};
+
+export default Dropdown;
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
@@ -10,6 +10,8 @@ import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
+import Hamburger from 'hamburger-react';
+import Dropdown from '../dropdown/dropdown';
 
 const antiHeader: string[] = ['/signup', '/signin'];
 
@@ -19,6 +21,7 @@ const Header: React.FC = () => {
   const dispatch = useDispatch();
   const router = useRouter();
   const [isScrolled, setIsScrolled] = useState(false);
+  const [isOpen, setOpen] = useState<boolean>(false);
 
   useEffect(() => {
     const handleScroll = () => {
@@ -41,7 +44,7 @@ const Header: React.FC = () => {
     dispatch(logout());
     toast.success('Logged out');
     setTimeout(() => {
-      router.push('/signin');
+      router.push('/');
     }, 500);
   };
 
@@ -51,44 +54,53 @@ const Header: React.FC = () => {
         isScrolled ? 'bg-opacity-100' : 'bg-opacity-10'
       } bg-slate-800`}
     >
-      <div className="container mx-auto flex h-10 items-center justify-between px-2 py-2 text-white md:h-16 md:px-6">
-        <Link href="/" className="text-lg font-bold md:text-xl lg:text-2xl">
+      <div className="container mx-auto flex h-10 items-center justify-between px-4 py-8 text-white md:h-16 md:px-6">
+        <Link
+          href="/"
+          className="text-base font-bold md:text-lg lg:text-xl xl:text-2xl"
+        >
           Movies Catalog
         </Link>
-        {user ? (
-          <div className="flex flex-row items-center gap-5">
-            <Link
-              href="/watchlist"
-              className="rounded-lg bg-slate-200 bg-opacity-5 px-3 py-2 font-semibold duration-150 hover:scale-105 hover:bg-opacity-15 hover:text-slate-200 md:px-4"
-            >
-              Watchlist
-            </Link>
-            <button
-              onClick={handleLogout}
-              className="flex cursor-pointer flex-row justify-center rounded-lg border-2 border-red-300 bg-red-300 bg-opacity-90 px-3 py-2 font-bold text-red-500 duration-150 hover:scale-105 hover:bg-red-200 hover:text-red-700 md:px-4"
-            >
-              <p className="mr-2">Logout</p>
-              <LogOut />
-            </button>
-          </div>
-        ) : (
-          <div className="flex flex-row items-center gap-5">
-            <Link
-              href="/signin"
-              className="rounded-lg bg-slate-200 bg-opacity-5 px-3 py-2 font-semibold duration-150 hover:scale-105 hover:bg-opacity-15 hover:text-slate-200 md:px-4"
-            >
-              Watchlist
-            </Link>
-            <Link
-              href="/signin"
-              className="flex cursor-pointer flex-row justify-center rounded-lg border-2 border-green-300 bg-green-300 bg-opacity-90 px-3 py-2 font-bold text-green-500 duration-150 hover:scale-105 hover:bg-green-200 hover:text-green-700 md:px-4"
-            >
-              <p className="mr-2">Login</p>
-              <LogIn />
-            </Link>
-          </div>
-        )}
+        <div className="block md:hidden">
+          <Hamburger toggled={isOpen} toggle={setOpen} />
+        </div>
+        <div className="hidden flex-row items-center gap-5 md:flex">
+          {user ? (
+            <>
+              <Link
+                href="/watchlist"
+                className="rounded-lg bg-slate-200 bg-opacity-5 px-3 py-2 font-semibold duration-150 hover:scale-105 hover:bg-opacity-15 hover:text-slate-200 md:px-4"
+              >
+                Watchlist
+              </Link>
+              <button
+                onClick={handleLogout}
+                className="flex cursor-pointer flex-row justify-center rounded-lg border-2 border-red-300 bg-red-300 bg-opacity-90 px-3 py-2 font-bold text-red-500 duration-150 hover:scale-105 hover:bg-red-200 hover:text-red-700 md:px-4"
+              >
+                <p className="mr-2">Logout</p>
+                <LogOut />
+              </button>
+            </>
+          ) : (
+            <>
+              <Link
+                href="/signin"
+                className="rounded-lg bg-slate-200 bg-opacity-5 px-3 py-2 font-semibold duration-150 hover:scale-105 hover:bg-opacity-15 hover:text-slate-200 md:px-4"
+              >
+                Watchlist
+              </Link>
+              <Link
+                href="/signin"
+                className="flex cursor-pointer flex-row justify-center rounded-lg border-2 border-green-300 bg-green-300 bg-opacity-90 px-3 py-2 font-bold text-green-500 duration-150 hover:scale-105 hover:bg-green-200 hover:text-green-700 md:px-4"
+              >
+                <p className="mr-2">Login</p>
+                <LogIn />
+              </Link>
+            </>
+          )}
+        </div>
       </div>
+      {isOpen && <Dropdown isScrolled={isScrolled} />}
     </header>
   );
 };

diff --git a/yarn.lock b/yarn.lock
@@ -1470,6 +1470,11 @@ graphemer@^1.4.0:
   resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
   integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==
 
+hamburger-react@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/hamburger-react/-/hamburger-react-2.5.1.tgz#a15973cacabbc414f490ab0aa13340e260fc6ec1"
+  integrity sha512-XlTIinYeYzLu76q4Vd9olwOJP0hFgAeZfJFX6tTT/ufTLhmOjI77CGFYIwGc6gcDeeT86660ZoKx3/L67vdZEw==
+
 has-bigints@^1.0.1, has-bigints@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.2.tgz#0871bd3e3d51626f6ca0966668ba35d5602d6eaa"