Side Paneling

src/App/index.ts

@@ -1,2 +1 @@
-import App from "./App";
-export { App };
+export { App } from "./App";

src/components/Header/Header.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { FC, ReactElement } from "react";
+import { Button } from "react-bootstrap";
+import { ToggleSidebar } from "../Sidebar";
+import "./header.scss";
+
+/**
+ * Header Component
+ * @param {string} title - Page Title
+ * @param {ToggleSidebar} toggleSidebar - Toggle Sidebar Function
+ * @returns Header Component
+ */
+
+export interface HeaderProps {
+  title: string;
+  toggleSidebar: ToggleSidebar;
+}
+
+export const Header: FC<HeaderProps> = ({
+  title,
+  toggleSidebar,
+}): ReactElement => {
+  return (
+    <header className="header">
+      <h1>{title}</h1>
+      <Button
+        className="sidebar__button_toggle"
+        variant="outline-secondary"
+        onClick={() => toggleSidebar(true)}
+        title="About the App"
+      >
+        <i>i</i>
+      </Button>
+    </header>
+  );
+};

src/components/Header/header.scss

@@ -0,0 +1,16 @@
+header.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .sidebar__button_toggle {
+    border-radius: 50%;
+    padding-right: 6px;
+    padding-left: 6px;
+
+    i {
+      display: inline-block;
+      width: 1.5rem;
+    }
+  }
+}

src/components/Header/index.ts

@@ -0,0 +1,2 @@
+export { Header } from "./Header";
+export type { HeaderProps } from "./Header";

src/components/Sidebar/Sidebar.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { FC, ReactElement } from "react";
+import { Offcanvas } from "react-bootstrap";
+import { END } from "../../strings";
+
+export const SIDEBAR_HEADER = "About the App";
+export const SIDEBAR_BODY = "This is a simple app to help you keep track of your logs. Highly customizable logs allow you to track anything you want!";
+export const SIDEBAR_DATA_HEADER = "Data Usage";
+export const SIDEBAR_DATA_BODY_1 = "This app uses local storage to store your logs, no data is sent to a server. Your data is never sold to anyone, EVER."
+export const SIDEBAR_DATA_BODY_2 = "If you want to delete your personal data, just delete the Log / Entry. To completely clear the App data, clear your browser's local storage via the browser inspector tools.";
+
+/**
+ * Sidebar Component
+ * @param {boolean} showSidebar - Show Sidebar
+ * @param {ToggleSidebar} toggleSidebar - Toggle Sidebar Function
+ * @returns {ReactElement} Sidebar Component
+ */
+
+export type ToggleSidebar = React.Dispatch<React.SetStateAction<boolean>>;
+
+export interface SidebarProps {
+  showSidebar: boolean;
+  toggleSidebar: ToggleSidebar;
+}
+
+export const Sidebar: FC<SidebarProps> = ({
+  showSidebar,
+  toggleSidebar,
+}): ReactElement => {
+  return (
+    <Offcanvas
+      show={showSidebar}
+      onHide={() => toggleSidebar(false)}
+      placement={END}
+    >
+      <Offcanvas.Header closeButton>
+        <Offcanvas.Title as="h2">{SIDEBAR_HEADER}</Offcanvas.Title>
+      </Offcanvas.Header>
+      <Offcanvas.Body>
+        <p>{SIDEBAR_BODY}</p>
+        <h3>{SIDEBAR_DATA_HEADER}</h3>
+        <p>{SIDEBAR_DATA_BODY_1}</p>
+        <p>{SIDEBAR_DATA_BODY_2}</p>
+      </Offcanvas.Body>
+    </Offcanvas>
+  );
+};

src/components/Sidebar/index.ts

@@ -0,0 +1,2 @@
+export { Sidebar } from "./Sidebar";
+export type { SidebarProps, ToggleSidebar } from "./Sidebar";

src/containers/Edit/Edit.tsx

@@ -16,6 +16,8 @@ import { LogNameForm } from "../../components/LogNameForm";
 import { EditFieldsTable } from "../../components/EditFieldsTable/EditFieldsTable";
 import { EditFieldForm } from "../../components/EditFieldForm";
 import { EditLabelForm } from "../../components/EditLabelForm";
+import { Sidebar } from "../../components/Sidebar";
+import { Header } from "../../components/Header";
 import {
   ADD,
   ADD_ENTRY,
@@ -69,7 +71,7 @@ export const Edit: FC = (): ReactElement => {
   if (!log || id !== log.id || !log.fields) {
     navigate("/");
   }
-
+  const [showSidebar, setShowSidebar] = React.useState(false);
   const [showModal, setShowModal] = React.useState(fid ? true : false);
   const [modalMode, setModalMode] = React.useState(
     fid && fid !== NEW ? EDIT : ADD
@@ -105,10 +107,14 @@ export const Edit: FC = (): ReactElement => {
   return (
     <>
       <Container>
-        <h1>
-          {EDIT_HEADER}
-          {log.name}
-        </h1>
+        <Row>
+          <Col>
+            <Header
+              title={EDIT_HEADER + log.name}
+              toggleSidebar={setShowSidebar}
+            />
+          </Col>
+        </Row>
 
         <Accordion
           alwaysOpen
@@ -203,6 +209,11 @@ export const Edit: FC = (): ReactElement => {
           />
         </Modal.Body>
       </Modal>
+
+      <Sidebar
+        showSidebar={showSidebar}
+        toggleSidebar={setShowSidebar}
+      />
     </>
   );
 };

src/containers/Home/Home.tsx

@@ -8,6 +8,9 @@ import { Link, useNavigate } from "react-router-dom";
 import { removeLog, useGetLogsArray } from "../../store/Log";
 import { v4 as uuidv4 } from "uuid";
 
+import { Sidebar} from "../../components/Sidebar";
+import { Header } from "../../components/Header";
+
 import store from "../../store/store";
 import { addLog } from "../../store/Log";
 import {
@@ -45,6 +48,7 @@ export const onAddLog = (id: string, name: string) => {
 export const Home: FC = (): ReactElement => {
   const navigate = useNavigate();
   const isNewLogModalOpen = window.location.hash === "#/new";
+  const [showSidebar, setShowSidebar] = React.useState(false);
   const [showModal, setShowModal] = React.useState(isNewLogModalOpen);
   const [newLogId, setNewLogId] = React.useState(EMPTY);
   const [newLogName, setNewLogName] = React.useState(EMPTY);
@@ -60,9 +64,15 @@ export const Home: FC = (): ReactElement => {
 
   return (
     <Container>
+      <Row className="header__row">
+        <Col>
+
+            <Header title={TRACKER_KEEPER} toggleSidebar={setShowSidebar} />
+
+        </Col>
+      </Row>
       <Row>
         <Col>
-          <h1>{TRACKER_KEEPER}</h1>
           <hr />
           <h2>{YOUR_LOGS}</h2>
 
@@ -193,6 +203,11 @@ export const Home: FC = (): ReactElement => {
           </Container>
         </Modal.Footer>
       </Modal>
+
+      <Sidebar
+        showSidebar={showSidebar}
+        toggleSidebar={setShowSidebar}
+      />
     </Container>
   );
 };

src/containers/Log/Log.tsx

@@ -9,6 +9,10 @@ import {
   Dropdown,
 } from "react-bootstrap";
 import { useNavigate, useParams } from "react-router-dom";
+
+import { Sidebar} from "../../components/Sidebar";
+import { Header } from "../../components/Header";
+
 import store from "../../store/store";
 import {
   useGetLog,
@@ -45,6 +49,7 @@ export const onDeleteEntry = (log: LogType, entryId: string) => {
 export const Log: FC = (): ReactElement => {
   const navigate = useNavigate();
   const { id } = useParams() as { id: string };
+  const [showSidebar, setShowSidebar] = React.useState(false);
   const log: LogType = useGetLog(id);
   const { name, fields, labelOption } = log;
   const entries: LogEntry[] = Object.values(log.entries || {});
@@ -55,7 +60,7 @@ export const Log: FC = (): ReactElement => {
     <Container className="log__container">
       <Row>
         <Col>
-          <h1>{name}</h1>
+          <Header title={name} toggleSidebar={setShowSidebar} />
         </Col>
       </Row>
       <hr />
@@ -180,6 +185,11 @@ export const Log: FC = (): ReactElement => {
           </Button>
         </Col>
       </Row>
+
+      <Sidebar
+        showSidebar={showSidebar}
+        toggleSidebar={setShowSidebar}
+      />
     </Container>
   );
 };

src/containers/LogEntry/LogEntry.tsx

@@ -16,7 +16,9 @@ import {
 } from "../../store/Log";
 import { Formik } from "formik";
 import store from "../../store/store";
-import FieldText from "../../components/FieldText/FieldText";
+import { Sidebar} from "../../components/Sidebar";
+import { Header } from "../../components/Header";
+import {FieldText} from "../../components/FieldText";
 import { FieldNumber } from "../../components/FieldNumber";
 import { FieldDate } from "../../components/FieldDate";
 import { FieldBoolean } from "../../components/FieldBoolean";
@@ -77,6 +79,7 @@ export const LogEntry: FC = (): ReactElement | null => {
   const navigate = useNavigate();
   const log: Log = useGetLog(logId);
   const entry: LogEntryType = useGetLogEntry(logId, entryId);
+  const [showSidebar, setShowSidebar] = React.useState(false);
   const [cancel, setCancel] = React.useState(false);
   const [isNewEntry] = React.useState(
     typeof entryId === UNDEFINED || typeof entry === UNDEFINED
@@ -110,10 +113,10 @@ export const LogEntry: FC = (): ReactElement | null => {
       <Container>
         <Row>
           <Col>
-            <h1>
-              {name}
-              {ENTRY_HEADER}
-            </h1>
+            <Header
+              title={`${name}${ENTRY_HEADER}`}
+              toggleSidebar={setShowSidebar}
+            />
             <hr />
           </Col>
         </Row>
@@ -191,6 +194,10 @@ export const LogEntry: FC = (): ReactElement | null => {
             );
           }}
         </Formik>
+        <Sidebar
+          showSidebar={showSidebar}
+          toggleSidebar={setShowSidebar}
+        />
       </Container>
     </>
   );

src/strings.ts

@@ -35,6 +35,7 @@ export const STEP = "step";
 export const COMMA = ",";
 export const COMMA_SPACE = ", ";
 export const ADD = "add";
+export const END = "end";
 
 // Display Strings
 export const HOME = "Home";