open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix analytics tabs on mobile

Browse Source
This commit is contained in:
James Grugett 2022-03-22 18:26:06 -05:00
parent c40c7af0b0
commit cbc01d8160
1 changed files with 22 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
web/pages/analytics.tsx
View File

@ -261,45 +261,28 @@ function Tabs(props: { tabs: Tab[]; defaultIndex: number }) {
return ( return (
<div> <div>
<div className="sm:hidden"> <nav className="flex space-x-4" aria-label="Tabs">
<label htmlFor="tabs" className="sr-only"> {tabs.map((tab) => (
Select a tab <a
</label> key={tab.title}
{/* Use an "onChange" listener to redirect the user to the selected tab URL. */} href="#"
<select className={clsx(
id="tabs" tab.title === activeTab.title
name="tabs" ? 'bg-gray-100 text-gray-700'
className="block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500" : 'text-gray-500 hover:text-gray-700',
defaultValue={activeTab.title} 'rounded-md px-3 py-2 text-sm font-medium'
> )}
{tabs.map((tab) => ( aria-current={tab.title === activeTab.title ? 'page' : undefined}
<option key={tab.title}>{tab.title}</option> onClick={(e) => {
))} console.log('clicked')
</select> e.preventDefault()
</div> setActiveTab(tab)
<div className="hidden sm:block"> }}
<nav className="flex space-x-4" aria-label="Tabs"> >
{tabs.map((tab) => ( {tab.title}
<a </a>
key={tab.title} ))}
href="#" </nav>
className={clsx(
tab.title === activeTab.title
? 'bg-gray-100 text-gray-700'
: 'text-gray-500 hover:text-gray-700',
'rounded-md px-3 py-2 text-sm font-medium'
)}
aria-current={tab.title === activeTab.title ? 'page' : undefined}
onClick={(e) => {
e.preventDefault()
setActiveTab(tab)
}}
>
{tab.title}
</a>
))}
</nav>
</div>
<div className="mt-4">{activeTab.content}</div> <div className="mt-4">{activeTab.content}</div>
</div> </div>