Fix top nav style on tablet

web/components/nav/group-nav-bar.tsx

@@ -11,6 +11,7 @@ import { useUser } from 'web/hooks/use-user'
 import NotificationsIcon from '../notifications-icon'
 import router from 'next/router'
 import { userProfileItem } from './bottom-nav-bar'
+import Link from 'next/link'
 
 const mobileGroupNavigation = [
   { name: 'Markets', key: 'markets', icon: PresentationChartLineIcon },
@@ -35,7 +36,7 @@ export function GroupNavBar(props: {
   const user = useUser()
 
   return (
-    <nav className="z-20 flex justify-between border-t-2 bg-white text-xs text-gray-700 lg:hidden">
+    <nav className="z-20 flex border-t-2 bg-white text-xs text-gray-700">
       {mobileGroupNavigation.map((item) => (
         <NavBarItem
           key={item.name}
@@ -75,23 +76,23 @@ function NavBarItem(props: {
   currentPage: string
   onClick: (key: string) => void
 }) {
-  const { item, currentPage } = props
+  const { item, currentPage, onClick } = props
   const track = trackCallback(
     `group navbar: ${item.trackingEventName ?? item.name}`
   )
 
   return (
-    <button onClick={() => props.onClick(item.key ?? '#')}>
+    <Link href={item.href ?? '#'}>
       <a
         className={clsx(
           'block w-full py-1 px-3 text-center hover:bg-indigo-200 hover:text-indigo-700',
           currentPage === item.key && 'bg-gray-200 text-indigo-700'
         )}
-        onClick={track}
+        onClick={() => (onClick?.(item.key ?? '#'), track())}
       >
         {item.icon && <item.icon className="my-1 mx-auto h-6 w-6" />}
         {item.name}
       </a>
-    </button>
+    </Link>
   )
 }

web/pages/group/[...slugs]/index.tsx

@@ -302,12 +302,13 @@ export function TopGroupNavBar(props: {
   onClick: (key: string) => void
 }) {
   return (
-    <header className="sticky top-0 z-50 w-full border-b border-gray-200 md:hidden lg:col-span-12">
+    <header className="sticky top-0 z-50 w-full border-b border-gray-200 lg:hidden lg:col-span-12">
       <div className="flex items-center   bg-white  px-4">
         <div className="flex-shrink-0">
           <Link href="/">
             <a className="text-indigo-700 hover:text-gray-500 ">
-              <ArrowLeftIcon className="h-5 w-5" aria-hidden="true" />
+              <ArrowLeftIcon className="h-5 w-5" aria-hidden />
+              <span className='sr-only'>Home</span>
             </a>
           </Link>
         </div>