diff --git a/components/common/Header/Header.tsx b/components/common/Header/Header.tsx index 45ccf208..f6724a53 100644 --- a/components/common/Header/Header.tsx +++ b/components/common/Header/Header.tsx @@ -8,137 +8,152 @@ import { useSession } from "next-auth/react"; import getCookieData from "../../../lib/getCookieData"; export default function Header() { - const [menuOpen, setMenuOpen] = useState(false); - const [active, setActive] = useState("/"); - - const isMobile = useMediaQuery("only screen and (max-width : 900px)"); - const router = useRouter(); - - const { data: session } = useSession(); - const { data: cookieData } = getCookieData(session); - - const toggleMenu = () => { - setMenuOpen(prev => !prev); - document.body.classList.toggle("body-scroll-lock", isMobile && !menuOpen) - } - - - useEffect(() => { - setActive(router.pathname); - - const removeScrollLock = () => - document.body.classList.toggle("body-scroll-lock", isMobile && menuOpen) - - window.addEventListener('resize', removeScrollLock) - - return () => window.removeEventListener("resize", removeScrollLock) - }, [router.pathname, menuOpen, isMobile]); - - return ( - - ); + const [menuOpen, setMenuOpen] = useState(false); + const [active, setActive] = useState("/"); + + const isMobile = useMediaQuery("only screen and (max-width : 900px)"); + const router = useRouter(); + + const { data: session } = useSession(); + const { data: cookieData } = getCookieData(session); + + const toggleMenu = () => { + setMenuOpen(prev => !prev); + document.body.classList.toggle("body-scroll-lock", isMobile && !menuOpen) + } + + + useEffect(() => { + setActive(router.pathname); + + const removeScrollLock = () => + document.body.classList.toggle("body-scroll-lock", isMobile && menuOpen) + + window.addEventListener('resize', removeScrollLock) + + return () => window.removeEventListener("resize", removeScrollLock) + }, [router.pathname, menuOpen, isMobile]); + + return ( +
+
+

+ {"🔈"} This website is currently being revamped. Check back later for Updates! +

+
+ +
+ ); } const headerItems = [ - { - href: "/about", - name: "About", - }, - { - href: "/branches", - name: "Branches", - }, - { - href: "/team", - name: "Team", - }, - { - href: "/events", - name: "Events", - }, + { + href: "/about", + name: "About", + }, + { + href: "/branches", + name: "Branches", + }, + { + href: "/team", + name: "Team", + }, + { + href: "/events", + name: "Events", + }, ]; function useMediaQuery(query: string) { - const subscribe = useCallback( - (callback: () => void) => { - const matchMedia = window.matchMedia(query); - - matchMedia.addEventListener("change", callback); - return () => { - matchMedia.removeEventListener("change", callback); - }; - }, - [query] - ); - - const getSnapshot = () => { - return window.matchMedia(query).matches; - }; - - const getServerSnapshot = () => { - throw Error("useMediaQuery is a client-only hook"); - }; - - return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot); + const subscribe = useCallback( + (callback: () => void) => { + const matchMedia = window.matchMedia(query); + + matchMedia.addEventListener("change", callback); + return () => { + matchMedia.removeEventListener("change", callback); + }; + }, + [query] + ); + + const getSnapshot = () => { + return window.matchMedia(query).matches; + }; + + const getServerSnapshot = () => { + throw Error("useMediaQuery is a client-only hook"); + }; + + return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot); } diff --git a/styles/components/Header.module.scss b/styles/components/Header.module.scss index 4a8591e8..95cabf57 100644 --- a/styles/components/Header.module.scss +++ b/styles/components/Header.module.scss @@ -1,179 +1,183 @@ @import "../variables"; +div.container { + z-index: 10; + position: fixed; + width: 100%; + top: 0; + left: 0; +} + .navbar { - background: white; - padding: 10px 100px 10px 40px; - display: flex; - align-items: center; - justify-content: space-between; - height: 70px; - z-index: 10; - position: fixed; - width: 100%; - top: 0; - left: 0; - font-weight: 600; - box-shadow: 0 0 4px #E2E2E2; - color: $font-primary-color; - - .logo_wrapper { - padding: 10px 20px; - z-index: 12; - - a { - display: flex; - align-items: center; - } - - img { - height: 60px; - object-fit: cover; - margin-right: 7px; - } - } - - .list_items_wrapper { - .ham { - display: none; // will be flex in when nav breakpoint and less - cursor: pointer; - transition: transform 400ms; - z-index: 12; - - .line { - fill: none; - transition: stroke-dasharray 400ms, stroke-dashoffset 400ms; - stroke: #000; - stroke-width: 5.5; - stroke-linecap: round; - } - - .top { - stroke-dasharray: 40 121; - } - - .bottom { - stroke-dasharray: 40 121; - } - - &.active { - transform: rotate(45deg); - z-index: 12; - - .top { - stroke-dashoffset: -68px; - } - - .bottom { - stroke-dashoffset: -68px; - } - } - - &:hover { - .line { - stroke: $acm-primary; - } - } - } - - .nav_items { - align-items: center; - display: flex; - list-style: none; - margin: 0; - padding: 0; - - li { - padding: 0 20px; - font-size: 14px; - - .nav_link { - font-weight: 600; - transition: 0.2s; - - &:hover { - color: $acm-primary; - } - } - - .active_nav_link { - color: $acm-primary; - } - - button { - background: none; - border: none; - color: $acm-primary; - font-weight: 700; - cursor: pointer; - outline: none; - transition: 0.5s; - - &:hover { - color: black; - transition: all 0.5s; - } - } - } - } - - @media screen and (max-width: $navbar-breakpoint) { - .ham { - display: flex; - } - - .menu_modal { - background: rgba(255, 255, 255, 0.95); - height: 100vh; - left: 50vw; - overflow-y: scroll; - position: absolute; - top: 50vh; - transform: translate(-50%, -150%); - transition: transform 0.35s cubic-bezier(0.05, 1.04, 0.72, 0.98); - width: 100vw; - z-index: 11; - - .nav_items { - display: none; - font-size: 1.8em; - font-weight: 600; - left: 50vw; - margin: 10px 0; - position: absolute; - top: 50vh; - transform: translate(-50%, -50%); - - li { - margin: 5px 0; - } - - button { - font-size: 2rem; - margin: 10px 0; - } - - &.active { - align-items: center; - flex-direction: column; - display: flex; - } - } - - &.active { - transform: translate(-50%, calc(-50% + 70px)); - transition: transform 0.35s cubic-bezier(0.05, 1.04, 0.72, 0.98); - } - } - } - } + background: white; + padding: 10px 100px 10px 40px; + display: flex; + align-items: center; + justify-content: space-between; + height: 70px; + + font-weight: 600; + box-shadow: 0 0 4px #E2E2E2; + color: $font-primary-color; + + .logo_wrapper { + padding: 10px 20px; + z-index: 12; + + a { + display: flex; + align-items: center; + } + + img { + height: 60px; + object-fit: cover; + margin-right: 7px; + } + } + + .list_items_wrapper { + .ham { + display: none; // will be flex in when nav breakpoint and less + cursor: pointer; + transition: transform 400ms; + z-index: 12; + + .line { + fill: none; + transition: stroke-dasharray 400ms, stroke-dashoffset 400ms; + stroke: #000; + stroke-width: 5.5; + stroke-linecap: round; + } + + .top { + stroke-dasharray: 40 121; + } + + .bottom { + stroke-dasharray: 40 121; + } + + &.active { + transform: rotate(45deg); + z-index: 12; + + .top { + stroke-dashoffset: -68px; + } + + .bottom { + stroke-dashoffset: -68px; + } + } + + &:hover { + .line { + stroke: $acm-primary; + } + } + } + + .nav_items { + align-items: center; + display: flex; + list-style: none; + margin: 0; + padding: 0; + + li { + padding: 0 20px; + font-size: 14px; + + .nav_link { + font-weight: 600; + transition: 0.2s; + + &:hover { + color: $acm-primary; + } + } + + .active_nav_link { + color: $acm-primary; + } + + button { + background: none; + border: none; + color: $acm-primary; + font-weight: 700; + cursor: pointer; + outline: none; + transition: 0.5s; + + &:hover { + color: black; + transition: all 0.5s; + } + } + } + } + + @media screen and (max-width: $navbar-breakpoint) { + .ham { + display: flex; + } + + .menu_modal { + background: rgba(255, 255, 255, 0.95); + height: 100vh; + left: 50vw; + overflow-y: scroll; + position: absolute; + top: 50vh; + transform: translate(-50%, -150%); + transition: transform 0.35s cubic-bezier(0.05, 1.04, 0.72, 0.98); + width: 100vw; + z-index: 11; + + .nav_items { + display: none; + font-size: 1.8em; + font-weight: 600; + left: 50vw; + margin: 10px 0; + position: absolute; + top: 50vh; + transform: translate(-50%, -50%); + + li { + margin: 5px 0; + } + + button { + font-size: 2rem; + margin: 10px 0; + } + + &.active { + align-items: center; + flex-direction: column; + display: flex; + } + } + + &.active { + transform: translate(-50%, calc(-50% + 70px)); + transition: transform 0.35s cubic-bezier(0.05, 1.04, 0.72, 0.98); + } + } + } + } } @media screen and (max-width: $navbar-breakpoint) { - .navbar { - padding: 10px 20px; - } + .navbar { + padding: 10px 20px; + } - .nav_link { - font-size: 2rem; - } + .nav_link { + font-size: 2rem; + } }