From 5af927d4bf33e2d08482a92cba728d690c328015 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?T=C3=AAn=20c=E1=BB=A7a=20b=E1=BA=A1n?=
 <jungjihoonkr97@gmail.com>
Date: Sat, 3 Sep 2022 13:31:07 +0700
Subject: [PATCH] update header

---
 src/components/header/UIHeader.tsx | 19 +++++++++++++++----
 src/pages/index.tsx                |  4 ++++
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/components/header/UIHeader.tsx b/src/components/header/UIHeader.tsx
index 9ecfceb..53d34e2 100644
--- a/src/components/header/UIHeader.tsx
+++ b/src/components/header/UIHeader.tsx
@@ -25,8 +25,15 @@ export class UIHeader extends Component<HeaderProps> {
 
     return (
       <React.Fragment>
-        <AppBar position="relative">
-          <Toolbar sx={{ borderBottom: 1, borderColor: 'divider' }}>
+        <AppBar
+          position="static"
+          color="default"
+          elevation={0}
+          sx={{ borderBottom: theme => `1px solid ${theme.palette.divider}` }}
+        >
+          <Toolbar
+            sx={{ borderBottom: 1, borderColor: 'divider', flexWrap: 'wrap' }}
+          >
             <Typography
               component="h1"
               variant="h5"
@@ -49,12 +56,16 @@ export class UIHeader extends Component<HeaderProps> {
             >
               <img src={logo} className="App-logo-header" alt="logo" />
             </Typography>
-            <Button variant="outlined" size="small"></Button>
+            <Button size="small"></Button>
           </Toolbar>
           <Toolbar
             component="nav"
             variant="dense"
-            sx={{ justifyContent: 'center', overflowX: 'auto' }}
+            sx={{
+              justifyContent: 'center',
+              overflowX: 'auto',
+              flexWrap: 'wrap'
+            }}
           >
             {sections.map(section => (
               <Link
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index ba5807f..6e1993e 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -7,6 +7,7 @@ import FacebookIcon from '@mui/icons-material/Facebook';
 import TwitterIcon from '@mui/icons-material/Twitter';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import Grid from '@mui/material/Grid';
+import GlobalStyles from '@mui/material/GlobalStyles';
 
 import { AppContext } from '../api';
 
@@ -86,6 +87,9 @@ export class UIPages extends Component {
     const posts = [];
     return (
       <ThemeProvider theme={theme}>
+        <GlobalStyles
+          styles={{ ul: { margin: 0, padding: 0, listStyle: 'none' } }}
+        />
         <CssBaseline />
         <Container maxWidth="xl">
           <UIHeader sections={sections} title={'SHDSVN'} />