offcanvas style and login fixes

components/nav/common.js

@@ -45,7 +45,6 @@ export function noNavSelect ({ path, pathname }) {
     path.startsWith('/referrals') ||
     path.startsWith('/live') ||
     path.startsWith('/settings') ||
-    path.startsWith('/referrals') ||
     path.startsWith('/invites') ||
     path.startsWith('/stackers') ||
     path.startsWith('/satistics') ||
@@ -241,7 +240,13 @@ export function MeDropdown ({ me, dropNavKey }) {
   )
 }
 
-export function SignUpButton ({ handleLogin, className = 'py-0' }) {
+export function SignUpButton ({ className = 'py-0' }) {
+  const router = useRouter()
+  const handleLogin = useCallback(async pathname => await router.push({
+    pathname,
+    query: { callbackUrl: window.location.origin + router.asPath }
+  }), [router])
+
   return (
     <Button
       className={classNames('align-items-center ps-2 pe-3', className)}
@@ -258,7 +263,7 @@ export function SignUpButton ({ handleLogin, className = 'py-0' }) {
   )
 }
 
-export function LoginButtons () {
+export default function LoginButton ({ className }) {
   const router = useRouter()
   const handleLogin = useCallback(async pathname => await router.push({
     pathname,
@@ -266,7 +271,6 @@ export function LoginButtons () {
   }), [router])
 
   return (
-    <>
     <Button
       className='align-items-center px-3 py-1 mb-2'
       id='signup'
@@ -276,7 +280,14 @@ export function LoginButtons () {
     >
       login
     </Button>
-      <SignUpButton handleLogin={handleLogin} className='py-1' />
+  )
+}
+
+export function LoginButtons () {
+  return (
+    <>
+      <LoginButton />
+      <SignUpButton className='py-1' />
     </>
   )
 }

components/nav/mobile/offcanvas.js

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Dropdown, Image, Offcanvas } from 'react-bootstrap'
+import { Dropdown, Image, Nav, Navbar, Offcanvas } from 'react-bootstrap'
 import { MEDIA_URL } from '@/lib/constants'
 import Link from 'next/link'
 import { useServiceWorker } from '@/components/serviceworker'
@@ -32,7 +32,7 @@ export default function OffCanvas ({ me, dropNavKey }) {
         <Offcanvas.Header closeButton>
           <Offcanvas.Title><NavWalletSummary /></Offcanvas.Title>
         </Offcanvas.Header>
-        <Offcanvas.Body>
+        <Offcanvas.Body className='pb-0'>
           <div style={{
             '--bs-dropdown-item-padding-y': '.5rem',
             '--bs-dropdown-item-padding-x': 0,
@@ -94,12 +94,16 @@ export default function OffCanvas ({ me, dropNavKey }) {
                 </>
                 )
               : <LoginButtons />}
+            <Navbar className='container d-flex flex-row px-0 p-2 mt-auto text-muted'>
+              <Nav>
                 <Link href={`/${me?.name || 'anon'}`} className='d-flex flex-row p-2 mt-auto text-muted'>
                   <MeImage />
                   <div className='ms-2'>
                     @{me?.name || 'anon'}
                   </div>
                 </Link>
+              </Nav>
+            </Navbar>
           </div>
         </Offcanvas.Body>
       </Offcanvas>