From d2c2cc62a4c2e1ac10f8434bea7bb834da820869 Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Sat, 16 Jan 2021 11:40:36 +0100
Subject: semi working next project

---
 components/navbar.tsx | 63 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 components/navbar.tsx

(limited to 'components/navbar.tsx')

diff --git a/components/navbar.tsx b/components/navbar.tsx
new file mode 100644
index 0000000..7725ca8
--- /dev/null
+++ b/components/navbar.tsx
@@ -0,0 +1,63 @@
+import { CSSProperties } from "react";
+
+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';
+import PersonIcon from '@material-ui/icons/Person';
+
+var NavBarItemStyle: CSSProperties = {
+	margin: 12,
+	marginBottom: 16,
+	display: "block"
+}
+
+export function NavBar() {
+	return (
+		<div className="navbar" style={{
+			width: 48,
+			height: "100%",
+
+			lineHeight: 0,
+
+			backgroundColor: "var(--background)",
+			display: "inline-block",
+
+			position: "fixed",
+			top: 0,
+			left: 0,
+
+			overflow: "hidden",
+			whiteSpace: "nowrap"
+		}}>
+			<div style={NavBarItemStyle}><LogoDark/></div>
+			<a href="/" style={NavBarItemStyle}><Home/></a>
+			<a href="/game" style={NavBarItemStyle}><VideogameAssetIcon/></a>
+			<a href="/" style={NavBarItemStyle}><ExtensionIcon/></a>
+			<a href="/" style={NavBarItemStyle}><SearchIcon/></a>
+
+			<div style={{
+				position: "absolute",
+				bottom: -4,
+				left: 0,
+				backgroundColor: "var(--background)"
+			}}>
+			<a href="/login" style={NavBarItemStyle}>
+				<div style={{
+					width: 24,
+					height: 24,
+					/* background: "#888888", */
+					borderRadius: 12
+				}}>
+					<PersonIcon/>
+				</div>
+			</a>
+				<a href="/settings" style={NavBarItemStyle}><SettingsIcon/></a>
+			</div>
+		</div>
+	);
+}
+
-- 
cgit v1.2.3