more adjustments

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": {

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

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>
 

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

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

src/pages/Home.js

@@ -2,7 +2,7 @@ import React from 'react'
 
 export const Home = () => {
   return (
-    <div>
+    <div className='container pt-4'>
         HOME
     </div>
   )

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>
   )

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"