From 41de426fcb5fec3735a48de224137e88d6430038 Mon Sep 17 00:00:00 2001
From: Ben Bolte <ben@bolte.cc>
Date: Thu, 30 May 2024 15:37:29 -0400
Subject: [PATCH] sidebar (#23)

---
 frontend/src/App.tsx                      |  2 +-
 frontend/src/components/nav/NavBar.tsx    | 31 --------------------
 frontend/src/components/nav/Sidebar.tsx   | 32 +++++++++++++++++++++
 frontend/src/components/nav/TopNavbar.tsx | 35 +++++++++++++++++++++++
 4 files changed, 68 insertions(+), 32 deletions(-)
 delete mode 100644 frontend/src/components/nav/NavBar.tsx
 create mode 100644 frontend/src/components/nav/Sidebar.tsx
 create mode 100644 frontend/src/components/nav/TopNavbar.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 7770a078..a02697ad 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,5 +1,5 @@
 import "bootstrap/dist/css/bootstrap.min.css";
-import TopNavbar from "components/nav/NavBar";
+import TopNavbar from "components/nav/TopNavbar";
 import NotFoundRedirect from "components/NotFoundRedirect";
 import ComponentDetails from "pages/ComponentDetails";
 import Components from "pages/Components";
diff --git a/frontend/src/components/nav/NavBar.tsx b/frontend/src/components/nav/NavBar.tsx
deleted file mode 100644
index 1bdddde4..00000000
--- a/frontend/src/components/nav/NavBar.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import Authentication from "components/Authentication";
-import { Container, Nav, Navbar } from "react-bootstrap";
-import { Link } from "react-router-dom";
-
-const TopNavbar = () => {
-  return (
-    <Navbar className="bg-body-tertiary">
-      <Container>
-        <Navbar.Brand as={Link} to="/">
-          robolist
-        </Navbar.Brand>
-        <Navbar.Toggle />
-        <Navbar.Collapse className="justify-content-end">
-          <Nav>
-            <Nav.Link as={Link} to="/robots/">
-              Robots
-            </Nav.Link>
-            <Nav.Link as={Link} to="/components/">
-              Components
-            </Nav.Link>
-          </Nav>
-          <Navbar.Text>
-            <Authentication />
-          </Navbar.Text>
-        </Navbar.Collapse>
-      </Container>
-    </Navbar>
-  );
-};
-
-export default TopNavbar;
diff --git a/frontend/src/components/nav/Sidebar.tsx b/frontend/src/components/nav/Sidebar.tsx
new file mode 100644
index 00000000..7a348a41
--- /dev/null
+++ b/frontend/src/components/nav/Sidebar.tsx
@@ -0,0 +1,32 @@
+import Authentication from "components/Authentication";
+import { Col, Offcanvas, Row } from "react-bootstrap";
+
+interface Props {
+  show: boolean;
+  onHide: () => void;
+}
+
+const Sidebar = ({ show, onHide }: Props) => {
+  return (
+    <Offcanvas show={show} onHide={onHide} placement="end">
+      <Offcanvas.Header closeButton>
+        <Offcanvas.Title>Offcanvas</Offcanvas.Title>
+      </Offcanvas.Header>
+      <Offcanvas.Body>
+        <Col>
+          <Row>
+            <p>
+              Some text as placeholder. In real life you can have the elements
+              you have chosen. Like, text, images, lists, etc.
+            </p>
+          </Row>
+          <Row>
+            <Authentication />
+          </Row>
+        </Col>
+      </Offcanvas.Body>
+    </Offcanvas>
+  );
+};
+
+export default Sidebar;
diff --git a/frontend/src/components/nav/TopNavbar.tsx b/frontend/src/components/nav/TopNavbar.tsx
new file mode 100644
index 00000000..50319f92
--- /dev/null
+++ b/frontend/src/components/nav/TopNavbar.tsx
@@ -0,0 +1,35 @@
+import Sidebar from "components/nav/Sidebar";
+import { useState } from "react";
+import { Container, Nav, Navbar } from "react-bootstrap";
+import { Link } from "react-router-dom";
+
+const TopNavbar = () => {
+  const [showSidebar, setShowSidebar] = useState<boolean>(false);
+
+  return (
+    <>
+      <Navbar className="bg-body-tertiary">
+        <Container>
+          <Navbar.Brand as={Link} to="/">
+            robolist
+          </Navbar.Brand>
+          <Navbar.Toggle />
+          <Navbar.Collapse className="justify-content-end">
+            <Nav>
+              <Nav.Link as={Link} to="/robots/">
+                Robots
+              </Nav.Link>
+              <Nav.Link as={Link} to="/components/">
+                Components
+              </Nav.Link>
+              <Nav.Link onClick={() => setShowSidebar(true)}>Login</Nav.Link>
+            </Nav>
+          </Navbar.Collapse>
+        </Container>
+      </Navbar>
+      <Sidebar show={showSidebar} onHide={() => setShowSidebar(false)} />
+    </>
+  );
+};
+
+export default TopNavbar;