rendered a simple non-functional menu/navbar

11 files changed, 144 insertions, 21 deletions

diff --git a/src/components/App.js b/src/components/App.js
index 666667b..2808a4b 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,10 +1,10 @@
 import React from "react";
+import Header from "./Header/Header";
 
 const App = () => {
-	const txt = "sldjflksjdfljsd";
 	return (
-		<p>{txt}</p>
+		<Header />
 	)
 }
 
-export default App
+export default App;
diff --git a/src/components/Header.js b/src/components/Header.js
deleted file mode 100644
index ecc2b42..0000000
--- a/src/components/Header.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from "react";
-// import React, { useState } from "react";
-
-const App = () => {
-	// const [activeLink, updateActiveLink] = useState("home")
-	return (
-		<div>
-			
-		</div>
-	)
-}
-
-export default App
diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css
new file mode 100644
index 0000000..6d146f6
--- /dev/null
+++ b/src/components/Header/Header.css
@@ -0,0 +1,35 @@
+@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap");
+/* Experimental color scheme */
+.header {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  margin: none;
+  padding: none;
+  width: 100%;
+  height: 5rem;
+  background-color: lightgray;
+  box-shadow: 2px 0px 4px #232627; }
+
+.header div {
+  margin: auto 1rem; }
+
+nav a {
+  text-decoration: none;
+  padding: 0.3rem;
+  color: brown; }
+
+.placeholder {
+  width: 5rem;
+  height: 3rem; }
+
+.inlineBlock {
+  display: inline-block; }
+
+p, h1, h2, h3, h4, h5, h6 {
+  color: #000000; }
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
new file mode 100644
index 0000000..d401a30
--- /dev/null
+++ b/src/components/Header/Header.js
@@ -0,0 +1,25 @@
+import React from "react";
+import "./Header.css";
+// import React, { useState } from "react";
+
+const Header = () => {
+	// const [activeLink, updateActiveLink] = useState("home")
+	return (
+		<div className={"header"}>
+			<div class="placeholder">
+				<p class="inlineBlock">OpenBills</p>
+
+			</div>
+			<div className={"navBar"}>
+				<nav>
+					<a href="https://nhentai.net">Link1</a>
+					<a href="https://youtube.com">Link2</a>
+					<a href="https://google.com">Link3</a>
+					<a href="https://github.com">Link4</a>
+				</nav>
+			</div>
+		</div>
+	)
+}
+
+export default Header
diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss
new file mode 100644
index 0000000..28a0489
--- /dev/null
+++ b/src/components/Header/Header.scss
@@ -0,0 +1,42 @@
+@import "../../styles/_themes.sass";
+
+.header {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+	align-items: center;
+	justify-content: space-between;
+	position: absolute;
+	top: 0px; left: 0px;
+	margin: none;
+	padding: none;
+	width: 100%;
+	height: 5rem;
+	background-color: $altBG;
+
+	box-shadow: $defShadow;
+}
+
+.header div {
+	margin: auto 1rem;
+}
+
+nav a {
+	text-decoration: none;
+	padding: 0.3rem;
+	color: $defLink;
+}
+
+.placeholder {
+	width: 5rem;
+	height: 3rem;
+}
+
+.inlineBlock {
+	display: inline-block;
+}
+
+
+p, h1, h2, h3, h4, h5, h6 {
+	color: $defFG;
+}
diff --git a/src/index.js b/src/index.js
index 4593486..c096aa7 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import "./styles/global.css"
 import App from "./components/App";
 
 ReactDOM.render(App(), document.getElementById("root"))
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
new file mode 100644
index 0000000..6431bc5
--- /dev/null
+++ b/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/src/styles/_themes.sass b/src/styles/_themes.sass
new file mode 100644
index 0000000..66a16fc
--- /dev/null
+++ b/src/styles/_themes.sass
@@ -0,0 +1,17 @@
+@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap');
+
+/* Experimental color scheme */
+$defBG: #FFFFFF;
+$altBG: lightgray;
+$defFG: #000000;
+$altFG: #232627;
+$defLink: brown;
+$altLink: brown;
+
+$defShadow: 2px 0px 4px #232627;
+
+$bodyPadding: 0;
+$bodyMargin: 0;
+
+$defFont: 'Quicksand', sans-serif;
+
diff --git a/src/styles/global.css b/src/styles/global.css
new file mode 100644
index 0000000..099c3de
--- /dev/null
+++ b/src/styles/global.css
@@ -0,0 +1,8 @@
+@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap");
+* {
+  font-family: "Quicksand", sans-serif; }
+
+body {
+  color: #FFFFFF;
+  padding: 0;
+  margin: 0; }
diff --git a/src/styles/global.scss b/src/styles/global.scss
new file mode 100644
index 0000000..703efb8
--- /dev/null
+++ b/src/styles/global.scss
@@ -0,0 +1,12 @@
+@import "themes";
+
+* {
+	font-family: $defFont
+}
+
+body {
+	background-color: $defBG;
+	color: $defFG;
+	padding: $bodyPadding;
+	margin: $bodyMargin;
+}
diff --git a/src/styles/header.scss b/src/styles/header.scss
deleted file mode 100644
index 5071b5e..0000000
--- a/src/styles/header.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-$bgColor: lightgray;
-
-#header {
-	background-color: $bgColor;
-}