diff --git a/package-lock.json b/package-lock.json index 66d2997..da93294 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,8 @@ "dependencies": { "next": "14.0.1", "react": "^18", - "react-dom": "^18" + "react-dom": "^18", + "react-icons": "^4.11.0" }, "devDependencies": { "autoprefixer": "^10.0.1", @@ -3834,6 +3835,14 @@ "react": "^18.2.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": "*" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/package.json b/package.json index 8c6a794..1b01bfa 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,8 @@ "dependencies": { "next": "14.0.1", "react": "^18", - "react-dom": "^18" + "react-dom": "^18", + "react-icons": "^4.11.0" }, "devDependencies": { "autoprefixer": "^10.0.1", diff --git a/src/components/Header.jsx b/src/components/Header.jsx index cbd4d3c..26a0bf0 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -1,3 +1,199 @@ +"use client"; + +import Link from "next/link"; +import { HiMenuAlt3 } from "react-icons/hi"; +import { WiMoonAltThirdQuarter } from "react-icons/wi"; +import { FiSun } from "react-icons/fi"; +import { PiMoonStarsBold, PiChatsBold } from "react-icons/pi"; +import { MdClose } from "react-icons/md"; +import { BiBookAlt, BiAddToQueue } from "react-icons/bi"; +import { TbBuildingBank } from "react-icons/tb"; +import { useState, useRef } from "react"; +import { useTheme } from "@/providers/ThemeProvider"; +import useClickOutside from "@/hooks/useClickOutside"; +import { BsGithub } from "react-icons/bs"; + export default function Header() { - return
Header
; + const [showMobileNav, setShowMobileNav] = useState(false); + const [showThemeNav, setShowThemeNav] = useState(false); + const { theme, setTheme } = useTheme(); + + const mobileNavRef = useRef(null); + const showMobileNavRef = useRef(null); + const themeNavRef = useRef(null); + const showThemeNavRef = useRef(null); + + useClickOutside(mobileNavRef, showMobileNavRef, () => + setShowMobileNav(false), + ); + useClickOutside(themeNavRef, showThemeNavRef, () => setShowThemeNav(false)); + + return ( +
+ +

EXAMSHARE

+ +
+
+ + +
+
+ +
+
+ + {showThemeNav && ( +
    +
  • { + localStorage.setItem("theme", "light"); + setTheme("light"); + setShowThemeNav(false); + }} + className={`mb-1 flex cursor-pointer items-center gap-2 rounded-lg px-2 py-1 hover:bg-sky-100 dark:hover:bg-sky-800 ${ + theme === "light" && "font-extrabold text-sky-400" + }`} + > + + Light +
    • +
  • { + localStorage.setItem("theme", "dark"); + setTheme("dark"); + setShowThemeNav(false); + }} + className={`mb-1 flex cursor-pointer items-center gap-2 rounded-lg px-2 py-1 hover:bg-sky-100 dark:hover:bg-sky-800 ${ + theme === "dark" && "font-extrabold text-sky-400" + }`} + > + + Dark +
    • +
  • { + localStorage.setItem("theme", "os"); + setTheme("os"); + setShowThemeNav(false); + }} + className={`mb-1 flex cursor-pointer items-center gap-2 rounded-lg px-2 py-1 hover:bg-sky-100 dark:hover:bg-sky-800 ${ + theme === "os" && "font-extrabold text-sky-400" + }`} + > + + OS Default +
    • +
+ )} + + + +
+
+
+ ); } diff --git a/src/hooks/useClickOutside.js b/src/hooks/useClickOutside.js new file mode 100644 index 0000000..18fa3ca --- /dev/null +++ b/src/hooks/useClickOutside.js @@ -0,0 +1,25 @@ +import { useEffect } from "react"; + +export default function useClickOutside(ref, triggerRef, handler) { + useEffect(() => { + const listener = (e) => { + // Check if clicking ref's element or descendant elements, or the element that triggered it + if ( + !ref?.current || + ref.current.contains(e.target) || + (triggerRef?.current && triggerRef.current.contains(e.target)) + ) { + return; + } + handler(); + }; + + document.addEventListener("mousedown", listener); + document.addEventListener("touchstart", listener); + + return () => { + document.removeEventListener("mousedown", listener); + document.removeEventListener("touchstart", listener); + }; + }, [ref, triggerRef, handler]); +} diff --git a/tailwind.config.js b/tailwind.config.js index 945540d..c27ee97 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -12,5 +12,6 @@ module.exports = { }, }, }, + darkMode: "class", plugins: [], };