feat: completed navigation menu

meraki-iiitu · Sep 6, 2023 · 82f2ed0 · 82f2ed0
1 parent edc6831
commit 82f2ed0
Show file tree

Hide file tree

Showing 7 changed files with 255 additions and 11 deletions.
diff --git a/components/Navigation/index.tsx b/components/Navigation/index.tsx
@@ -0,0 +1,92 @@
+import React, { useEffect, useState } from "react";
+import { stylesConfig } from "@/utils/functions";
+import styles from "./styles.module.scss";
+import navLinks from "@/constants/navigation";
+import Link from "next/link";
+
+interface NavigationProps extends React.HTMLAttributes<HTMLElement> {
+	theme?: "light" | "dark";
+}
+
+const classes = stylesConfig(styles, "navigation");
+
+const Navigation: React.FC<NavigationProps> = ({ theme = "light" }) => {
+	const [isOpen, setIsOpen] = useState(false);
+	const [isClosing, setIsClosing] = useState(false);
+
+	const midIndex = Math.floor(navLinks.length / 2) + 1;
+
+	useEffect(() => {
+		const handleKeyDown = (e: KeyboardEvent) => {
+			if (e.key === "Escape") {
+				setIsClosing(true);
+				setTimeout(() => {
+					setIsOpen(false);
+					setIsClosing(false);
+				}, 250);
+			}
+		};
+
+		if (isOpen) document.addEventListener("keydown", handleKeyDown);
+		else document.removeEventListener("keydown", handleKeyDown);
+
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [isOpen]);
+
+	return (
+		<>
+			<button
+				className={classes("-btn", `-btn-${theme}`, {
+					"-btn--open": isOpen,
+				})}
+				onClick={() => {
+					if (isOpen) {
+						setIsClosing(true);
+						setTimeout(() => {
+							setIsOpen(false);
+							setIsClosing(false);
+						}, 250);
+					} else setIsOpen(true);
+				}}
+			>
+				<span />
+			</button>
+			{isOpen ? (
+				<nav
+					className={classes("-nav", `-nav-${theme}`, {
+						"-nav--closing": isClosing,
+					})}
+				>
+					<div className={classes("-nav-left")}>
+						{navLinks.slice(0, midIndex).map((link, index) => (
+							<Link
+								href={link.path}
+								className={classes("-link")}
+								key={index}
+								data-index={`0${index + 1}`}
+							>
+								{link.label}
+							</Link>
+						))}
+					</div>
+					<div className={classes("-nav-right")}>
+						{navLinks
+							.slice(midIndex, navLinks.length)
+							.map((link, index) => (
+								<Link
+									href={link.path}
+									className={classes("-link")}
+									key={index}
+									data-index={`0${index + midIndex + 1}`}
+								>
+									{link.label}
+								</Link>
+							))}
+					</div>
+				</nav>
+			) : null}
+		</>
+	);
+};
+
+export default Navigation;
diff --git a/components/Navigation/styles.module.scss b/components/Navigation/styles.module.scss
@@ -0,0 +1,148 @@
+@import "@/styles/config/mixins";
+@import "@/styles/config/animations";
+
+.navigation {
+	&-btn {
+		@include init-button;
+		position: fixed;
+		top: 56px;
+		right: 56px;
+		z-index: 100;
+		width: 48px;
+		height: 48px;
+
+		span {
+			width: 48px;
+			height: 1px;
+			background-color: var(--color-white);
+			position: relative;
+
+			&::before,
+			&::after {
+				content: "";
+				position: absolute;
+				left: 0;
+				width: 100%;
+				height: 1px;
+				background-color: var(--color-white);
+			}
+
+			&::before {
+				transform: translateY(-12px);
+			}
+
+			&::after {
+				transform: translateY(12px);
+			}
+		}
+
+		&--open {
+			span {
+				background-color: transparent;
+
+				&::before {
+					transform: translateY(0.5px) rotate(45deg);
+				}
+
+				&::after {
+					transform: translateY(-0.5px) rotate(-45deg);
+				}
+			}
+		}
+	}
+
+	&-nav {
+		width: 100%;
+		height: 100vh;
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 99;
+		background-color: var(--theme-indigo);
+		transition: transform 0.3s ease-in-out;
+		display: flex;
+		justify-content: flex-start;
+		align-items: center;
+		padding: 96px;
+		animation: fade-bottom-in 0.4s ease-in-out;
+
+		@include responsive(phone) {
+			padding: 48px;
+			flex-direction: column;
+			gap: 16px;
+			justify-content: center;
+		}
+
+		&-left,
+		&-right {
+			width: 50%;
+			height: 100%;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			flex-direction: column;
+			gap: 16px;
+			padding: 0 5%;
+
+			@include responsive(phone) {
+				width: 100%;
+				height: auto;
+				padding: 0 32px;
+				justify-content: center;
+			}
+
+			a {
+				width: 100%;
+				@include font(
+					var(--font-red-hat-display),
+					36px,
+					400,
+					150%,
+					var(--color-white)
+				);
+				text-decoration: none;
+				position: relative;
+
+				&::before {
+					content: attr(data-index);
+					position: absolute;
+					left: -80px;
+					top: 50%;
+					transform: translateY(-50%) rotate(-90deg);
+					font-size: 16px;
+					color: var(--color-white);
+
+					@include responsive(phone) {
+						left: -40px;
+					}
+				}
+
+				&::after {
+					content: "";
+					position: absolute;
+					bottom: -4px;
+					left: 0;
+					width: 0;
+					height: 1px;
+					background-color: var(--theme-navy);
+				}
+
+				&:hover,
+				&:focus,
+				&:active {
+					border: none;
+					outline: none;
+					color: var(--theme-navy);
+
+					&::after {
+						width: 70%;
+					}
+				}
+			}
+		}
+
+		&--closing {
+			animation: fade-bottom-out 0.4s ease-in-out;
+		}
+	}
+}
diff --git a/pages/events/[...slug].tsx b/pages/events/[...slug].tsx
@@ -10,6 +10,7 @@ import useStore from "@/hooks/store";
 import { getEvent } from "@/utils/api/events";
 import { stylesConfig } from "@/utils/functions";
 import styles from "@/styles/pages/Event.module.scss";
+import Navigation from "@/components/Navigation";
 
 interface EventPageProps {
 	event: IEvent;
@@ -25,6 +26,7 @@ const EventPage: React.FC<EventPageProps> = ({ event }) => {
 	if (!event) return null;
 	return (
 		<>
+			<Navigation />
 			<main className={classes("")}>
 				<Image
 					src={event.image}

diff --git a/styles/config/_colors.scss b/styles/config/_colors.scss
@@ -102,7 +102,8 @@ $colors: "blue", "red", "yellow", "green", "white", "black", "purple", "indigo",
 	--theme-green: #7ee787;
 	--theme-red: #ffa28b;
 	--theme-blue: #939aff;
-	--theme-indigo: #3d54d6;
+	--theme-navy: #3d54d6;
+	--theme-indigo: #111018;
 	--theme-yellow: #edcf63;
 	--theme-grey: #7d8590;
 	--theme-light-grey: #c4c4c4;

diff --git a/styles/config/_variables.scss b/styles/config/_variables.scss
@@ -23,7 +23,8 @@ $theme-purple: #7e48c9;
 $theme-green: #7ee787;
 $theme-red: #ffa28b;
 $theme-blue: #939aff;
-$theme-indigo: #3d54d6;
+$theme-navy: #3d54d6;
+$theme-indigo: #111018;
 $theme-yellow: #edcf63;
 $theme-grey: #7d8590;
 $theme-light-grey: #c4c4c4;

diff --git a/styles/pages/Event.module.scss b/styles/pages/Event.module.scss
@@ -108,7 +108,7 @@
 	&-btn {
 		gap: 4px;
 		padding: 10px 24px;
-		background-color: rgba($theme-indigo, 0.4);
+		background-color: rgba($theme-navy, 0.4);
 		@include font(
 			var(--font-red-hat-display),
 			16px,
@@ -141,33 +141,33 @@
 		}
 
 		&--filled:hover {
-			background-color: darken($color: $theme-indigo, $amount: 10%);
+			background-color: darken($color: $theme-navy, $amount: 10%);
 		}
 
 		&--filled:active {
-			background-color: darken($color: $theme-indigo, $amount: 20%);
+			background-color: darken($color: $theme-navy, $amount: 20%);
 		}
 
 		&--filled:disabled {
-			background-color: lighten($color: $theme-indigo, $amount: 20%);
+			background-color: lighten($color: $theme-navy, $amount: 20%);
 		}
 
 		&--outlined {
-			background-color: rgba($theme-indigo, 0.2);
+			background-color: rgba($theme-navy, 0.2);
 			color: var(--theme-white);
 			border: 1px solid var(--theme-indigo);
 		}
 
 		&--outlined:hover {
-			background-color: rgba($theme-indigo, 0.3);
+			background-color: rgba($theme-navy, 0.3);
 		}
 
 		&--outlined:active {
-			background-color: rgba($theme-indigo, 0.4);
+			background-color: rgba($theme-navy, 0.4);
 		}
 
 		&--outlined:disabled {
-			background-color: rgba($theme-indigo, 0.2);
+			background-color: rgba($theme-navy, 0.2);
 			color: var(--theme-white);
 			border-color: var(--theme-indigo);
 		}

diff --git a/styles/pages/Home.module.scss b/styles/pages/Home.module.scss
@@ -7,7 +7,7 @@
 	align-items: center;
 	flex-flow: column;
 	--frame-size: 125px;
-	--bg: #111018;
+	--bg: var(--theme-indigo);
 	background-color: var(--bg);
 	position: relative;
 	background-image: url("/vectors/mesh.svg");