From 54d14baddf9047779f7605c7b9c9a5d13e32d275 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sat, 28 Aug 2021 19:29:01 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20sidebar=20view=20=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E7=AB=AF=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/SidebarView.tsx | 10 +++++-----
 web/tailwind.config.js             |  1 +
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/web/src/components/SidebarView.tsx b/web/src/components/SidebarView.tsx
index 903643f0..df37e86d 100644
--- a/web/src/components/SidebarView.tsx
+++ b/web/src/components/SidebarView.tsx
@@ -144,10 +144,10 @@ export const SidebarView: React.FC<SidebarViewProps> = React.memo((props) => {
 
   return (
     <SidebarViewContext.Provider value={{ content, setContent }}>
-      <div className="flex w-full h-full">
+      <div className="flex w-full h-full mobile:flex-col mobile:overflow-auto">
         <div
-          className="bg-black bg-opacity-10 flex flex-col justify-start items-end"
-          style={{ flex: '1 0 218px', padding: '90px 10px 80px' }}
+          className="bg-black bg-opacity-10 flex flex-col justify-start items-end py-20 px-2.5 mobile:items-start mobile:py-10"
+          style={{ flex: '1 0 218px' }}
         >
           {menu.map((item, i) => (
             <SidebarViewMenuItem key={i} menu={item} />
@@ -155,8 +155,8 @@ export const SidebarView: React.FC<SidebarViewProps> = React.memo((props) => {
         </div>
 
         <div
-          className="overflow-auto"
-          style={{ flex: '1 1 800px', padding: '90px 40px 80px' }}
+          className="pt-24 pb-20 px-10 desktop:overflow-auto"
+          style={{ flex: '1 1 800px' }}
         >
           {content}
         </div>
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 54572d91..d7a14950 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -50,6 +50,7 @@ module.exports = {
       md: { max: '767px' },
       sm: { max: '639px' },
       mobile: { max: '639px' }, // alias
+      desktop: { min: '640px' }, // alias
     },
     extend: {
       borderRadius: {