✨ Add responsive Navbar

2022-05-15 18:26:01 +02:00
parent cda1af7ce4
commit ce142c4a60
7 changed files with 417 additions and 64 deletions
--- a/components/Navbar.js
+++ b/components/Navbar.js
@@ -0,0 +1,59 @@
+import styles from "../styles/Navbar.module.css";
+// Import Component
+import Image from "next/image";
+import Link from "next/link";
+// Import Images
+import LogoAgs from "../public/Logo_AGS.png";
+import { useState } from "react";
+
+const Header = () => {
+	const [MenuToggle, setMenuToggle] = useState(false);
+
+	return (
+		<navbar className={styles.Navbar}>
+			<div className={styles.container}>
+				{/* logo */}
+				<div className={styles.Logo}>
+					<Image
+						src={LogoAgs}
+						alt="Logo"
+						layout="responsive"
+						// blurDataURL="data:..." automatically provided
+						// placeholder="blur" // Optional blur-up while loading
+					/>
+				</div>
+				{/* Menu Toggle */}
+				<div
+					onClick={() => setMenuToggle(!MenuToggle)}
+					className={styles.MenuToggle + " " + (MenuToggle ? styles.MenuActive : "")}
+				>
+					<span></span>
+					<span></span>
+					<span></span>
+				</div>
+			</div>
+			{/* Nav */}
+			<nav className={styles.Nav + " " + (MenuToggle ? styles.MenuOpen : "")}>
+				<Link href="/">
+					<a>Start</a>
+				</Link>
+
+				<Link href="/unsere-leistungen">
+					<a>Unsere Leistungen</a>
+				</Link>
+
+				<Link href="/über-uns">
+					<a>Über uns</a>
+				</Link>
+
+				{/* <li>Unser Team</li> */}
+
+				<Link href="/Kontakt">
+					<a>Kontakt</a>
+				</Link>
+			</nav>
+		</navbar>
+	);
+};
+
+export default Header;
--- a/pages/404.js
+++ b/pages/404.js
@@ -0,0 +1,21 @@
+import Head from "next/head";
+import Header from "../components/Navbar";
+import styles from "../styles/Home.module.css";
+
+export default function Home() {
+	return (
+		<main
+			className={styles.main}
+			style={{
+				display: "flex",
+				justifyContent: "center",
+				alignItems: "center",
+			}}
+		>
+			<div style={{ padding: "2rem", boxShadow: "5px 5px 30px 5px rgba(0,0,0,0.5)" }}>
+				<h1>Error 404</h1>
+				<h3>Diese Seite ist nicht verfügbar</h3>
+			</div>
+		</main>
+	);
+}
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,7 +1,17 @@
-import '../styles/globals.css'
+import Navbar from "../components/Navbar";
+import "../styles/globals.css";
+import styles from "../styles/Home.module.css";

 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+	return (
+		<div {...pageProps} className={styles.container}>
+			{/* Navbar */}
+			<Navbar />
+			{/* main */}
+			<Component className={styles.main} />
+			{/* footer */}
+		</div>
+	);
 }

-export default MyApp
+export default MyApp;
--- a/styles/Home.module.css
+++ b/styles/Home.module.css
@@ -1,116 +1,116 @@
 .container {
-  padding: 0 2rem;
+	padding: 0 0rem;
 }

 .main {
-  min-height: 100vh;
-  padding: 4rem 0;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
+	min-height: 100vh;
+	padding: 4rem 0;
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
 }

 .footer {
-  display: flex;
-  flex: 1;
-  padding: 2rem 0;
-  border-top: 1px solid #eaeaea;
-  justify-content: center;
-  align-items: center;
+	display: flex;
+	flex: 1;
+	padding: 2rem 0;
+	border-top: 1px solid #eaeaea;
+	justify-content: center;
+	align-items: center;
 }

 .footer a {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-grow: 1;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-grow: 1;
 }

 .title a {
-  color: #0070f3;
-  text-decoration: none;
+	color: #0070f3;
+	text-decoration: none;
 }

 .title a:hover,
 .title a:focus,
 .title a:active {
-  text-decoration: underline;
+	text-decoration: underline;
 }

 .title {
-  margin: 0;
-  line-height: 1.15;
-  font-size: 4rem;
+	margin: 0;
+	line-height: 1.15;
+	font-size: 4rem;
 }

 .title,
 .description {
-  text-align: center;
+	text-align: center;
 }

 .description {
-  margin: 4rem 0;
-  line-height: 1.5;
-  font-size: 1.5rem;
+	margin: 4rem 0;
+	line-height: 1.5;
+	font-size: 1.5rem;
 }

 .code {
-  background: #fafafa;
-  border-radius: 5px;
-  padding: 0.75rem;
-  font-size: 1.1rem;
-  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
-    Bitstream Vera Sans Mono, Courier New, monospace;
+	background: #fafafa;
+	border-radius: 5px;
+	padding: 0.75rem;
+	font-size: 1.1rem;
+	font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
+		Bitstream Vera Sans Mono, Courier New, monospace;
 }

 .grid {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-  max-width: 800px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-wrap: wrap;
+	max-width: 800px;
 }

 .card {
-  margin: 1rem;
-  padding: 1.5rem;
-  text-align: left;
-  color: inherit;
-  text-decoration: none;
-  border: 1px solid #eaeaea;
-  border-radius: 10px;
-  transition: color 0.15s ease, border-color 0.15s ease;
-  max-width: 300px;
+	margin: 1rem;
+	padding: 1.5rem;
+	text-align: left;
+	color: inherit;
+	text-decoration: none;
+	border: 1px solid #eaeaea;
+	border-radius: 10px;
+	transition: color 0.15s ease, border-color 0.15s ease;
+	max-width: 300px;
 }

 .card:hover,
 .card:focus,
 .card:active {
-  color: #0070f3;
-  border-color: #0070f3;
+	color: #0070f3;
+	border-color: #0070f3;
 }

 .card h2 {
-  margin: 0 0 1rem 0;
-  font-size: 1.5rem;
+	margin: 0 0 1rem 0;
+	font-size: 1.5rem;
 }

 .card p {
-  margin: 0;
-  font-size: 1.25rem;
-  line-height: 1.5;
+	margin: 0;
+	font-size: 1.25rem;
+	line-height: 1.5;
 }

 .logo {
-  height: 1em;
-  margin-left: 0.5rem;
+	height: 1em;
+	margin-left: 0.5rem;
 }

@media (max-width: 600px) {
-  .grid {
-    width: 100%;
-    flex-direction: column;
-  }
+	.grid {
+		width: 100%;
+		flex-direction: column;
+	}
 }
--- a/styles/Navbar.module.css
+++ b/styles/Navbar.module.css
@@ -0,0 +1,147 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500&display=swap");
+.Navbar {
+  height: 100px;
+  width: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -ms-flex-pack: distribute;
+      justify-content: space-around;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  border-bottom: 1px solid #eaeaea;
+}
+
+.Navbar .container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -ms-flex-pack: distribute;
+      justify-content: space-around;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+}
+
+.Navbar .container .Logo {
+  width: 200px;
+  margin: 1rem;
+}
+
+.Navbar .container .MenuToggle {
+  -webkit-transition: all 0.5s;
+  transition: all 0.5s;
+}
+
+.Navbar .container .MenuToggle span {
+  display: block;
+  width: 33px;
+  height: 4px;
+  margin-bottom: 5px;
+  position: relative;
+  background: #cdcdcd;
+  border-radius: 3px;
+  z-index: 1;
+  -webkit-transform-origin: 4px 0px;
+          transform-origin: 4px 0px;
+  -webkit-transition: background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease, -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
+  transition: background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease, -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
+  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
+  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease, -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
+}
+
+.Navbar .container .MenuToggle span:first-child {
+  -webkit-transform-origin: 0% 0%;
+          transform-origin: 0% 0%;
+}
+
+.Navbar .container .MenuToggle span:nth-last-child(2) {
+  -webkit-transform-origin: 0% 100%;
+          transform-origin: 0% 100%;
+}
+
+.Navbar .container .MenuActive {
+  -webkit-transform: rotate(90deg);
+          transform: rotate(90deg);
+}
+
+.Navbar .Nav {
+  font-family: "Poppins", sans-serif;
+  font-size: 1.2rem;
+  font-weight: 600;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: distribute;
+      justify-content: space-around;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+}
+
+.Navbar .Nav a {
+  padding: 1rem;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+}
+
+.Navbar .Nav a:hover {
+  cursor: pointer;
+  color: #057ca6;
+}
+
+.Navbar .MenuOpen {
+  width: 100%;
+  display: -webkit-box !important;
+  display: -ms-flexbox !important;
+  display: flex !important;
+  position: absolute;
+  top: 100px;
+  background-color: #057ca6;
+  color: white;
+}
+
+@media (min-width: 768px) {
+  .container {
+    width: auto;
+  }
+  .container .MenuToggle {
+    display: none;
+  }
+}
+
+@media (max-width: 768px) {
+  .Navbar .Nav {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    display: none;
+  }
+  .Navbar {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+  }
+  .container {
+    width: 100%;
+  }
+  .container .MenuToggle {
+    display: block;
+  }
+}
+/*# sourceMappingURL=Navbar.module.css.map */
--- a/styles/Navbar.module.css.map
+++ b/styles/Navbar.module.css.map
@@ -0,0 +1,9 @@
+{
+    "version": 3,
+    "mappings": "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",
+    "sources": [
+        "Navbar.module.scss"
+    ],
+    "names": [],
+    "file": "Navbar.module.css"
+}
--- a/styles/Navbar.module.scss
+++ b/styles/Navbar.module.scss
@@ -0,0 +1,107 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500&display=swap");
+
+.Navbar {
+	height: 100px;
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: space-around;
+	flex-direction: row;
+	border-bottom: 1px solid #eaeaea;
+	.container {
+		display: flex;
+		align-items: center;
+		justify-content: space-around;
+		flex-direction: row;
+
+		.Logo {
+			width: 200px;
+			margin: 1rem;
+		}
+		.MenuToggle {
+			transition: all 0.5s;
+			span {
+				display: block;
+				width: 33px;
+				height: 4px;
+				margin-bottom: 5px;
+				position: relative;
+
+				background: #cdcdcd;
+				border-radius: 3px;
+
+				z-index: 1;
+
+				transform-origin: 4px 0px;
+
+				transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
+					background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
+			}
+
+			span:first-child {
+				transform-origin: 0% 0%;
+			}
+
+			span:nth-last-child(2) {
+				transform-origin: 0% 100%;
+			}
+		}
+
+		.MenuActive {
+			transform: rotate(90deg);
+		}
+	}
+
+	.Nav {
+		font-family: "Poppins", sans-serif;
+		font-size: 1.2rem;
+		font-weight: 600;
+
+		display: flex;
+		justify-content: space-around;
+		align-items: center;
+		flex-direction: row;
+		a {
+			padding: 1rem;
+			transition: all 0.2s;
+			&:hover {
+				cursor: pointer;
+				color: #057ca6;
+			}
+		}
+	}
+	.MenuOpen {
+		width: 100%;
+		display: flex !important;
+		position: absolute;
+		top: 100px;
+		background-color: #057ca6;
+		color: white;
+	}
+}
+
+//Normal devices
+@media (min-width: 768px) {
+	.container {
+		width: auto;
+		.MenuToggle {
+			display: none;
+		}
+	}
+}
+//Small devices
+@media (max-width: 768px) {
+	.Navbar .Nav {
+		flex-direction: column;
+		display: none;
+	}
+	.Navbar {
+		flex-direction: column;
+	}
+	.container {
+		width: 100%;
+		.MenuToggle {
+			display: block;
+		}
+	}
+}