From 2425a8b9cf0ffc3ed581c9fea2a63151acbac68e Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Mon, 4 Jan 2021 21:55:13 +0100
Subject: beginsels van een werkende pagina

---
 src/components/logo.tsx   | 28 ++++++++++++++++++++++++++++
 src/components/navbar.tsx | 28 ++++++++++++++++++++++++++++
 src/css/color.css         |  6 +++---
 src/css/link.css          |  3 +++
 src/css/navbar.css        | 35 +++++++++++++++++++++++++++++++++++
 src/css/nomargin.css      |  5 +++++
 src/index.tsx             |  2 +-
 src/pages/home.jsx        | 13 ++++++++-----
 src/routes.tsx            | 13 +++++++------
 9 files changed, 118 insertions(+), 15 deletions(-)
 create mode 100644 src/components/logo.tsx
 create mode 100644 src/components/navbar.tsx
 create mode 100644 src/css/link.css
 create mode 100644 src/css/navbar.css

(limited to 'src')

diff --git a/src/components/logo.tsx b/src/components/logo.tsx
new file mode 100644
index 0000000..1d1f3c6
--- /dev/null
+++ b/src/components/logo.tsx
@@ -0,0 +1,28 @@
+export function LogoDark() {
+	return (
+		<div className="noclick">
+			<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+				<rect width="24" height="24" fill="var(--background)"/>
+				<circle cx="6.5" cy="6.5" r="4.5" fill="var(--disk-b)"/>
+				<circle cx="6.5" cy="17.5" r="4.5" fill="var(--disk-a)"/>
+				<circle cx="17.5" cy="17.5" r="4.5" fill="var(--disk-b)"/>
+				<circle cx="17.5" cy="6.5" r="3.5" stroke="var(--text)" stroke-width="2"/>
+			</svg>
+		</div>
+	);
+}
+
+export function LogoLight() {
+	return (
+		<div className="noclick">
+			<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+				<rect width="24" height="24" fill="var(--page-background)"/>
+				<circle cx="6.5" cy="6.5" r="4.5" fill="var(--disk-b)"/>
+				<circle cx="6.5" cy="17.5" r="4.5" fill="var(--disk-a)"/>
+				<circle cx="17.5" cy="17.5" r="4.5" fill="var(--disk-b)"/>
+				<circle cx="17.5" cy="6.5" r="3.5" stroke="var(--background)" stroke-width="2"/>
+			</svg>
+		</div>
+	);
+}
+
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
new file mode 100644
index 0000000..38f3810
--- /dev/null
+++ b/src/components/navbar.tsx
@@ -0,0 +1,28 @@
+import "../css/navbar.css";
+
+import { LogoDark } from "../components/logo";
+
+import Home from '@material-ui/icons/Home';
+import VideogameAssetIcon from '@material-ui/icons/VideogameAsset';
+import ExtensionIcon from '@material-ui/icons/Extension';
+import SearchIcon from '@material-ui/icons/Search';
+import SettingsIcon from '@material-ui/icons/Settings';
+
+
+function NavBar() {
+	return (
+		<div className="navbar">
+			<LogoDark/>
+			<a href="/"><Home/></a>
+			<a href="/"><VideogameAssetIcon/></a>
+			<a href="/"><ExtensionIcon/></a>
+			<a href="/"><SearchIcon/></a>
+
+			<div className="settings">
+				<a href="/"><SettingsIcon/></a>
+			</div>
+		</div>
+	);
+}
+
+export default NavBar;
diff --git a/src/css/color.css b/src/css/color.css
index 955b0c3..2cbb7a0 100644
--- a/src/css/color.css
+++ b/src/css/color.css
@@ -1,8 +1,8 @@
 :root {
-	--text-color: #FCFFFD;
-	--page-background-color: #FCFFFD;
+	--text: #FCFFFD;
+	--page-background: #FCFFFD;
 
-	--background-color: #5D737E;
+	--background: #5D737E;
 	--background-alt: #81949E;
 
 	--disk-a: #E16D82;
diff --git a/src/css/link.css b/src/css/link.css
new file mode 100644
index 0000000..3887caf
--- /dev/null
+++ b/src/css/link.css
@@ -0,0 +1,3 @@
+a {
+	color: var(--text);
+}
diff --git a/src/css/navbar.css b/src/css/navbar.css
new file mode 100644
index 0000000..585a9c2
--- /dev/null
+++ b/src/css/navbar.css
@@ -0,0 +1,35 @@
+.navbar {
+	width: 48px;
+	height: 100%;
+
+	line-height: 0;
+
+	background-color: var(--background);
+	display: inline-block;
+
+	position: fixed;
+	top: 0;
+	left: 0;
+
+	overflow: hidden;
+	white-space: nowrap;
+}
+
+.navbar .noclick,
+.navbar a {
+	margin: 12px;
+	margin-bottom: 16px;
+	display: block;
+}
+
+.navbar .noclick:last-child,
+.navbar a:last-child {
+	margin-bottom: 12px;
+}
+
+.navbar .settings {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+}
+
diff --git a/src/css/nomargin.css b/src/css/nomargin.css
index 7ec0149..74771c6 100644
--- a/src/css/nomargin.css
+++ b/src/css/nomargin.css
@@ -2,3 +2,8 @@ html, body {
 	margin: 0;
 	padding: 0;
 }
+
+body {
+	padding-left: 48px;
+	background-color: var(--page-background);
+}
diff --git a/src/index.tsx b/src/index.tsx
index 21ae21a..5ca3ea1 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -4,7 +4,7 @@ import Router from "./routes";
 
 ReactDOM.render(
 	<BrowserRouter>
-		<Router />
+		<Router/>
 	</BrowserRouter>,
 	document.getElementById('root')
 );
diff --git a/src/pages/home.jsx b/src/pages/home.jsx
index ac864c3..b9d7926 100644
--- a/src/pages/home.jsx
+++ b/src/pages/home.jsx
@@ -1,9 +1,12 @@
-function home() {
+import NavBar from '../components/navbar';
+
+function HomePage() {
 	return (
-		<body>
-			<div>banaan</div>
-		</body>
+		<div>
+			<NavBar />
+			<div>Zalige content op deze pagina yo</div>
+		</div>
 	);
 }
 
-export default home;
+export default HomePage;
diff --git a/src/routes.tsx b/src/routes.tsx
index af129c7..2a1f452 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -1,14 +1,15 @@
 import { Switch, Route } from 'react-router-dom';
+
 import './css/nomargin.css';
+import './css/color.css';
+import './css/link.css';
 
-import home from './pages/home';
+import HomePage from './pages/home';
 
 function Router() {
-	return (
-		<Switch>
-			<Route exact path='/' component={home}/>
-		</Switch>
-	);
+	return <Switch>
+		<Route exact path='/' component={HomePage}/>
+	</Switch>;
 }
 
 export default Router;
-- 
cgit v1.2.3