From a6ac9b766574877285d413494ff19670cc8bfa61 Mon Sep 17 00:00:00 2001
From: jakubmanczak <jakub@manczak.net>
Date: Mon, 8 Aug 2022 15:07:30 +0200
Subject: [PATCH] add a navpusher to fix nav's overlapping issues

due to the "sticky" nature of the navigation bar used in the site content would get pushed under it and hidden
another element with the height of the navbar has been added that now fixed this issue
---
 components/Header.js | 39 ++++++++++++++++++++++++---------------
 styles/globals.scss  |  3 +++
 2 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/components/Header.js b/components/Header.js
index 39c918e..0b4237d 100644
--- a/components/Header.js
+++ b/components/Header.js
@@ -3,20 +3,29 @@ import { GractwoLogo } from "./GractwoLogo";
 
 export default function Home() {
 	return (
-		<nav className="main">
-			<GractwoLogo className="logo" />
-			<Link href="/">
-				<a>Główna</a>
-			</Link>
-			<Link href="">
-				<a>Rankingi</a>
-			</Link>
-			<Link href="/o-gractwie">
-				<a>O Gractwie</a>
-			</Link>
-			<Link href="">
-				<a>Zaloguj się</a>
-			</Link>
-		</nav>
+		<>
+			<nav className="main">
+				<GractwoLogo className="logo" />
+				<Link href="/">
+					<a>Główna</a>
+				</Link>
+				<Link href="">
+					<a>Rankingi</a>
+				</Link>
+				<Link href="/o-gractwie">
+					<a>O Gractwie</a>
+				</Link>
+				<Link href="">
+					<a>Zaloguj się</a>
+				</Link>
+			</nav>
+			<p className="navpusher">
+				I&apos;m coming after you.
+				{/* 
+							This is rendered behind the navbar, pushing the main page's
+							content downwards while keeping nav's fixed position.
+				*/}
+			</p>
+		</>
 	);
 }
diff --git a/styles/globals.scss b/styles/globals.scss
index 747a051..2fafe2e 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -18,6 +18,9 @@ body {
 	scrollbar-width: none; /* Firefox */
 }
 
+.navpusher {
+	height: 4rem;
+}
 nav.main {
 	z-index: 1;
 	height: 4rem;