From 63189d40cab6cb4ef7986b16df1bc56515edbfae Mon Sep 17 00:00:00 2001
From: vikingowl <cw.nachtigall@gmail.com>
Date: Mon, 24 Jan 2022 17:48:26 +0100
Subject: [PATCH] more adjustments

---
 package.json             |  1 +
 src/App.css              | 17 ++++++++++++++
 src/App.js               |  4 +++-
 src/components/Footer.js | 12 +++++-----
 src/components/Nav.js    | 48 +++++++++++++++++++++++++++++++++++++---
 src/pages/Home.js        |  2 +-
 src/pages/NotFound.js    |  2 +-
 yarn.lock                |  8 +++++++
 8 files changed, 83 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 33471d5..69680f5 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "react-scripts": "5.0.0",
     "sass": "^1.49.0",
     "sass-loader": "^12.4.0",
+    "snippets": "https://git.harting.dev/vikingowl/snippets.git",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
diff --git a/src/App.css b/src/App.css
index e69de29..3e260a1 100644
--- a/src/App.css
+++ b/src/App.css
@@ -0,0 +1,17 @@
+.navbar {
+    height: 80px;
+}
+
+main {
+    margin-top: 80px;
+}
+
+.footer {
+    height: 80px;
+    padding-top: 30px;
+}
+
+.nav-link:hover {
+    color: var(--bs-secondary) !important;
+    text-shadow: 0 0 1px var(--bs-secondary), 0 0 1px var(--bs-secondary);
+}
diff --git a/src/App.js b/src/App.js
index 3daf842..e43a967 100644
--- a/src/App.js
+++ b/src/App.js
@@ -18,7 +18,9 @@ function App() {
         <Routing/>
       </main>
 
-      <footer className="footer mt-auto bg-light pt-4 pb-2">
+      <footer className="mt-auto">
+        {/*Kontakt hier*/}
+
         <Footer/>
       </footer>
 
diff --git a/src/components/Footer.js b/src/components/Footer.js
index ac96896..d551f54 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -2,12 +2,14 @@ import React from 'react'
 
 export const Footer = () => {
   return (
-    <div className='container d-flex justify-content-between'>
-      <p>&copy; COPYRIGHT</p>
+    <div className='bg-dark footer'>
+      <div className='container d-flex justify-content-between text-white'>
+        <p>&copy; COPYRIGHT</p>
 
-      <span>
-        LINKS
-      </span>
+        <span>
+          LINKS
+        </span>
+      </div>
     </div>
   )
 }
\ No newline at end of file
diff --git a/src/components/Nav.js b/src/components/Nav.js
index 3ca887a..46ac374 100644
--- a/src/components/Nav.js
+++ b/src/components/Nav.js
@@ -1,9 +1,51 @@
 import React from 'react'
+import {NavLink} from "react-router-dom";
+import {bootstrapNavCloser, setImage} from "snippets";
 
 export const Nav = () => {
+  bootstrapNavCloser()
+
   return (
-    <div>
-        NAV
-    </div>
+    <nav
+      className="navbar navbar-light navbar-expand-md bg-primary fixed-top"
+    >
+      <div className="container">
+        <NavLink className="navbar-brand" to="/">
+          <img
+            src={setImage('/logo.png', '/static/media/images')}
+            alt="Logo"
+            style={{
+              width: '60px',
+              overflow: 'hidden'
+            }}
+          />
+        </NavLink>
+
+        <button className="navbar-toggler" type="button" data-bs-toggle="collapse"
+                data-bs-target="#mainNav" aria-controls="mainNav"
+                aria-expanded="false" aria-label="Toggle navigation">
+          <span className="navbar-toggler-icon"/>
+        </button>
+
+        <div className="collapse navbar-collapse navbar-nav" id="mainNav">
+          <ul className="navbar-nav ms-auto">
+            <li className="nav-item">
+              <NavLink
+                to="/"
+                className={isActive => "nav-link" + (!isActive ? ' unselected' : '')}
+                aria-current="page"
+                style={({isActive}) => ({
+                  color: isActive ? 'var(--bs-secondary)' : '',
+                  textShadow: isActive ? '0 0 1px var(--bs-secondary), 0 0 1px var(--bs-secondary)' : '',
+
+                })}
+              >
+                Home
+              </NavLink>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
   )
 }
\ No newline at end of file
diff --git a/src/pages/Home.js b/src/pages/Home.js
index fa15370..ff3b7c8 100644
--- a/src/pages/Home.js
+++ b/src/pages/Home.js
@@ -2,7 +2,7 @@ import React from 'react'
 
 export const Home = () => {
   return (
-    <div>
+    <div className='container pt-4'>
         HOME
     </div>
   )
diff --git a/src/pages/NotFound.js b/src/pages/NotFound.js
index 388a22a..8812a69 100644
--- a/src/pages/NotFound.js
+++ b/src/pages/NotFound.js
@@ -2,7 +2,7 @@ import React from 'react'
 
 export const NotFound = () => {
   return (
-    <div className='container'>
+    <div className='container pt-4'>
       <h2>Site not found</h2>
     </div>
   )
diff --git a/yarn.lock b/yarn.lock
index 2f07bcb..23ba346 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9685,6 +9685,7 @@ __metadata:
     react-scripts: 5.0.0
     sass: ^1.49.0
     sass-loader: ^12.4.0
+    snippets: "https://git.harting.dev/vikingowl/snippets.git"
     web-vitals: ^2.1.4
   languageName: unknown
   linkType: soft
@@ -10547,6 +10548,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"snippets@https://git.harting.dev/vikingowl/snippets.git":
+  version: 1.0.0
+  resolution: "snippets@https://git.harting.dev/vikingowl/snippets.git#commit=b3b79103bd07da1296bd6315a756d7672675665b"
+  checksum: 289cf8dd4f2277291101e3c5b5820aa1930d99a524fbc3f03506f0da886b39e36a417c7037c21ebc1d77ebd67b6865cb81b2a88740ed6844a728a774a8907a4b
+  languageName: node
+  linkType: hard
+
 "sockjs@npm:^0.3.21":
   version: 0.3.24
   resolution: "sockjs@npm:0.3.24"