Refactor Indicator component (#2453)

* Fix inconsistent indicator style in dropdown, offcanvas

* Fix missing offcanvas indicator

* Refactor indicators

---------

Co-authored-by: Keyan <34140557+huumn@users.noreply.github.com>

components/nav/common.js

@@ -160,8 +160,11 @@ export function NavWalletSummary ({ className }) {
   )
 }
 
-export const Indicator = () => {
+export const Indicator = ({ show, children }) => {
   return (
+    <div className='w-fit-content position-relative'>
+      {children}
+      {show && (
         <span className='d-inline-block p-1'>
           <span
             className='position-absolute p-1 bg-secondary'
@@ -170,6 +173,8 @@ export const Indicator = () => {
             <span className='invisible'>{' '}</span>
           </span>
         </span>
+      )}
+    </div>
   )
 }
 
@@ -186,8 +191,7 @@ export function MeDropdown ({ me, dropNavKey }) {
         <Dropdown.Toggle className='nav-link nav-item fw-normal' id='profile' variant='custom'>
           <div className='d-flex align-items-center'>
             <Nav.Link eventKey={me.name} as='span' className='p-0 position-relative'>
-              {`@${me.name}`}
+              <Indicator show={indicator}>@{me.name}</Indicator>
-              {indicator && <Indicator />}
             </Nav.Link>
             <Badges user={me} />
           </div>
@@ -195,10 +199,7 @@ 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'>
+              <Indicator show={profileIndicator}>profile</Indicator>
-                profile
-                {profileIndicator && <Indicator />}
-              </div>
             </Dropdown.Item>
           </Link>
           <Link href={'/' + me.name + '/bookmarks'} passHref legacyBehavior>
@@ -206,10 +207,7 @@ export function MeDropdown ({ me, dropNavKey }) {
           </Link>
           <Link href='/wallets' passHref legacyBehavior>
             <Dropdown.Item eventKey='wallets'>
-              <div className='w-fit-content position-relative'>
+              <Indicator show={walletIndicator}>wallets</Indicator>
-                wallets
-                {walletIndicator && <Indicator />}
-              </div>
             </Dropdown.Item>
           </Link>
           <Link href='/credits' passHref legacyBehavior>

components/nav/mobile/offcanvas.js

@@ -32,11 +32,7 @@ export default function OffCanvas ({ me, dropNavKey }) {
 
   return (
     <>
-      <div className='position-relative'>
+      <Indicator show={indicator}><MeImage onClick={handleShow} /></Indicator>
-        <MeImage onClick={handleShow} />
-        {indicator && <Indicator />}
-      </div>
-
       <Offcanvas className={canvasStyles.offcanvas} show={show} onHide={handleClose} placement='end'>
         <Offcanvas.Header closeButton>
           <Offcanvas.Title><NavWalletSummary /></Offcanvas.Title>
@@ -57,10 +53,7 @@ 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'>
+                      <Indicator show={profileIndicator}>profile</Indicator>
-                        profile
-                        {profileIndicator && <Indicator />}
-                      </div>
                     </Dropdown.Item>
                   </Link>
                   <Link href={'/' + me.name + '/bookmarks'} passHref legacyBehavior>
@@ -68,10 +61,7 @@ export default function OffCanvas ({ me, dropNavKey }) {
                   </Link>
                   <Link href='/wallets' passHref legacyBehavior>
                     <Dropdown.Item eventKey='wallets'>
-                      <div className='w-fit-content position-relative'>
+                      <Indicator show={walletIndicator}>wallets</Indicator>
-                        wallets
-                        {walletIndicator && <Indicator />}
-                      </div>
                     </Dropdown.Item>
                   </Link>
                   <Link href='/credits' passHref legacyBehavior>
@@ -101,10 +91,7 @@ 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'>
+                      <Indicator show={indicator}>@{me?.name || 'anon'}</Indicator>
-                        @{me?.name || 'anon'}
-                        {indicator && <Indicator />}
-                      </div>
                     </div>
                   </Link>
                 </Nav>