From ce142c4a60780b576cebd411569016badb8b5d7b Mon Sep 17 00:00:00 2001 From: stefan080106 Date: Sun, 15 May 2022 18:26:01 +0200 Subject: [PATCH] :sparkles: Add responsive Navbar --- components/Navbar.js | 59 ++++++++++++++ pages/404.js | 21 +++++ pages/_app.js | 16 +++- styles/Home.module.css | 122 ++++++++++++++--------------- styles/Navbar.module.css | 147 +++++++++++++++++++++++++++++++++++ styles/Navbar.module.css.map | 9 +++ styles/Navbar.module.scss | 107 +++++++++++++++++++++++++ 7 files changed, 417 insertions(+), 64 deletions(-) create mode 100644 components/Navbar.js create mode 100644 pages/404.js create mode 100644 styles/Navbar.module.css create mode 100644 styles/Navbar.module.css.map create mode 100644 styles/Navbar.module.scss diff --git a/components/Navbar.js b/components/Navbar.js new file mode 100644 index 0000000..c52aa1a --- /dev/null +++ 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 ( + +
+ {/* logo */} +
+ Logo +
+ {/* Menu Toggle */} +
setMenuToggle(!MenuToggle)} + className={styles.MenuToggle + " " + (MenuToggle ? styles.MenuActive : "")} + > + + + +
+
+ {/* Nav */} + + + ); +}; + +export default Header; diff --git a/pages/404.js b/pages/404.js new file mode 100644 index 0000000..c4aa71d --- /dev/null +++ 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 ( +
+
+

Error 404

+

Diese Seite ist nicht verfügbar

+
+
+ ); +} diff --git a/pages/_app.js b/pages/_app.js index 1e1cec9..558adcb 100644 --- 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 + return ( +
+ {/* Navbar */} + + {/* main */} + + {/* footer */} +
+ ); } -export default MyApp +export default MyApp; diff --git a/styles/Home.module.css b/styles/Home.module.css index 32a57d5..36b8532 100644 --- 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; + } } diff --git a/styles/Navbar.module.css b/styles/Navbar.module.css new file mode 100644 index 0000000..d6a307e --- /dev/null +++ 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 */ \ No newline at end of file diff --git a/styles/Navbar.module.css.map b/styles/Navbar.module.css.map new file mode 100644 index 0000000..19a994f --- /dev/null +++ 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" +} \ No newline at end of file diff --git a/styles/Navbar.module.scss b/styles/Navbar.module.scss new file mode 100644 index 0000000..49f63e4 --- /dev/null +++ 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; + } + } +}