Add items to main navigation: Give us feedback, latest changes, docs

packages/frontend/src/navigation/Nav.tsx

@@ -6,6 +6,9 @@ import {
   faMoon,
   faSun,
   faCalendarAlt,
+  faBullhorn,
+  faFire,
+  faFileLines,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Menu } from '@headlessui/react';
@@ -69,18 +72,49 @@ export const Nav = (): JSX.Element => {
           </ul>
         </div>
 
-        <div className="flex h-12 m-4 mt-auto">
+        <div className="flex flex-col justify-end mt-auto h-60">
+          <ul>
+            <NavItem
+              icon={faBullhorn}
+              description="Give us feedback"
+              to="https://praise.sleekplan.app/"
+              iconClassName="text-themecolor-3"
+            />
+            <NavItem
+              icon={faFire}
+              description="Latest changes"
+              to="https://github.com/commons-stack/praise/releases"
+              iconClassName="text-themecolor-3"
+            />
+            <NavItem
+              icon={faFileLines}
+              description="Docs"
+              to="https://givepraise.xyz/docs/"
+              iconClassName="text-themecolor-3"
+            />
+          </ul>
           <div
-            className="items-center justify-center hidden h-12 border-2 rounded-lg cursor-pointer dark:flex dark:text-white text-themecolor-3 grow dark:border-slate-700"
+            className="hidden px-2 py-3 m-3 border-2 rounded-lg cursor-pointer dark:flex border-slate-700"
             onClick={(): void => handleTheme('Light')}
           >
-            <FontAwesomeIcon icon={faSun} size="lg" />
+            <div className="inline-block w-8 px-1 text-center text-themecolor-3">
+              <FontAwesomeIcon icon={faSun} size="lg" />
+            </div>
+            <div className="flex-auto inline-block whitespace-nowrap">
+              Light mode
+            </div>
           </div>
+
           <div
-            className="flex items-center justify-center h-12 border-2 rounded-lg cursor-pointer dark:hidden dark:text-white text-themecolor-3 grow dark:border-slate-700"
+            className="flex px-2 py-3 m-3 border-2 rounded-lg cursor-pointer dark:hidden "
             onClick={(): void => handleTheme('Dark')}
           >
-            <FontAwesomeIcon icon={faMoon} size="lg" />
+            <div className="inline-block w-8 pl-1 text-center text-themecolor-3">
+              <FontAwesomeIcon icon={faMoon} size="lg" />
+            </div>
+            <div className="flex-auto inline-block whitespace-nowrap">
+              Dark mode
+            </div>
           </div>
         </div>
 

packages/frontend/src/navigation/NavItem.tsx

@@ -1,37 +1,52 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { NavLink } from 'react-router-dom';
+import { classNames } from '../utils';
 
 interface NavProps {
   icon?: IconProp;
   description: string;
   to: string;
   replace?: boolean;
+  iconClassName?: string;
+  rounded?: boolean;
 }
 
 export const NavItem = ({
   icon,
   description,
   to,
   replace = false,
+  iconClassName,
+  rounded = false,
 }: NavProps): JSX.Element => {
+  const url = to.startsWith('http') ? { pathname: to } : to;
+  const target = to.startsWith('http') ? '_blank' : '';
+
   return (
     <li className="group">
       <NavLink
-        to={to}
+        to={url}
         className={(isActive): string =>
-          `relative group-first:rounded-t-lg group-last:rounded-b-lg px-5 py-2 cursor-pointer no-underline flex items-center ${
+          `relative px-5 py-2 cursor-pointer no-underline flex items-center ${
             isActive
               ? ' bg-warm-gray-100 dark:bg-slate-700'
               : ' hover:bg-warm-gray-100 dark:hover:bg-slate-700'
+          } ${
+            rounded ? 'group-first:rounded-t-lg group-last:rounded-b-lg' : ''
           }`
         }
         id={to.substring(1) + '-nav-button'}
         replace={replace}
+        target={target}
       >
         {icon && (
           <div className="inline-block w-8 text-center">
-            <FontAwesomeIcon icon={icon} size="1x" className="inline-block" />
+            <FontAwesomeIcon
+              icon={icon}
+              size="1x"
+              className={classNames('inline-block', iconClassName)}
+            />
           </div>
         )}
         <div className="flex-auto inline-block my-1 whitespace-nowrap">

packages/frontend/src/pages/Periods/Details/PeriodDetailsPage.tsx

@@ -107,6 +107,7 @@ export const PeriodDetailsPage = (): JSX.Element | null => {
                 description="Receivers"
                 icon={faHeartbeat}
                 replace
+                rounded
               />
               <NavItem
                 to={`${url}/quantifiers`}
@@ -125,6 +126,7 @@ export const PeriodDetailsPage = (): JSX.Element | null => {
                 description="Analytics"
                 icon={faChartBar}
                 replace
+                rounded
               />
             </ul>
           </SubPageNav>

packages/frontend/src/pages/Settings/SettingsPage.tsx

@@ -57,6 +57,7 @@ const SettingsPage = (): JSX.Element | null => {
                 to={`${url}/application`}
                 description="Application"
                 replace
+                rounded
               />
               <NavItem
                 to={`${url}/period`}
@@ -72,6 +73,7 @@ const SettingsPage = (): JSX.Element | null => {
                 to={`${url}/custom-export`}
                 description="Custom Export"
                 replace
+                rounded
               />
             </ul>
           </SubPageNav>