Refactor indicators (#2032)

components/nav/common.js

@@ -165,8 +165,32 @@ export function NavWalletSummary ({ className }) {
   )
 }
 
+export const Indicator = ({ superscript }) => {
+  if (superscript) {
+    return (
+      <span className='d-inline-block p-1'>
+        <span
+          className='position-absolute p-1 bg-secondary'
+          style={{ top: '5px', right: '0px', height: '5px', width: '5px' }}
+        >
+          <span className='invisible'>{' '}</span>
+        </span>
+      </span>
+    )
+  }
+
+  return (
+    <div className='p-1 d-inline-block bg-secondary ms-1'>
+      <span className='invisible'>{' '}</span>
+    </div>
+  )
+}
+
 export function MeDropdown ({ me, dropNavKey }) {
   if (!me) return null
+
+  const profileIndicator = !me.bioId
+
   return (
     <div className=''>
       <Dropdown className={styles.dropdown} align='end'>
@@ -174,12 +198,7 @@ export function MeDropdown ({ me, dropNavKey }) {
           <div className='d-flex align-items-center'>
             <Nav.Link eventKey={me.name} as='span' className='p-0 position-relative'>
               {`@${me.name}`}
-              {!me.bioId &&
+              {profileIndicator && <Indicator superscript />}
-                <span className='d-inline-block p-1'>
-                  <span className='position-absolute p-1 bg-secondary' style={{ top: '5px', right: '0px', height: '5px', width: '5px' }}>
-                    <span className='invisible'>{' '}</span>
-                  </span>
-                </span>}
             </Nav.Link>
             <Badges user={me} />
           </div>
@@ -188,10 +207,7 @@ export function MeDropdown ({ me, dropNavKey }) {
           <Link href={'/' + me.name} passHref legacyBehavior>
             <Dropdown.Item active={me.name === dropNavKey}>
               profile
-              {me && !me.bioId &&
+              {profileIndicator && <Indicator />}
-                <div className='p-1 d-inline-block bg-secondary ms-1'>
-                  <span className='invisible'>{' '}</span>
-                </div>}
             </Dropdown.Item>
           </Link>
           <Link href={'/' + me.name + '/bookmarks'} passHref legacyBehavior>

components/nav/mobile/offcanvas.js

@@ -2,7 +2,7 @@ import { useState } from 'react'
 import { Dropdown, Image, Nav, Navbar, Offcanvas } from 'react-bootstrap'
 import { MEDIA_URL } from '@/lib/constants'
 import Link from 'next/link'
-import { LoginButtons, LogoutDropdownItem, NavWalletSummary } from '../common'
+import { Indicator, LoginButtons, LogoutDropdownItem, NavWalletSummary } from '../common'
 import AnonIcon from '@/svgs/spy-fill.svg'
 import styles from './footer.module.css'
 import canvasStyles from './offcanvas.module.css'
@@ -25,6 +25,8 @@ export default function OffCanvas ({ me, dropNavKey }) {
       )
     : <span className='text-muted pointer'><AnonIcon onClick={onClick} width='22' height='22' /></span>
 
+  const profileIndicator = me && !me.bioId
+
   return (
     <>
       <MeImage onClick={handleShow} />
@@ -50,10 +52,7 @@ export default function OffCanvas ({ me, dropNavKey }) {
                   <Link href={'/' + me.name} passHref legacyBehavior>
                     <Dropdown.Item active={me.name === dropNavKey}>
                       profile
-                      {me && !me.bioId &&
+                      {profileIndicator && <Indicator />}
-                        <div className='p-1 d-inline-block bg-secondary ms-1'>
-                          <span className='invisible'>{' '}</span>
-                        </div>}
                     </Dropdown.Item>
                   </Link>
                   <Link href={'/' + me.name + '/bookmarks'} passHref legacyBehavior>