Indicator fixes: inconsistent CSS and missing indicator (#2452)

* Fix inconsistent indicator style in dropdown, offcanvas

* Fix missing offcanvas indicator

components/nav/common.js

@@ -160,8 +160,7 @@ export function NavWalletSummary ({ className }) {
   )
 }
 
-export const Indicator = ({ superscript }) => {
+export const Indicator = () => {
-  if (superscript) {
   return (
     <span className='d-inline-block p-1'>
       <span
@@ -172,13 +171,6 @@ export const Indicator = ({ superscript }) => {
       </span>
     </span>
   )
-  }
-
-  return (
-    <div className='p-1 d-inline-block bg-secondary ms-1'>
-      <span className='invisible'>{' '}</span>
-    </div>
-  )
 }
 
 export function MeDropdown ({ me, dropNavKey }) {
@@ -195,7 +187,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}`}
-              {indicator && <Indicator superscript />}
+              {indicator && <Indicator />}
             </Nav.Link>
             <Badges user={me} />
           </div>
@@ -203,8 +195,10 @@ export function MeDropdown ({ me, dropNavKey }) {
         <Dropdown.Menu>
           <Link href={'/' + me.name} passHref legacyBehavior>
             <Dropdown.Item active={me.name === dropNavKey}>
+              <div className='w-fit-content position-relative'>
                 profile
                 {profileIndicator && <Indicator />}
+              </div>
             </Dropdown.Item>
           </Link>
           <Link href={'/' + me.name + '/bookmarks'} passHref legacyBehavior>
@@ -212,8 +206,10 @@ export function MeDropdown ({ me, dropNavKey }) {
           </Link>
           <Link href='/wallets' passHref legacyBehavior>
             <Dropdown.Item eventKey='wallets'>
+              <div className='w-fit-content position-relative'>
                 wallets
                 {walletIndicator && <Indicator />}
+              </div>
             </Dropdown.Item>
           </Link>
           <Link href='/credits' passHref legacyBehavior>

components/nav/mobile/offcanvas.js

@@ -28,10 +28,14 @@ export default function OffCanvas ({ me, dropNavKey }) {
 
   const profileIndicator = me && !me.bioId
   const walletIndicator = useWalletIndicator()
+  const indicator = profileIndicator || walletIndicator
 
   return (
     <>
+      <div className='position-relative'>
         <MeImage onClick={handleShow} />
+        {indicator && <Indicator />}
+      </div>
 
       <Offcanvas className={canvasStyles.offcanvas} show={show} onHide={handleClose} placement='end'>
         <Offcanvas.Header closeButton>
@@ -53,8 +57,10 @@ export default function OffCanvas ({ me, dropNavKey }) {
                 <>
                   <Link href={'/' + me.name} passHref legacyBehavior>
                     <Dropdown.Item active={me.name === dropNavKey}>
+                      <div className='w-fit-content position-relative'>
                         profile
                         {profileIndicator && <Indicator />}
+                      </div>
                     </Dropdown.Item>
                   </Link>
                   <Link href={'/' + me.name + '/bookmarks'} passHref legacyBehavior>
@@ -62,8 +68,10 @@ export default function OffCanvas ({ me, dropNavKey }) {
                   </Link>
                   <Link href='/wallets' passHref legacyBehavior>
                     <Dropdown.Item eventKey='wallets'>
+                      <div className='w-fit-content position-relative'>
                         wallets
                         {walletIndicator && <Indicator />}
+                      </div>
                     </Dropdown.Item>
                   </Link>
                   <Link href='/credits' passHref legacyBehavior>
@@ -93,7 +101,10 @@ export default function OffCanvas ({ me, dropNavKey }) {
                   <Link href={`/${me?.name || 'anon'}`} className='d-flex flex-row p-2 mt-auto text-muted'>
                     <MeImage />
                     <div className='ms-2'>
+                      <div className='w-fit-content position-relative'>
                         @{me?.name || 'anon'}
+                        {indicator && <Indicator />}
+                      </div>
                     </div>
                   </Link>
                 </Nav>