Navbar s možností odhlášení

client/src/App.css

@@ -56,3 +56,13 @@
   flex-direction: column;
   align-items: center;
 }
+
+.navbar {
+  background-color: #3c3c3c;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+#basic-navbar-nav {
+  justify-content: flex-end;
+}

client/src/App.tsx

@@ -5,8 +5,9 @@ import { getData, getFood, updateChoice } from './Api';
 import { useAuth } from './context/auth';
 import Login from './Login';
 import { Locations, ClientData } from './Types';
-import './App.css';
 import { Alert, Col, Form, Row, Table } from 'react-bootstrap';
+import Header from './components/Header';
+import './App.css';
 
 const EVENT_CONNECT = "connect"
 
@@ -89,6 +90,8 @@ function App() {
   // const pizzaDayExists = data?.state > 0;
 
   return (
+    <>
+      <Header />
       <div className='wrapper'>
         <Alert variant={'primary'}>
           Tvé zobrazované jméno je {auth.login}. Změnu můžeš provést v local storage prohlížeče.<br />
@@ -154,6 +157,7 @@ function App() {
           console.log("Výsledek", pizzy);
         }}>Získat pizzy</Button> */}
       </div>
+    </>
   );
 }
 

client/src/components/Header.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Navbar, Nav, NavDropdown } from "react-bootstrap";
+import { useAuth } from "../context/auth";
+
+export default function Header() {
+    const auth = useAuth();
+
+    return <Navbar variant='dark' expand="lg">
+        <Navbar.Brand>Luncher</Navbar.Brand>
+        <Navbar.Toggle aria-controls="basic-navbar-nav" />
+        <Navbar.Collapse id="basic-navbar-nav">
+            <Nav className="nav">
+                <NavDropdown title={auth?.login} id="basic-nav-dropdown">
+                    <NavDropdown.Item onClick={auth?.clearLogin}>Odhlásit se</NavDropdown.Item>
+                </NavDropdown>
+            </Nav>
+        </Navbar.Collapse>
+    </Navbar>
+}