From 10f7749d52df9a70e15a33cd76ba441f4b81a1a5 Mon Sep 17 00:00:00 2001
From: MikunoNaka <bokuwakanojogahoshii@yahoo.com>
Date: Sat, 27 Mar 2021 19:37:21 +0530
Subject: rendered a simple non-functional menu/navbar
---
src/components/App.js | 6 +++---
src/components/Header.js | 13 ------------
src/components/Header/Header.css | 35 ++++++++++++++++++++++++++++++++
src/components/Header/Header.js | 25 +++++++++++++++++++++++
src/components/Header/Header.scss | 42 +++++++++++++++++++++++++++++++++++++++
src/index.js | 1 +
src/react-app-env.d.ts | 1 +
src/styles/_themes.sass | 17 ++++++++++++++++
src/styles/global.css | 8 ++++++++
src/styles/global.scss | 12 +++++++++++
src/styles/header.scss | 5 -----
11 files changed, 144 insertions(+), 21 deletions(-)
delete mode 100644 src/components/Header.js
create mode 100644 src/components/Header/Header.css
create mode 100644 src/components/Header/Header.js
create mode 100644 src/components/Header/Header.scss
create mode 100644 src/react-app-env.d.ts
create mode 100644 src/styles/_themes.sass
create mode 100644 src/styles/global.css
create mode 100644 src/styles/global.scss
delete mode 100644 src/styles/header.scss
(limited to 'src')
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;
-}
--
cgit v1.2.3