Skip to content

Commit

Permalink
Merge pull request #596 from commons-stack/add_items_to_main_navigation
Browse files Browse the repository at this point in the history
Add items to main navigation: Give us feedback, latest changes, docs
  • Loading branch information
kristoferlund authored Sep 26, 2022
2 parents 4f820c4 + 63d7b65 commit ce87188
Show file tree
Hide file tree
Showing 4 changed files with 61 additions and 8 deletions.
44 changes: 39 additions & 5 deletions packages/frontend/src/navigation/Nav.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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>

Expand Down
21 changes: 18 additions & 3 deletions packages/frontend/src/navigation/NavItem.tsx
Original file line number Diff line number Diff line change
@@ -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">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,7 @@ export const PeriodDetailsPage = (): JSX.Element | null => {
description="Receivers"
icon={faHeartbeat}
replace
rounded
/>
<NavItem
to={`${url}/quantifiers`}
Expand All @@ -125,6 +126,7 @@ export const PeriodDetailsPage = (): JSX.Element | null => {
description="Analytics"
icon={faChartBar}
replace
rounded
/>
</ul>
</SubPageNav>
Expand Down
2 changes: 2 additions & 0 deletions packages/frontend/src/pages/Settings/SettingsPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ const SettingsPage = (): JSX.Element | null => {
to={`${url}/application`}
description="Application"
replace
rounded
/>
<NavItem
to={`${url}/period`}
Expand All @@ -72,6 +73,7 @@ const SettingsPage = (): JSX.Element | null => {
to={`${url}/custom-export`}
description="Custom Export"
replace
rounded
/>
</ul>
</SubPageNav>
Expand Down

0 comments on commit ce87188

Please sign in to comment.