From 10f7749d52df9a70e15a33cd76ba441f4b81a1a5 Mon Sep 17 00:00:00 2001 From: MikunoNaka 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 ( -

{txt}

+
) } -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 ( -
- -
- ) -} - -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 ( +
+
+

OpenBills

+ +
+
+ +
+
+ ) +} + +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 @@ +/// 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