hide nav on mobile

src/assets/icons/back.svg

@@ -0,0 +1,3 @@
+<svg width="36" height="36" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M17.546 8 8 17.546l9.546 9.546" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/icons/big-receive.svg

@@ -0,0 +1,3 @@
+<svg width="36" height="36" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.75 27.75v-13.5a1.5 1.5 0 0 1 3 0v9.879L26.281 7.597a1.5 1.5 0 0 1 2.122 2.122L11.87 26.25h9.879a1.5 1.5 0 0 1 0 3H8.25a1.5 1.5 0 0 1-1.5-1.5Z" fill="#fff"/>
+</svg>

src/assets/svg/Back.tsx

@@ -0,0 +1,6 @@
+export function Back() {
+    return (<svg width="36" height="36" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M17.546 8 8 17.546l9.546 9.546" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
+    </svg>
+    )
+}

src/components/App.tsx

@@ -3,9 +3,9 @@ import { DefaultMain, NodeManagerGuard, SafeArea } from "~/components/layout";
 import BalanceBox from "~/components/BalanceBox";
 import NavBar from "~/components/NavBar";
 import ReloadPrompt from "~/components/Reload";
-import { Scan } from '~/assets/svg/Scan';
 import { A } from 'solid-start';
 import { Activity } from './Activity';
+import settings from '~/assets/icons/settings.svg';
 
 export default function App() {
     return (
@@ -14,7 +14,7 @@ export default function App() {
                 <DefaultMain>
                     <header class="w-full flex justify-between items-center mt-4 mb-2">
                         <img src={logo} class="h-10" alt="logo" />
-                        <A class="p-2 hover:bg-white/5 rounded-lg active:bg-m-blue" href="scanner"><Scan /></A>
+                        <A class="md:hidden p-2 hover:bg-white/5 rounded-lg active:bg-m-blue" href="/settings"><img src={settings} alt="Settings" /></A>
                     </header>
                     <ReloadPrompt />
                     <BalanceBox />

src/components/NavBar.tsx

@@ -1,18 +1,18 @@
 import mutiny_m from '~/assets/icons/m.svg';
-// import scan from '~/assets/icons/scan.svg';
 import airplane from '~/assets/icons/airplane.svg';
 import settings from '~/assets/icons/settings.svg';
+import receive from '~/assets/icons/big-receive.svg';
 
 import { A } from "solid-start";
 
-type ActiveTab = 'home' | 'scan' | 'send' | 'settings' | 'none';
+type ActiveTab = 'home' | 'scan' | 'send' | 'receive' | 'settings' | 'none';
 
 export default function NavBar(props: { activeTab: ActiveTab }) {
-    const activeStyle = 'h-full border-t-2 border-b-2 border-b-sidebar-gray flex flex-col justify-center md:border-t-0 md:border-b-0 md:p-2 md:bg-black md:rounded-lg'
+    const activeStyle = 'border-t-0 border-b-0 p-2 bg-black rounded-lg'
-    const inactiveStyle = "md:p-2 md:hover:bg-white/5 md:rounded-lg md:active:bg-m-blue"
+    const inactiveStyle = "p-2 hover:bg-white/5 rounded-lg active:bg-m-blue"
     return (
-        <nav class='backdrop-blur-xl fixed bottom-0 md:shadow-none shadow-above z-40 w-full safe-bottom md:top-0 md:bottom-auto md:left-0 md:w-auto md:h-full'>
+        <nav class='hidden md:block fixed shadow-none z-40 safe-bottom top-0 bottom-auto left-0 h-full'>
-            <ul class='h-16 flex justify-between px-16 items-center md:flex-col md:justify-start md:gap-4 md:px-4 md:mt-4'>
+            <ul class='h-16 flex flex-col justify-start gap-4 px-4 mt-4'>
                 <li class={props.activeTab === "home" ? activeStyle : inactiveStyle}>
                     <A href="/">
                         <img src={mutiny_m} alt="home" />
@@ -23,6 +23,11 @@ export default function NavBar(props: { activeTab: ActiveTab }) {
                         <img src={airplane} alt="send" />
                     </A>
                 </li>
+                <li class={props.activeTab === "receive" ? activeStyle : inactiveStyle}>
+                    <A href="/receive">
+                        <img src={receive} alt="receive" />
+                    </A>
+                </li>
                 <li class={props.activeTab === "settings" ? activeStyle : inactiveStyle}>
                     <A href="/settings">
                         <img src={settings} alt="settings" />

src/components/layout/BackButton.tsx

@@ -0,0 +1,6 @@
+import { A } from "solid-start";
+import { Back } from "~/assets/svg/Back";
+
+export function BackButton(props: { href?: string, title?: string }) {
+    return (<A href={props.href ? props.href : "/"} class="text-m-red text-xl font-semibold no-underline md:hidden flex items-center"><Back />{props.title ? props.title : "Home"}</A>)
+}

src/components/layout/index.tsx

@@ -89,7 +89,7 @@ const LoadingSpinner = (props: { big?: boolean }) => {
 const Hr = () => <Separator.Root class="my-4 border-white/20" />
 
 const LargeHeader: ParentComponent = (props) => {
-    return (<h1 class="text-4xl font-semibold uppercase border-b-2 border-b-white my-4">{props.children}</h1>)
+    return (<h1 class="text-4xl font-semibold uppercase border-b-2 border-b-white mt-2 mb-4">{props.children}</h1>)
 }
 
 const VStack: ParentComponent<{ biggap?: boolean }> = (props) => {

src/routes/Admin.tsx

@@ -2,12 +2,14 @@ import { DeleteEverything } from "~/components/DeleteEverything";
 import KitchenSink from "~/components/KitchenSink";
 import NavBar from "~/components/NavBar";
 import { Card, DefaultMain, LargeHeader, NodeManagerGuard, SafeArea, SmallHeader, VStack } from "~/components/layout";
+import { BackButton } from "~/components/layout/BackButton";
 
 export default function Admin() {
     return (
         <NodeManagerGuard>
             <SafeArea>
                 <DefaultMain>
+                    <BackButton href="/settings" title="Settings" />
                     <LargeHeader>Admin</LargeHeader>
                     <VStack>
                         <Card><p>If you know what you're doing you're in the right place!</p></Card>

src/routes/Receive.tsx

@@ -14,6 +14,7 @@ import mempoolTxUrl from "~/utils/mempoolTxUrl";
 import party from '~/assets/party.gif';
 import { Amount } from "~/components/Amount";
 import { FullscreenModal } from "~/components/layout/FullscreenModal";
+import { BackButton } from "~/components/layout/BackButton";
 
 type OnChainTx = {
     transaction: {
@@ -181,6 +182,7 @@ export default function Receive() {
         <NodeManagerGuard>
             <SafeArea>
                 <DefaultMain>
+                    <BackButton />
                     <LargeHeader>Receive Bitcoin</LargeHeader>
                     <Switch>
                         <Match when={!unified() || receiveState() === "edit"}>
@@ -246,7 +248,7 @@ export default function Receive() {
                         </Match>
                     </Switch>
                 </DefaultMain>
-                <NavBar activeTab="none" />
+                <NavBar activeTab="receive" />
             </SafeArea >
         </NodeManagerGuard>
     )

src/routes/Send.tsx

@@ -16,6 +16,7 @@ import eify from "~/utils/eify";
 import { FullscreenModal } from "~/components/layout/FullscreenModal";
 import handshake from "~/assets/handshake.png";
 import mempoolTxUrl from "~/utils/mempoolTxUrl";
+import { BackButton } from "~/components/layout/BackButton";
 
 type SendSource = "lightning" | "onchain";
 
@@ -168,6 +169,7 @@ export default function Send() {
         <NodeManagerGuard>
             <SafeArea>
                 <DefaultMain>
+                    <BackButton />
                     <LargeHeader>Send Bitcoin</LargeHeader>
                     {/* <SentModal details={sentDetails()} /> */}
                     <FullscreenModal title="Sent!" open={!!sentDetails()} setOpen={(open: boolean) => { if (!open) setSentDetails(undefined) }} onConfirm={() => setSentDetails(undefined)}>

src/routes/Settings.tsx

@@ -1,4 +1,5 @@
 import { ButtonLink, DefaultMain, LargeHeader, NodeManagerGuard, SafeArea, VStack } from "~/components/layout";
+import { BackButton } from "~/components/layout/BackButton";
 import NavBar from "~/components/NavBar";
 import { SeedWords } from "~/components/SeedWords";
 import { SettingsStringsEditor } from "~/components/SettingsStringsEditor";
@@ -11,6 +12,7 @@ export default function Settings() {
         <NodeManagerGuard>
             <SafeArea>
                 <DefaultMain>
+                    <BackButton />
                     <LargeHeader>Settings</LargeHeader>
                     <VStack biggap>
                         <VStack>