diff options
author | Sebastian <sebasjm@gmail.com> | 2022-02-16 15:15:47 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-02-16 15:16:21 -0300 |
commit | 3e92c2496868d7905b58be87925f5835965c6bda (patch) | |
tree | 6a9a7967c498cca283ea138766f5b49c9c41c73b /packages/taler-wallet-webextension/src/NavigationBar.tsx | |
parent | bc1c33e1ce4ea760fb87de0dee66ca22cce9b7b7 (diff) | |
download | wallet-core-3e92c2496868d7905b58be87925f5835965c6bda.tar.xz |
settings new design
Diffstat (limited to 'packages/taler-wallet-webextension/src/NavigationBar.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/NavigationBar.tsx | 81 |
1 files changed, 49 insertions, 32 deletions
diff --git a/packages/taler-wallet-webextension/src/NavigationBar.tsx b/packages/taler-wallet-webextension/src/NavigationBar.tsx index 9aaeb0d18..6a010f63a 100644 --- a/packages/taler-wallet-webextension/src/NavigationBar.tsx +++ b/packages/taler-wallet-webextension/src/NavigationBar.tsx @@ -25,8 +25,9 @@ * Imports. */ import { i18n } from "@gnu-taler/taler-util"; -import { ComponentChildren, h, VNode } from "preact"; -import { PopupNavigation } from "./components/styled"; +import { VNode, h } from "preact"; +import { JustInDevMode } from "./components/JustInDevMode"; +import { NavigationHeader, NavigationHeaderHolder } from "./components/styled"; export enum Pages { welcome = "/welcome", @@ -55,40 +56,56 @@ export enum Pages { cta_withdraw = "/cta/withdraw", } -interface TabProps { - target: string; - current?: string; - children?: ComponentChildren; -} - -function Tab(props: TabProps): VNode { - let cssClass = ""; - if (props.current?.startsWith(props.target)) { - cssClass = "active"; - } +export function PopupNavBar({ path = "" }: { path?: string }): VNode { + const innerUrl = chrome.runtime + ? new URL(chrome.runtime.getURL("/static/wallet.html#/settings")).href + : "#"; return ( - <a href={props.target} class={cssClass}> - {props.children} - </a> + <NavigationHeader> + <a + href="/balance" + class={path.startsWith("/balance") ? "active" : ""} + >{i18n.str`Balance`}</a> + <a + href="/backup" + class={path.startsWith("/backup") ? "active" : ""} + >{i18n.str`Backup`}</a> + <a /> + <a href={innerUrl} target="_blank" rel="noreferrer"> + <div class="settings-icon" title="Settings" /> + </a> + </NavigationHeader> ); } -export function NavBar({ - devMode, - path, -}: { - path: string; - devMode: boolean; -}): VNode { +export function WalletNavBar({ path = "" }: { path?: string }): VNode { return ( - <PopupNavigation devMode={devMode}> - <div> - <Tab target="/balance" current={path}>{i18n.str`Balance`}</Tab> - <Tab target="/pending" current={path}>{i18n.str`Pending`}</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> + <NavigationHeaderHolder> + <NavigationHeader> + <a + href="/balance" + class={path.startsWith("/balance") ? "active" : ""} + >{i18n.str`Balance`}</a> + <a + href="/backup" + class={path.startsWith("/backup") ? "active" : ""} + >{i18n.str`Backup`}</a> + + <JustInDevMode> + <a + href="/dev" + class={path.startsWith("/dev") ? "active" : ""} + >{i18n.str`Dev`}</a> + </JustInDevMode> + + <a /> + <a + href="/settings" + class={path.startsWith("/settings") ? "active" : ""} + > + <div class="settings-icon" title="Settings" /> + </a> + </NavigationHeader> + </NavigationHeaderHolder> ); } |