From a2a2407af62fe0627dcd12f97dde1d096e81ebce Mon Sep 17 00:00:00 2001
From: monoid <qaswedfr55@gmail.com>
Date: Thu, 1 Jun 2023 13:28:00 +0900
Subject: [PATCH] fix: drawer for mobile view

---
 src/client/component/contentinfo.tsx |  1 +
 src/client/component/headline.tsx    | 13 ++++++++++---
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/client/component/contentinfo.tsx b/src/client/component/contentinfo.tsx
index 82d021e..579fc80 100644
--- a/src/client/component/contentinfo.tsx
+++ b/src/client/component/contentinfo.tsx
@@ -97,6 +97,7 @@ export const ContentInfo = (props: {
         [theme.breakpoints.down("sm")]: {
             flexDirection: "column",
             alignItems: "center",
+            height: "auto",
         }
     }} elevation={4}>
         <Link /*className={propclasses.thumbnail_anchor ?? thumbnail_anchor}*/ component={RouterLink} to={{
diff --git a/src/client/component/headline.tsx b/src/client/component/headline.tsx
index c5d0a9f..d8fd1f3 100644
--- a/src/client/component/headline.tsx
+++ b/src/client/component/headline.tsx
@@ -57,11 +57,18 @@ const StyledInputBase = styled(InputBase)(({ theme }) => ({
     },
 }));
 
+const StyledNav = styled('nav')(({theme}) => ({
+    [theme.breakpoints.up("sm")]: {
+        width: theme.spacing(7)
+    }
+}));
+
 const closedMixin = (theme: Theme) => ({
     overflowX: 'hidden',
     width: `calc(${theme.spacing(7)} + 1px)`,
 });
 
+
 export const Headline = (prop: {
     children?: React.ReactNode,
     classes?: {
@@ -169,7 +176,7 @@ export const Headline = (prop: {
             </Toolbar>
         </AppBar>
         {renderProfileMenu}
-        <nav style={{ width: theme.spacing(7) }}>
+        <StyledNav>
             <Hidden smUp implementation="css">
                 <StyledDrawer variant="temporary" anchor='left' open={v} onClose={toggleV}
                     sx={{
@@ -179,7 +186,7 @@ export const Headline = (prop: {
                     {drawer_contents}
                 </StyledDrawer>
             </Hidden>
-            <Hidden xsDown implementation="css">
+            <Hidden smDown implementation="css">
                 <StyledDrawer variant='permanent' anchor='left'
                     sx={{
                         ...closedMixin(theme),
@@ -188,7 +195,7 @@ export const Headline = (prop: {
                     {drawer_contents}
                 </StyledDrawer>
             </Hidden>
-        </nav>
+        </StyledNav>
         <main style={{
             display: 'flex',
             flexFlow: 'column',