adding navbar

eliska-n · Nov 17, 2023 · 3f93dc1 · 3f93dc1
1 parent 96efd68
commit 3f93dc1
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 39 deletions.
diff --git a/package.json b/package.json
@@ -7,7 +7,6 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.4.0",
-    "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.1",
     "js-base64": "^3.7.5",
     "react": "^18.2.0",
@@ -45,18 +44,18 @@
     ]
   },
   "devDependencies": {
-    "http-proxy-middleware": "^2.0.6",
-    "webpack": "^5.88.1",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1",
     "autoprefixer": "^10.4.14",
+    "http-proxy-middleware": "^2.0.6",
     "nodemon": "^3.0.1",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.27",
     "postcss-cli": "^10.1.0",
     "sass": "^1.64.1",
     "sirv-cli": "^2.0.2",
     "stylelint": "^15.10.2",
-    "stylelint-config-twbs-bootstrap": "^11.0.1"
+    "stylelint-config-twbs-bootstrap": "^11.0.1",
+    "webpack": "^5.88.1",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -26,6 +26,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
     <title>Bagman</title>
   </head>
   <body>

diff --git a/src/App.js b/src/App.js
@@ -5,7 +5,8 @@ import { useState } from 'react';
 import { Base64 } from 'js-base64';
 import axios from 'axios';
 
-import {LinkToUnicorns, UnicornsScreen} from './Unicorns'
+import {UnicornsScreen} from './Unicorns'
+import {Navbar} from "./navbar"
 
 
 // TODO - kde by tohle mělo bydlet?
@@ -194,11 +195,6 @@ function SaveNoteScreen({ setAlert }) {
           </div>
         </div>
       </div>
-
-      < LinkToUnicorns />
-
-
-
     </>
   );
 }
@@ -319,7 +315,6 @@ function DisplayNoteScreen( setAlert ) {
                   <button className="btn btn-primary btn-lg" onClick={copySecretToClipboard}>Copy secret to clipboard</button>
                   { deleted === false && <button className="btn btn-danger btn-lg" onClick={deleteNote}>Delete Note</button> }
                   { deleted === true && <button className="btn btn-dark btn-lg" disabled onClick={deleteNote}>Note was deleted!</button> }
-                  <a class="btn btn-secondary btn-lg" aria-current="page" href="/">Create new secret</a>
                 </div>
               </div>
             </>
@@ -328,8 +323,6 @@ function DisplayNoteScreen( setAlert ) {
 
         </div>
       </div>
-
-      < LinkToUnicorns />
     </>
   );
 }
@@ -358,6 +351,7 @@ function App() {
         </div>
       </div>
       }
+      <Navbar />
       <div className="container text-center">
           <BagmanRouter setAlert={setAlert}/>
       </div>

diff --git a/src/Unicorns.js b/src/Unicorns.js
@@ -86,30 +86,8 @@ function UnicornsScreen() {
           </div>
         </div>
       </div>
-
-      <div className="row justify-content-center">
-        <div className="col-12 col-lg-6">
-          <ul class="nav nav-pills justify-content-center">
-            <li class="nav-item">
-              <a class="nav-link active" aria-current="page" href="/">Back to the app</a>
-            </li>
-          </ul>
-        </div>
-      </div>
     </>
   )
 }
 
-
-function LinkToUnicorns() {
-  return (
-    <div className="row py-4 justify-content-center">
-      <div className="col-12 col-lg-6">
-        <a class="link-secondary" aria-current="page" href="#/unicorns">Is it safe? Tell me how it works!</a>
-      </div>
-    </div>
-  )
-}
-
-export { UnicornsScreen };
-export { LinkToUnicorns };
+export { UnicornsScreen };
diff --git a/src/navbar.js b/src/navbar.js
@@ -0,0 +1,38 @@
+import '@popperjs/core';
+
+
+function Navbar() {
+	return (
+		<>
+		<div className="container">
+			<nav className="navbar navbar-expand-lg bg-body-lightpink">
+			<div className="container-fluid">
+				<div class="collapse navbar-collapse" id="navbarText">
+					<ul class="navbar-nav me-auto mb-2 mb-lg-0">
+						<li class="nav-item">
+						<a className="navbar-brand fs-3 text-secondary" href="#">
+							<i class="bi bi-house text-secondary fs-3"></i>
+						</a>
+						</li>
+						<li class="nav-item">
+						<a className="navbar-brand fs-3 text-secondary" href="#/unicorns">
+								<i class="bi bi-question-lg text-secondary fs-3"></i>
+						</a>
+						</li>
+						<li class="nav-item">
+						<a className="navbar-brand fs-3 text-secondary" href="https://github.com/eliska-n/BagManUI">
+								<i class="bi bi-github text-secondary fs-3"></i>
+						</a>
+						</li>
+
+					</ul>
+				</div>
+			</div>
+			</nav>
+		</div>
+
+		</>
+	)
+}
+
+export { Navbar };
diff --git a/src/scss/custom.scss b/src/scss/custom.scss
@@ -50,6 +50,7 @@ $btn-active-border-tint-amount:   50%;
 @import "../../node_modules/bootstrap/scss/card";
 @import "../../node_modules/bootstrap/scss/carousel";
 @import "../../node_modules/bootstrap/scss/nav";
+@import "../../node_modules/bootstrap/scss/navbar";
 @import "../../node_modules/bootstrap/scss/alert";
 @import "../../node_modules/bootstrap/scss/close";
 @import "../../node_modules/bootstrap/scss/transitions";
@@ -77,7 +78,7 @@ body {
 // }
 
 .mt-a-lot {
-	margin-top: ($spacer * 15);
+	margin-top: ($spacer * 10);
   }
 
 .alerts {