navbar component + layout variables

4 files changed, 41 insertions, 28 deletions

diff --git a/components/navbar.tsx b/components/navbar.tsx
new file mode 100644
index 0000000..bdadfbc
--- /dev/null
+++ b/components/navbar.tsx
@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+
+import HomeRoundedIcon from '@material-ui/icons/HomeRounded';
+import SearchRoundedIcon from '@material-ui/icons/SearchRounded';
+
+function NavbarItem(props: {
+	icon?: ReactNode;
+	title: string;
+	href: string;
+	active: boolean;
+}) {
+	return <a href={props.href} className={ "navbarItem" + (props.active ? " active" : "") }>
+		<div>
+			{props.icon}
+			<span>{props.title}</span>
+		</div>
+	</a>
+}
+
+export default function Navbar(props: {
+	page?: string;
+}) {
+	return <div>
+		<NavbarItem active={props.page == "home"} icon={<HomeRoundedIcon/>} title="Home" href="/"/>
+		<NavbarItem active={props.page == "search"} icon={<SearchRoundedIcon/>} title="Search for posts" href="/search"/>
+	</div>
+}
diff --git a/components/navbarItem.tsx b/components/navbarItem.tsx
deleted file mode 100644
index b724444..0000000
--- a/components/navbarItem.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { ReactNode } from 'react';
-
-export default function NavbarItem(props: {
-	icon?: ReactNode;
-	title: string;
-	href: string;
-}) {
-	return <a href={props.href} className="navbarItem">
-		<div>
-			{props.icon}
-			<span>{props.title}</span>
-		</div>
-	</a>
-}
diff --git a/pages/index.tsx b/pages/index.tsx
index 1d9f474..6450fd8 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,8 +1,5 @@
 import Seperator from '../components/articleSeperator';
-import NavbarItem from '../components/navbarItem';
-
-import HomeRoundedIcon from '@material-ui/icons/HomeRounded';
-import SearchRoundedIcon from '@material-ui/icons/SearchRounded';
+import Navbar from '../components/navbar';
 
 export default function Home() {
 	return <div>
@@ -12,10 +9,7 @@ export default function Home() {
 				<p className="subtile">Loek heeft dit geschreven</p>
 			</div>
 			<div className="navAreaWrapper">
-				<div className="sticky">
-					<NavbarItem icon={<HomeRoundedIcon/>} title="Home" href="/"/>
-					<NavbarItem icon={<SearchRoundedIcon/>} title="Search for posts" href="/search"/>
-				</div>
+				<div className="sticky"><Navbar page="home"/></div>
 			</div>
 			<div className="contentWrapper">
 				<p>
diff --git a/styles/layout.css b/styles/layout.css
index e223b11..c739d13 100644
--- a/styles/layout.css
+++ b/styles/layout.css
@@ -1,12 +1,18 @@
+:root {
+	--nav-width: 200px;
+	--page-width: 700px;
+	--page-margins: 24px;
+}
+
 .centeredPage {
-	max-width: calc(700px + 24px + 200px);
+	max-width: calc(var(--nav-width) + var(--page-width) + var(--page-margins));
 	margin: 0 auto;
 	margin-top: 96px;
-	padding: 0 24px;
+	padding: 0 var(--page-margins);
 
 	display: grid;
-	gap: 24px;
-	grid-template-columns: 200px 1fr;
+	gap: var(--page-margins);
+	grid-template-columns: var(--nav-width) 1fr;
 	grid-auto-rows: auto;
 }
 
@@ -22,7 +28,7 @@
 }
 .navAreaWrapper > .sticky {
 	position: sticky;
-	top: 24px;
+	top: var(--page-margins);
 }
 
 .contentWrapper {
@@ -31,7 +37,7 @@
 }
 .contentWrapper > * {
 	margin: 0;
-	margin-bottom: 24px;
+	margin-bottom: var(--page-margins);
 }
 
 .contentWrapper p {