From 263bdd5b7d9f1ffcc8b74363ccc429fb6fd6c844 Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Tue, 5 Jan 2021 09:24:39 +0100
Subject: css naar tsx :tada:

---
 src/components/navbar.tsx | 49 +++++++++++++++++++++++++++++++++++++----------
 src/css/navbar.css        | 35 ---------------------------------
 2 files changed, 39 insertions(+), 45 deletions(-)
 delete mode 100644 src/css/navbar.css

(limited to 'src')

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>
 	);
diff --git a/src/css/navbar.css b/src/css/navbar.css
deleted file mode 100644
index 585a9c2..0000000
--- a/src/css/navbar.css
+++ /dev/null
@@ -1,35 +0,0 @@
-.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;
-}
-
-- 
cgit v1.2.3