From ac25e5623f55b96b7230d561f933a3dfe899f5eb Mon Sep 17 00:00:00 2001 From: Nebs Date: Thu, 22 Sep 2022 09:26:30 +0200 Subject: [PATCH 1/3] added new items to main navigation --- packages/frontend/src/navigation/Nav.tsx | 24 ++++++++++++++++++++ packages/frontend/src/navigation/NavItem.tsx | 8 ++++++- 2 files changed, 31 insertions(+), 1 deletion(-) diff --git a/packages/frontend/src/navigation/Nav.tsx b/packages/frontend/src/navigation/Nav.tsx index b17cba70a..5754706bc 100644 --- a/packages/frontend/src/navigation/Nav.tsx +++ b/packages/frontend/src/navigation/Nav.tsx @@ -7,6 +7,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'; @@ -68,6 +71,27 @@ export const Nav = (): JSX.Element => { + + + diff --git a/packages/frontend/src/navigation/NavItem.tsx b/packages/frontend/src/navigation/NavItem.tsx index c5f0588cd..b4f33cea4 100644 --- a/packages/frontend/src/navigation/NavItem.tsx +++ b/packages/frontend/src/navigation/NavItem.tsx @@ -7,6 +7,7 @@ interface NavProps { description: string; to: string; replace?: boolean; + external?: boolean; } export const NavItem = ({ @@ -14,11 +15,15 @@ export const NavItem = ({ description, to, replace = false, + external = false, }: NavProps): JSX.Element => { + const url = !external ? to : { pathname: to }; + const target = !external ? '' : '_blank'; + return (
  • `relative group-first:rounded-t-lg group-last:rounded-b-lg px-5 py-2 cursor-pointer no-underline flex items-center ${ isActive @@ -28,6 +33,7 @@ export const NavItem = ({ } id={to.substring(1) + '-nav-button'} replace={replace} + target={target} > {icon && (
    From 6f8f30256a18f61bb1d4adfd979710b119545b50 Mon Sep 17 00:00:00 2001 From: Nebs Date: Fri, 23 Sep 2022 19:56:53 +0200 Subject: [PATCH 2/3] Created sub menu items for external links, changed light/dark switch --- packages/frontend/src/navigation/Nav.tsx | 58 ++++++++++--------- .../frontend/src/navigation/NavSubItem.tsx | 30 ++++++++++ 2 files changed, 62 insertions(+), 26 deletions(-) create mode 100644 packages/frontend/src/navigation/NavSubItem.tsx diff --git a/packages/frontend/src/navigation/Nav.tsx b/packages/frontend/src/navigation/Nav.tsx index 5754706bc..93df76110 100644 --- a/packages/frontend/src/navigation/Nav.tsx +++ b/packages/frontend/src/navigation/Nav.tsx @@ -20,6 +20,7 @@ import { EthAccount } from '@/components/account/EthAccount'; import { AdminOnly } from '@/components/auth/AdminOnly'; import { Theme } from '@/model/theme'; import { NavItem } from './NavItem'; +import { NavSubItem } from './NavSubItem'; export const Nav = (): JSX.Element => { const setTheme = useSetRecoilState(Theme); @@ -71,42 +72,47 @@ export const Nav = (): JSX.Element => { - - -
    -
    +
    + + +
    handleTheme('Light')} > - +
    + +
    +
    + Light mode +
    +
    handleTheme('Dark')} > - +
    + +
    +
    + Dark mode +
    diff --git a/packages/frontend/src/navigation/NavSubItem.tsx b/packages/frontend/src/navigation/NavSubItem.tsx new file mode 100644 index 000000000..43b2c6624 --- /dev/null +++ b/packages/frontend/src/navigation/NavSubItem.tsx @@ -0,0 +1,30 @@ +import { IconProp } from '@fortawesome/fontawesome-svg-core'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { Link } from 'react-router-dom'; + +interface NavSubItemProps { + icon?: IconProp; + description: string; + to: string; +} + +export const NavSubItem = ({ + icon, + description, + to, +}: NavSubItemProps): JSX.Element => { + return ( +
    + + {icon && ( +
    + +
    + )} +
    + {description} +
    + +
    + ); +}; From 63d7b65b7536d2546f4371936b0389aabc48ed26 Mon Sep 17 00:00:00 2001 From: kristoferlund Date: Sun, 25 Sep 2022 22:27:05 +0200 Subject: [PATCH 3/3] Polishing --- packages/frontend/src/navigation/Nav.tsx | 42 ++++++++++--------- packages/frontend/src/navigation/NavItem.tsx | 21 +++++++--- .../frontend/src/navigation/NavSubItem.tsx | 30 ------------- .../Periods/Details/PeriodDetailsPage.tsx | 2 + .../src/pages/Settings/SettingsPage.tsx | 2 + 5 files changed, 42 insertions(+), 55 deletions(-) delete mode 100644 packages/frontend/src/navigation/NavSubItem.tsx diff --git a/packages/frontend/src/navigation/Nav.tsx b/packages/frontend/src/navigation/Nav.tsx index 0b7ad0844..c1316790f 100644 --- a/packages/frontend/src/navigation/Nav.tsx +++ b/packages/frontend/src/navigation/Nav.tsx @@ -19,7 +19,6 @@ import { EthAccount } from '@/components/account/EthAccount'; import { AdminOnly } from '@/components/auth/AdminOnly'; import { Theme } from '@/model/theme'; import { NavItem } from './NavItem'; -import { NavSubItem } from './NavSubItem'; export const Nav = (): JSX.Element => { const setTheme = useSetRecoilState(Theme); @@ -73,24 +72,29 @@ export const Nav = (): JSX.Element => {
    -
    - - - +
    +
      + + + +
    handleTheme('Light')} >
    @@ -102,7 +106,7 @@ export const Nav = (): JSX.Element => {
    handleTheme('Dark')} >
    diff --git a/packages/frontend/src/navigation/NavItem.tsx b/packages/frontend/src/navigation/NavItem.tsx index b4f33cea4..68e0f6ea1 100644 --- a/packages/frontend/src/navigation/NavItem.tsx +++ b/packages/frontend/src/navigation/NavItem.tsx @@ -1,13 +1,15 @@ 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; - external?: boolean; + iconClassName?: string; + rounded?: boolean; } export const NavItem = ({ @@ -15,20 +17,23 @@ export const NavItem = ({ description, to, replace = false, - external = false, + iconClassName, + rounded = false, }: NavProps): JSX.Element => { - const url = !external ? to : { pathname: to }; - const target = !external ? '' : '_blank'; + const url = to.startsWith('http') ? { pathname: to } : to; + const target = to.startsWith('http') ? '_blank' : ''; return (
  • - `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'} @@ -37,7 +42,11 @@ export const NavItem = ({ > {icon && (
    - +
    )}
    diff --git a/packages/frontend/src/navigation/NavSubItem.tsx b/packages/frontend/src/navigation/NavSubItem.tsx deleted file mode 100644 index 43b2c6624..000000000 --- a/packages/frontend/src/navigation/NavSubItem.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { IconProp } from '@fortawesome/fontawesome-svg-core'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Link } from 'react-router-dom'; - -interface NavSubItemProps { - icon?: IconProp; - description: string; - to: string; -} - -export const NavSubItem = ({ - icon, - description, - to, -}: NavSubItemProps): JSX.Element => { - return ( -
    - - {icon && ( -
    - -
    - )} -
    - {description} -
    - -
    - ); -}; diff --git a/packages/frontend/src/pages/Periods/Details/PeriodDetailsPage.tsx b/packages/frontend/src/pages/Periods/Details/PeriodDetailsPage.tsx index b62397a67..8b22f9732 100644 --- a/packages/frontend/src/pages/Periods/Details/PeriodDetailsPage.tsx +++ b/packages/frontend/src/pages/Periods/Details/PeriodDetailsPage.tsx @@ -107,6 +107,7 @@ export const PeriodDetailsPage = (): JSX.Element | null => { description="Receivers" icon={faHeartbeat} replace + rounded /> { description="Analytics" icon={faChartBar} replace + rounded /> diff --git a/packages/frontend/src/pages/Settings/SettingsPage.tsx b/packages/frontend/src/pages/Settings/SettingsPage.tsx index fdd3f5228..8a9a6e2a0 100644 --- a/packages/frontend/src/pages/Settings/SettingsPage.tsx +++ b/packages/frontend/src/pages/Settings/SettingsPage.tsx @@ -57,6 +57,7 @@ const SettingsPage = (): JSX.Element | null => { to={`${url}/application`} description="Application" replace + rounded /> { to={`${url}/custom-export`} description="Custom Export" replace + rounded />