Add Font Awesome; Add Issues and Requests sections to Sidebar;

public/index.html

@@ -11,6 +11,12 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!-- 
+      Font Awesome Icons
+     -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
+      integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
+      crossorigin="anonymous" referrerpolicy="no-referrer" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

src/App/App.scss

@@ -11,16 +11,33 @@ h1 {
   margin-top: 1rem;
 }
 
+// source: https://a11y-101.com/development/skip-link
+.visible_hidden {
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.visible_hidden:focus {
+  clip: auto;
+  height: auto;
+  overflow: auto;
+  position: absolute;
+  width: auto;
+}
+
 #root > .container {
   height: 100vh;
   background-color: white;
 }
 
 .table td {
-    vertical-align: middle;
+  vertical-align: middle;
 }
 
-
 .form__button_row {
   button {
     width: 100%;

src/components/Sidebar/Sidebar.tsx

@@ -11,6 +11,18 @@ 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.";
+export const SIDEBAR_ISSUES_HEADER = "Report Issues";
+export const SIDEBAR_ISSUES_BODY =
+  "If you find any issues with the app, please report them on the GitHub issues page.";
+export const SIDEBAR_ISSUES_LINK =
+  "https://github.com/AccessiTech/tracker/issues";
+export const SIDEBAR_FEATURES_HEADER = "Feature Requests";
+export const SIDEBAR_FEATURES_BODY =
+  "If you have any feature requests, please feel free to start (or join) a discussion on Github!";
+export const SIDEBAR_FEATURES_LINK =
+  "https://github.com/AccessiTech/tracker/discussions";
+export const GITHUB_ISSUES = "GitHub Issues";
+export const GITHUB_DISCUSSIONS = "GitHub Discussions";
 
 /**
  * Sidebar Component
@@ -39,11 +51,43 @@ export const Sidebar: FC<SidebarProps> = ({
       <Offcanvas.Header closeButton>
         <Offcanvas.Title as="h2">{SIDEBAR_HEADER}</Offcanvas.Title>
       </Offcanvas.Header>
-      <Offcanvas.Body>
+      <Offcanvas.Body className="sidebar__body_container">
         <p>{SIDEBAR_BODY}</p>
         <h3>{SIDEBAR_DATA_HEADER}</h3>
         <p>{SIDEBAR_DATA_BODY_1}</p>
         <p>{SIDEBAR_DATA_BODY_2}</p>
+        <h3>{SIDEBAR_ISSUES_HEADER}</h3>
+        <p>
+          {SIDEBAR_ISSUES_BODY}
+          <a
+            href={SIDEBAR_ISSUES_LINK}
+            title={GITHUB_ISSUES}
+            target={"_blank"}
+            rel={"noreferrer"}
+          >
+            <i
+              className="fa fa-arrow-up-right-from-square"
+              aria-hidden="true"
+            ></i>
+            <span className="visible_hidden">{GITHUB_ISSUES}</span>
+          </a>
+        </p>
+        <h3>{SIDEBAR_FEATURES_HEADER}</h3>
+        <p>
+          {SIDEBAR_FEATURES_BODY}
+          <a
+            href={SIDEBAR_FEATURES_LINK}
+            title={GITHUB_DISCUSSIONS}
+            target={"_blank"}
+            rel={"noreferrer"}
+          >
+            <i
+              className="fa fa-arrow-up-right-from-square"
+              aria-hidden="true"
+            ></i>
+            <span className="visible_hidden">{GITHUB_DISCUSSIONS}</span>
+          </a>
+        </p>
       </Offcanvas.Body>
       <p className="sidebar__p_version text-muted">
         Version: {process.env.REACT_APP_VERSION}

src/components/Sidebar/sidebar.scss

@@ -1,4 +1,13 @@
+@import "../../variables.scss";
 .sidebar__p_version {
   font-size: 0.9rem;
   margin: 1rem 1rem 0.75rem;
 }
+
+.sidebar__body_container {
+  p {
+    a {
+      padding: 0 ($spacer / 2);
+    }
+  }
+}