CardGrid padded

components/cards/CardGrid.tsx

@@ -17,6 +17,21 @@ export function CardGrid({ children }: Props) {
   const spacingY = `space-y-${spacing}`;
   const spacingX = `space-x-${spacing}`;
 
+  const grouping = isHuge ? 4 : isDesktop ? 3 : isTablet ? 2 : 1;
+  const numPaddingCards = children.length % grouping;
+
+  console.log('CardGrid ➡️ grouping:', grouping);
+  console.log('CardGrid ➡️ paddingCards:', numPaddingCards);
+
+  // Add cards to ensure we fill up each row. Hidden where the row is incomplete
+  // to keep even widths
+  const cards = [
+    ...children,
+    ...Array.from(Array(numPaddingCards).keys()).map(i => <div key={i}></div>),
+  ];
+
+  console.log('CardGrid ➡️ cards:', cards);
+
   return (
     <>
       {isMobile ? (
@@ -40,12 +55,9 @@ export function CardGrid({ children }: Props) {
       ) : (
         <Contained>
           <div className={classNames('flex flex-col', spacingY)}>
-            {_.chunk(
-              children,
-              isHuge ? 4 : isDesktop ? 3 : isTablet ? 2 : 1,
-            ).map(group => (
+            {_.chunk(cards, grouping).map(group => (
               <div key={uuid()} className={classNames('flex w-full', spacingX)}>
-                {group.map((item, index) => (
+                {group.map(item => (
                   <div key={uuid()} className="flex-1">
                     {item}
                   </div>

components/navigation/DesktopHeader.tsx

@@ -28,22 +28,34 @@ export function DesktopHeader() {
           </div>
 
           <div className="flex items-center ml-6 space-x-4 text-sm">
-            {NAVIGATION.MENU_ITEMS.map(item => (
-              <Link key={item.label} href={item.href} as={item.href}>
+            {NAVIGATION.MENU_ITEMS.map(item => {
+              const link = (
                 <a
                   className={classNames(
-                    'uppercase whitespace-no-wrap',
+                    'uppercase whitespace-no-wrap cursor-pointer',
                     item.subtle
                       ? 'text-xs hover:underline'
-                      : 'text-base font-bold py-1 px-2 hover:bg-primary rounded hover:bg-opacity-25',
+                      : 'duration-300 text-base font-bold py-1 px-2 hover:bg-primary rounded hover:bg-opacity-10',
                   )}
                   target={item.newTab ? '_blank' : undefined}
                   rel={item.newTab ? 'noreferrer' : undefined}
                 >
                   {item.label}
                 </a>
-              </Link>
-            ))}
+              );
+
+              return (
+                <>
+                  {item.external ? (
+                    link
+                  ) : (
+                    <Link key={item.label} href={item.href} as={item.href}>
+                      {link}
+                    </Link>
+                  )}
+                </>
+              );
+            })}
           </div>
         </div>
       </div>

components/navigation/SideMenuFullscreen.tsx

@@ -24,7 +24,7 @@ export function SideMenuFullscreen({ withSideBar }: Props) {
     <div
       style={{
         top: `${UI.HEADER_HEIGHT_PX}px`,
-        zIndex: 30000,
+        zIndex: 20000,
         transform: expanded
           ? 'translateX(0)'
           : `translateX(-100%) ${

components/navigation/SideMenuSplit.tsx

@@ -34,7 +34,7 @@ export function SideMenuSplit() {
       ref={ref}
       style={{
         minWidth: sideMenuSplit ? '50vw' : '0',
-        zIndex: 30033,
+        zIndex: 20033,
         height: sideMenuSplit
           ? 'unset'
           : `calc(100vh - ${UI.HEADER_HEIGHT_PX}px`,

constants/navigation.ts

@@ -6,29 +6,51 @@ export interface IMenuItem {
   href: string;
   newTab: boolean;
   subtle: boolean;
+  external: boolean;
 }
 
 const MENU_ITEMS: IMenuItem[] = [
-  { label: 'Blog', href: '/blog', newTab: false, subtle: false },
-  { label: 'Docs', href: 'https://docs.oxen.io', newTab: true, subtle: false },
-  { label: 'Community', href: '/community', newTab: false, subtle: false },
+  {
+    label: 'Blog',
+    href: '/blog',
+    newTab: false,
+    subtle: false,
+    external: false,
+  },
+  {
+    label: 'Docs',
+    href: 'https://docs.oxen.io',
+    newTab: true,
+    subtle: false,
+    external: true,
+  },
+  {
+    label: 'Community',
+    href: '/community',
+    newTab: false,
+    subtle: false,
+    external: false,
+  },
   {
     label: 'Explorer',
     href: 'https://oxen.observer/',
     newTab: true,
     subtle: true,
+    external: true,
   },
   {
     label: 'CoinGecko',
     href: 'https://www.coingecko.com/en/coins/oxen',
     newTab: true,
     subtle: true,
+    external: true,
   },
   {
     label: 'Downloads',
     href: 'https://docs.oxen.io/downloads',
     newTab: true,
     subtle: true,
+    external: true,
   },
 ];