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 ++++++++++++++++++++++++++++
 2 files changed, 56 insertions(+)
 create mode 100644 src/components/logo.tsx
 create mode 100644 src/components/navbar.tsx

(limited to 'src/components')

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;
-- 
cgit v1.2.3