update top bar with mobile resolutions

src/layout/MainLayout/Header/index.js

@@ -292,7 +292,7 @@ function Header(props) {
                 alignItems="center"
                 spacing={0}
               >
-                <Box sx={{ width: '260px', flexGrow: 1, display: { xs: 'none', sm: 'block' } }}>
+                <Box sx={{ width: '260px', flexGrow: 1, display: { xs: 'none', sm: 'none', md: 'block' } }}>
                   <Stack direction="row" justifyContent="flex-start" alignItems="center">
                     <Logo />
                     <Stack justifyContent="flex-start" alignItems="center">
@@ -306,11 +306,11 @@ function Header(props) {
                   aria-label="open drawer"
                   edge="start"
                   onClick={handleDrawerToggle}
-                  sx={{ mr: 2, display: { sm: 'none' } }}
+                  sx={{ mr: 2, display: { md: 'none' } }}
                 >
                   <MenuIcon style={{ color: '#0C489E' }} />
                 </IconButton>
-                <Box sx={{ mr: 2, display: { sm: 'none' } }}>
+                <Box sx={{ mr: 2, display: { md: 'none' } }}>
                   <Stack direction="row" justifyContent="flex-start" alignItems="center">
                     <MobileLogo />
                     <span id="mobileTitle" >公共啟事提交及繳費系統</span>
@@ -319,7 +319,7 @@ function Header(props) {
               </Stack>
             }
 
-            <Box sx={{ display: { xs: 'none', sm: 'block' }, width: "100%" }}>
+            <Box sx={{ display: { xs: 'none', sm: 'none', md: 'block' }, width: "100%" }}>
               <Stack
                 direction="row"
                 justifyContent="space-between"
@@ -344,7 +344,7 @@ function Header(props) {
               keepMounted: true, // Better open performance on mobile.
             }}
             sx={{
-              display: { xs: 'block', sm: 'none' },
+              display: {sm: 'block', md: 'none' },
               '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
             }}
           >
@@ -374,7 +374,7 @@ function Header(props) {
                 aria-label="open drawer"
                 edge="start"
                 onClick={handleDrawerToggle}
-                sx={{ mr: 2, display: { sm: 'none' } }}
+                sx={{ mr: 2, display: { md: 'none' } }}
               >
                 <MenuIcon style={{ color: '#0C489E' }} />
               </IconButton>
@@ -419,7 +419,7 @@ function Header(props) {
               keepMounted: true, // Better open performance on mobile.
             }}
             sx={{
-              display: { xs: 'block', sm: 'none' },
+              display: { sm: 'block', md: 'none' },
               '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
             }}
           >