hide nav on mobile

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 inactiveStyle = "md:p-2 md:hover:bg-white/5 md:rounded-lg md:active:bg-m-blue"
+    const activeStyle = 'border-t-0 border-b-0 p-2 bg-black rounded-lg'
+    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'>
-            <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'>
+        <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 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) => {