Merge pull request #47 from xch-dev/mobile-nav-parity

Keep nav items in sync

src/components/Header.tsx

@@ -2,17 +2,12 @@ import { usePeers } from '@/contexts/PeerContext';
 import { useWallet } from '@/hooks/useWallet';
 import icon from '@/icon.png';
 import { logoutAndUpdateState, useWalletState } from '@/state';
-import {
-  ChevronLeft,
-  Cog,
-  Images,
-  LogOut,
-  Menu,
-  Wallet as WalletIcon,
-} from 'lucide-react';
+import { ChevronLeft, Cog, LogOut, Menu } from 'lucide-react';
 import { PropsWithChildren, ReactNode, useMemo } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
+import { navItems } from './Nav';
 import { Button } from './ui/button';
+import { Separator } from './ui/separator';
 import { Sheet, SheetContent, SheetTrigger } from './ui/sheet';
 
 export default function Header(
@@ -80,20 +75,26 @@ export default function Header(
             </Link>
           </div>
           <nav className='grid gap-2 text-lg font-medium'>
-            <Link
-              to='/wallet'
-              className='mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground'
-            >
-              <WalletIcon className='h-5 w-5' />
-              Assets
-            </Link>
-            <Link
-              to='/nfts'
-              className='mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground'
-            >
-              <Images className='h-5 w-5' />
-              NFTs
-            </Link>
+            {navItems.map((item, i) => {
+              switch (item.type) {
+                case 'link': {
+                  const Icon = item.icon;
+                  return (
+                    <Link
+                      key={i}
+                      to={item.url}
+                      className='mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground'
+                    >
+                      <Icon className='h-5 w-5' />
+                      {item.label}
+                    </Link>
+                  );
+                }
+                case 'separator': {
+                  return <Separator className='my-2' key={i} />;
+                }
+              }
+            })}
           </nav>
           <nav className='mt-auto grid gap-2 text-lg font-medium'>
             <Link

src/components/Layout.tsx

@@ -1,19 +1,12 @@
-import {
-  ArrowLeftRight,
-  Cog,
-  HandCoins,
-  Images,
-  LogOut,
-  SquareUserRound,
-  Wallet as WalletIcon,
-} from 'lucide-react';
+import { Cog, LogOut } from 'lucide-react';
 import { PropsWithChildren, useEffect, useMemo, useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { commands, WalletInfo } from '../bindings';
 
 import { usePeers } from '@/contexts/PeerContext';
 import icon from '@/icon.png';
 import { logoutAndUpdateState, useWalletState } from '@/state';
+import { navItems } from './Nav';
 import { Separator } from './ui/separator';
 
 export default function Layout(props: PropsWithChildren<object>) {
@@ -65,27 +58,22 @@ export default function Layout(props: PropsWithChildren<object>) {
             </div>
             <div className='flex-1 flex flex-col justify-between pb-4'>
               <nav className='grid items-start px-2 text-sm font-medium lg:px-4'>
-                <NavLink url='/wallet'>
-                  <WalletIcon className='h-4 w-4' />
-                  Wallet
-                </NavLink>
-                <NavLink url='/nfts'>
-                  <Images className='h-4 w-4' />
-                  NFTs
-                </NavLink>
-                <NavLink url='/dids'>
-                  <SquareUserRound className='h-4 w-4' />
-                  Profiles
-                </NavLink>
-                <NavLink url='/transactions'>
-                  <ArrowLeftRight className='h-4 w-4' />
-                  Transactions
-                </NavLink>
-                <Separator className='my-2' />
-                <NavLink url='/wallet/issue-token'>
-                  <HandCoins className='h-4 w-4' />
-                  Issue Token
-                </NavLink>
+                {navItems.map((item, i) => {
+                  switch (item.type) {
+                    case 'link': {
+                      const Icon = item.icon;
+                      return (
+                        <NavLink key={i} url={item.url}>
+                          <Icon className='h-4 w-4' />
+                          {item.label}
+                        </NavLink>
+                      );
+                    }
+                    case 'separator': {
+                      return <Separator className='my-2' key={i} />;
+                    }
+                  }
+                })}
               </nav>
 
               <nav className='grid px-2 text-sm font-medium lg:px-4'>

src/components/Nav.tsx

@@ -0,0 +1,53 @@
+import {
+  HandCoins,
+  Images,
+  LucideProps,
+  SquareUserRound,
+  WalletIcon,
+} from 'lucide-react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export type NavItem = NavLink | NavSeparator;
+
+export interface NavLink {
+  type: 'link';
+  label: string;
+  url: string;
+  icon: ForwardRefExoticComponent<
+    Omit<LucideProps, 'ref'> & RefAttributes<SVGSVGElement>
+  >;
+}
+
+export interface NavSeparator {
+  type: 'separator';
+}
+
+export const navItems: NavItem[] = [
+  {
+    type: 'link',
+    label: 'Wallet',
+    url: '/wallet',
+    icon: WalletIcon,
+  },
+  {
+    type: 'link',
+    label: 'NFTs',
+    url: '/nfts',
+    icon: Images,
+  },
+  {
+    type: 'link',
+    label: 'Profiles',
+    url: '/dids',
+    icon: SquareUserRound,
+  },
+  {
+    type: 'separator',
+  },
+  {
+    type: 'link',
+    label: 'Issue Token',
+    url: '/wallet/issue-token',
+    icon: HandCoins,
+  },
+];