css naar tsx :tada:

1 files changed, 39 insertions, 10 deletions

diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index 38f3810..45818b3 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -1,4 +1,4 @@
-import "../css/navbar.css";
+import {CSSProperties} from "react";
 
 import { LogoDark } from "../components/logo";
 
@@ -9,17 +9,46 @@ import SearchIcon from '@material-ui/icons/Search';
 import SettingsIcon from '@material-ui/icons/Settings';
 
 
+var NavBarStyle: CSSProperties = {
+	width: 48,
+	height: "100%",
+
+	lineHeight: 0,
+
+	backgroundColor: "var(--background)",
+	display: "inline-block",
+
+	position: "fixed",
+	top: 0,
+	left: 0,
+
+	overflow: "hidden",
+	whiteSpace: "nowrap",
+}
+
+var NavBarItemStyle: CSSProperties = {
+	margin: 12,
+	marginBottom: 16,
+	display: "block"
+}
+
+var NavBarSettingsAreaStyle: CSSProperties = {
+	position: "absolute",
+	bottom: -4,
+	left: 0
+}
+
 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 className="navbar" style={NavBarStyle}>
+			<div style={NavBarItemStyle}><LogoDark/></div>
+			<a href="/" style={NavBarItemStyle}><Home/></a>
+			<a href="/" style={NavBarItemStyle}><VideogameAssetIcon/></a>
+			<a href="/" style={NavBarItemStyle}><ExtensionIcon/></a>
+			<a href="/" style={NavBarItemStyle}><SearchIcon/></a>
+
+			<div style={NavBarSettingsAreaStyle}>
+				<a href="/" style={NavBarItemStyle}><SettingsIcon/></a>
 			</div>
 		</div>
 	);