Navbar s možností odhlášení

client/src/App.css

@@ -55,4 +55,14 @@
   display: flex;
   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,53 +90,55 @@ function App() {
   // const pizzaDayExists = data?.state > 0;
 
   return (
-    <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 />
-        <small>Pro gamer move: Změň si své jméno na cizí. Můžeš pak libovolně měnit jejich volbu.</small>
-      </Alert>
-      <h1 className='title'>Dnes je {data.date}</h1>
-      <Row className='food-tables'>
-        {renderFoodTable('Sladovnická', food.sladovnicka)}
-        {renderFoodTable('U Motlíků', food["uMotliku:"])}
-        {renderFoodTable('TechTower', food.techTower)}
-      </Row>
-      <div className='content-wrapper'>
-        <div className='content'>
-          <p>Jak to dnes vidíš s obědem?</p>
-          <Form.Select onChange={changeChoice}>
-            <option></option>
-            <option value={Locations.SLADOVNICKA}>Sladovnická</option>
-            <option value={Locations.UMOTLIKU}>U Motlíků</option>
-            <option value={Locations.TECHTOWER}>TechTower</option>
-            <option value={Locations.SPSE}>SPŠE</option>
-            <option value={Locations.VLASTNI}>Mám vlastní</option>
-            <option value={Locations.OBJEDNAVAM}>Budu objednávat</option>
-            <option value={Locations.NEOBEDVAM}>Nebudu obědvat</option>
-          </Form.Select>
-          <p style={{ fontSize: "12px", marginTop: "5px" }}>
-            Aktuálně je možné vybrat pouze jednu variantu. Vyber prázdnou položku pro odstranění.
-          </p>
-          {Object.keys(data.choices).length > 0 ?
-            <Table striped bordered hover className='results-table mt-5'>
-              <tbody>
-                {Object.keys(data.choices).map((key: string, index: number) =>
-                  <tr key={index}>
-                    <td>{Object.values(Locations)[Number(key)]}</td>
-                    <td>
-                      <ul>
-                        {data.choices[Number(key)].map((p: string, index: number) => <li key={index}>{p}</li>)}
-                      </ul>
-                    </td>
-                  </tr>
-                )}
-              </tbody>
-            </Table>
-            : <div className='mt-5'><i>Zatím nikdo nehlasoval...</i></div>
-          }
+    <>
+      <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 />
+          <small>Pro gamer move: Změň si své jméno na cizí. Můžeš pak libovolně měnit jejich volbu.</small>
+        </Alert>
+        <h1 className='title'>Dnes je {data.date}</h1>
+        <Row className='food-tables'>
+          {renderFoodTable('Sladovnická', food.sladovnicka)}
+          {renderFoodTable('U Motlíků', food["uMotliku:"])}
+          {renderFoodTable('TechTower', food.techTower)}
+        </Row>
+        <div className='content-wrapper'>
+          <div className='content'>
+            <p>Jak to dnes vidíš s obědem?</p>
+            <Form.Select onChange={changeChoice}>
+              <option></option>
+              <option value={Locations.SLADOVNICKA}>Sladovnická</option>
+              <option value={Locations.UMOTLIKU}>U Motlíků</option>
+              <option value={Locations.TECHTOWER}>TechTower</option>
+              <option value={Locations.SPSE}>SPŠE</option>
+              <option value={Locations.VLASTNI}>Mám vlastní</option>
+              <option value={Locations.OBJEDNAVAM}>Budu objednávat</option>
+              <option value={Locations.NEOBEDVAM}>Nebudu obědvat</option>
+            </Form.Select>
+            <p style={{ fontSize: "12px", marginTop: "5px" }}>
+              Aktuálně je možné vybrat pouze jednu variantu. Vyber prázdnou položku pro odstranění.
+            </p>
+            {Object.keys(data.choices).length > 0 ?
+              <Table striped bordered hover className='results-table mt-5'>
+                <tbody>
+                  {Object.keys(data.choices).map((key: string, index: number) =>
+                    <tr key={index}>
+                      <td>{Object.values(Locations)[Number(key)]}</td>
+                      <td>
+                        <ul>
+                          {data.choices[Number(key)].map((p: string, index: number) => <li key={index}>{p}</li>)}
+                        </ul>
+                      </td>
+                    </tr>
+                  )}
+                </tbody>
+              </Table>
+              : <div className='mt-5'><i>Zatím nikdo nehlasoval...</i></div>
+            }
+          </div>
         </div>
-      </div>
-      {/* {!pizzaDayExists &&
+        {/* {!pizzaDayExists &&
         <div>
           <p>Pro dnešní den není aktuálně založen Pizza day.</p>
           <Button onClick={async () => {
@@ -149,11 +152,12 @@ function App() {
         }}>Smazat Pizza day</Button>
         <OrderList orders={data.orders} />
       </div>} */}
-      {/* <Button onClick={async () => {
+        {/* <Button onClick={async () => {
           const pizzy = await getPizzy();
           console.log("Výsledek", pizzy);
         }}>Získat pizzy</Button> */}
-    </div>
+      </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>
+}