From 9b590e08a6b37a8244a8ae1d4d975c630901be6a Mon Sep 17 00:00:00 2001 From: Basavarajakjbasuu Date: Fri, 13 Oct 2023 01:33:04 +0530 Subject: [PATCH] Make the upper navbar mobile responsive --- client/src/components/HeroSection.jsx | 2 +- client/src/components/Navbar.jsx | 214 ++++++++++++++++++++++++-- client/src/hooks/useClickoutSide.ts | 25 +++ client/src/index.css | 26 ++++ client/tailwind.config.js | 22 ++- package-lock.json | 50 ++++++ package.json | 5 + 7 files changed, 326 insertions(+), 18 deletions(-) create mode 100644 client/src/hooks/useClickoutSide.ts create mode 100644 package-lock.json create mode 100644 package.json diff --git a/client/src/components/HeroSection.jsx b/client/src/components/HeroSection.jsx index 8c873aa..ff9b7a6 100644 --- a/client/src/components/HeroSection.jsx +++ b/client/src/components/HeroSection.jsx @@ -4,7 +4,7 @@ import { spinner } from '../assets'; const HeroSection = () => { return (
-
+
diff --git a/client/src/components/Navbar.jsx b/client/src/components/Navbar.jsx index 0b03dca..15fffb0 100644 --- a/client/src/components/Navbar.jsx +++ b/client/src/components/Navbar.jsx @@ -1,27 +1,209 @@ -import React from 'react' +import { useCallback, useEffect, useState } from 'react' import { logo } from '../assets'; import { Link } from 'react-router-dom' import { Link as ScrollLink} from "react-scroll"; -const Navbar = ({isLoggedIn}) => { +import { LuX, LuAlignJustify } from 'react-icons/lu'; +import useClickOutside from '../hooks/useClickoutSide'; + +const navList = [ + { + id: 1, + listName: 'Products', + scrollTo: 'products' + }, + { + id: 2, + listName: 'About us', + scrollTo: 'about_us' + }, + +] +const Navbar = ({ isLoggedIn }) => { + const [toggleNav, setToggleNav] = useState(false); + + const [activateHeader, setActivateHeader] = useState(false); + + const handleToggleNav = useCallback(() => { + setToggleNav((value) => !value); + }, []); + + const navRef = useClickOutside(() => setToggleNav(false)); + useEffect(() => { + const handleScroll = () => { + if (window.scrollY > 100) { + setActivateHeader(true); + } else { + setActivateHeader(false); + } + + } + + + // add evenListener to activate header + window.addEventListener('scroll', handleScroll); + + // cleanup function + return () => { + window.removeEventListener('scroll', handleScroll) + } + }, []); return ( - + + {/* navbar */} + + + + {/* overlay */} + {toggleNav && ( +
+ )} +
+ ); } -export default Navbar \ No newline at end of file +export default Navbar + + +/* +
    + {!isLoggedIn &&
  • LOG IN
    • } +
  • PRODUCTS
    • +
  • ABOUT US
    • +
+*/ \ No newline at end of file diff --git a/client/src/hooks/useClickoutSide.ts b/client/src/hooks/useClickoutSide.ts new file mode 100644 index 0000000..1a3a80e --- /dev/null +++ b/client/src/hooks/useClickoutSide.ts @@ -0,0 +1,25 @@ +import { useEffect, useRef } from "react"; + +type ClickOutsideCallback = () => void; + +export default function useClickOutside (callbackFun: ClickOutsideCallback) { + + const domNodeRef = useRef(null); + + useEffect(() => { + + const handler = (event: MouseEvent) => { + if (domNodeRef.current && !domNodeRef.current.contains(event.target as Node)) { + callbackFun() + } + } + + document.addEventListener('mousedown', handler) + + return () => { + document.removeEventListener("mousedown", handler) + } + }, [callbackFun]); + + return domNodeRef; +} \ No newline at end of file diff --git a/client/src/index.css b/client/src/index.css index 8301e39..817f917 100644 --- a/client/src/index.css +++ b/client/src/index.css @@ -31,4 +31,30 @@ background-color: #161516; transform-origin: top; z-index: 100; +} + +@media (min-width: 992px) { + .navbar { + all: unset; + display: flex; + align-items: center; + flex-grow: 1; + } +} +@layer components { + + .btn { + @apply h-[50px] text-white px-[30px] rounded-lg flex items-center justify-center gap-[10px] max-w-max ease-in duration-300 + } + + .btn-primary { + @apply bg-bg-majorelle-blue rounded-[200px] hover:bg-bg-ocean-blue shadow-shadow-2 + } + + .btn-secondary { + @apply bg-bg-red-salsa hover:bg-bg-english-vermillion shadow-shadow-3 + } + .header-active { + @apply fixed bg-white animate-slideIn shadow-shadow-1 + } } \ No newline at end of file diff --git a/client/tailwind.config.js b/client/tailwind.config.js index 083dbbb..1f51290 100644 --- a/client/tailwind.config.js +++ b/client/tailwind.config.js @@ -11,11 +11,31 @@ export default { }, colors: { 'blue':'#6A7FDB', - 'pink':'#B6174B', + 'pink': '#B6174B', + 'bg-majorelle-blue': 'hsl(249, 95%, 63%)', + 'bg-ocean-blue' : 'hsl(249, 63%, 54%)', 'white':'#F8FAF8', 'black':'#000000', 'dark-gray':'#161516', 'green':'#2DE1C2', + }, + boxShadow: { + 'shadow-1' : '0 2px 10px hsla(209, 40%, 14%, 10%)', + 'shadow-2' : '0 5px 10px hsla(249, 95%, 63%, 25%)', + }, + animation: { + 'dropShadow': ' dropShadow 800ms ease-in-out infinite alternate', + 'slideIn': 'slideIn 500ms ease forwards' + }, + keyframes: { + 'dropShadow': { + '0%': { width: '40%' }, + '100%': { width: '80%' } + }, + 'slideIn': { + '0%': { transform: 'translateY(-100px)'}, + '100%': { transform: 'translateY(0px)'} + } } }, animation: { diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..eed950d --- /dev/null +++ b/package-lock.json @@ -0,0 +1,50 @@ +{ + "name": "hyper-soar", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "dependencies": { + "react-icons": "^4.11.0" + } + }, + "node_modules/js-tokens": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", + "peer": true + }, + "node_modules/loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "peer": true, + "dependencies": { + "js-tokens": "^3.0.0 || ^4.0.0" + }, + "bin": { + "loose-envify": "cli.js" + } + }, + "node_modules/react": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", + "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", + "peer": true, + "dependencies": { + "loose-envify": "^1.1.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/react-icons": { + "version": "4.11.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.11.0.tgz", + "integrity": "sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA==", + "peerDependencies": { + "react": "*" + } + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..79e18c2 --- /dev/null +++ b/package.json @@ -0,0 +1,5 @@ +{ + "dependencies": { + "react-icons": "^4.11.0" + } +}