From ee05d0dc8e861abf3111bcafb12581c10262e6f7 Mon Sep 17 00:00:00 2001
From: unix <unix.bio@gmail.com>
Date: Tue, 24 Mar 2020 03:51:29 +0800
Subject: [PATCH] docs: increase the response range of button click on mobile

---
 lib/components/sidebar/tabbar-mobile.tsx | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/lib/components/sidebar/tabbar-mobile.tsx b/lib/components/sidebar/tabbar-mobile.tsx
index d2b89a6..51ecca0 100644
--- a/lib/components/sidebar/tabbar-mobile.tsx
+++ b/lib/components/sidebar/tabbar-mobile.tsx
@@ -1,20 +1,22 @@
 import React from 'react'
-import { useTheme } from 'components'
+import { Button, useTheme } from 'components'
 import ToggleIcon from '../icons/toggle'
 
 interface Props {
-  onClick?: (e: React.MouseEvent<SVGElement>) => void
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void
 }
 
 const TabbarMobile:React.FC<Props> = ({ onClick }) => {
   const theme = useTheme()
-  const handler = (event: React.MouseEvent<SVGElement>) => {
+  const handler = (event: React.MouseEvent<HTMLButtonElement>) => {
     onClick && onClick(event)
   }
 
   return (
     <div className="tabbar">
-      <ToggleIcon color={theme.palette.accents_7} onClick={handler} />
+      <Button className="toggle" auto type="abort" onClick={handler}>
+        <ToggleIcon color={theme.palette.accents_7} />
+      </Button>
       <span>ZEIT-UI React</span>
       <style jsx>{`
         .tabbar {
@@ -33,6 +35,15 @@ const TabbarMobile:React.FC<Props> = ({ onClick }) => {
           box-shadow: ${theme.expressiveness.shadowMedium};
         }
         
+        .tabbar :global(.toggle) {
+          width: 40px;
+          height: 40px;
+          padding: 0;
+          display: inline-flex;
+          justify-content: center;
+          align-items: center;
+        }
+        
         span {
           color: ${theme.palette.accents_7};
           font-size: .75rem;