rendered a simple non-functional menu/navbar

5 files changed, 105 insertions, 16 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;
+}