2 files changed, 56 insertions, 0 deletions
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;