wallet-core/packages/taler-wallet-webextension/src/NavigationBar.tsx

/*
 This file is part of TALER
 (C) 2016 GNUnet e.V.

 TALER is free software; you can redistribute it and/or modify it under the
 terms of the GNU General Public License as published by the Free Software
 Foundation; either version 3, or (at your option) any later version.

 TALER is distributed in the hope that it will be useful, but WITHOUT ANY
 WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 A PARTICULAR PURPOSE.  See the GNU General Public License for more details.

 You should have received a copy of the GNU General Public License along with
 TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
 */

/**
 * Popup shown to the user when they click
 * the Taler browser action button.
 *
 * @author Florian Dold
 */

/**
 * Imports.
 */
import { i18n } from "@gnu-taler/taler-util";
import { ComponentChildren, JSX, h } from "preact";
import Match from "preact-router/match";
import { useDevContext } from "./context/devContext";
import { PopupNavigation } from './components/styled'

export enum Pages {
  welcome = '/welcome',
  balance = '/balance',
  manual_withdraw = '/manual-withdraw',
  settings = '/settings',
  dev = '/dev',
  backup = '/backup',
  history = '/history',
  transaction = '/transaction/:tid',
  provider_detail = '/provider/:pid',
  provider_add = '/provider/add',

  reset_required = '/reset-required',
  payback = '/payback',
  return_coins = '/return-coins',

  pay = '/pay',
  refund = '/refund',
  tips = '/tips',
  withdraw = '/withdraw',
}

interface TabProps {
  target: string;
  current?: string;
  children?: ComponentChildren;
}

function Tab(props: TabProps): JSX.Element {
  let cssClass = "";
  if (props.current?.startsWith(props.target)) {
    cssClass = "active";
  }
  return (
    <a href={props.target} class={cssClass}>
      {props.children}
    </a>
  );
}

export function NavBar({ devMode, path }: { path: string, devMode: boolean }) {
  return <PopupNavigation devMode={devMode}>
    <div>
      <Tab target="/balance" current={path}>{i18n.str`Balance`}</Tab>
      <Tab target="/history" current={path}>{i18n.str`History`}</Tab>
      <Tab target="/backup" current={path}>{i18n.str`Backup`}</Tab>
      <Tab target="/settings" current={path}>{i18n.str`Settings`}</Tab>
      {devMode && <Tab target="/dev" current={path}>{i18n.str`Dev`}</Tab>}
    </div>
  </PopupNavigation>
}

export function WalletNavBar() {
  const { devMode } = useDevContext()
  return <Match>{({ path }: any) => {
    console.log("path", path)
    return <NavBar devMode={devMode} path={path} />
  }}</Match>
}