From 082dee381011f0a8737ccb8097a45ea924ffe1e3 Mon Sep 17 00:00:00 2001
From: Luca Cras <luca_cras@hotmail.com>
Date: Mon, 4 Apr 2022 13:00:04 +0200
Subject: [PATCH 1/4] show fullscreen button on mobile UI and, when in
 fullscreen mode, hide the nav UI

---
 lib/ui/src/components/layout/mobile.tsx   |  9 +++++----
 lib/ui/src/components/preview/toolbar.tsx | 16 +++++++---------
 2 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/lib/ui/src/components/layout/mobile.tsx b/lib/ui/src/components/layout/mobile.tsx
index 8c9bb6213413..84c93ed42b64 100644
--- a/lib/ui/src/components/layout/mobile.tsx
+++ b/lib/ui/src/components/layout/mobile.tsx
@@ -103,21 +103,21 @@ const PanelsContainer = styled.div({
   height: 'calc(100% - 40px)',
 });
 
-const Bar = styled.nav(
+const Bar = styled.nav<{ isFullscreen: boolean }>(
   {
     position: 'fixed',
     bottom: 0,
     left: 0,
     width: '100vw',
     height: 40,
-    display: 'flex',
     boxShadow: '0 1px 5px 0 rgba(0, 0, 0, 0.1)',
 
     '& > *': {
       flex: 1,
     },
   },
-  ({ theme }) => ({
+  ({ theme, isFullscreen }) => ({
+    display: isFullscreen ? 'none' : 'flex',
     background: theme.barBg,
   })
 );
@@ -132,6 +132,7 @@ export interface MobileProps {
   options: {
     initialActive: ActiveTabsType;
     isToolshown: boolean;
+    isFullscreen: boolean;
   };
   Sidebar: ComponentType<any>;
   Preview: ComponentType<any>;
@@ -186,7 +187,7 @@ class Mobile extends Component<MobileProps, MobileState> {
           </div>
           <Panel hidden={!viewMode} />
         </Panels>
-        <Bar>
+        <Bar isFullscreen={options.isFullscreen}>
           <TabButton onClick={() => this.setState({ active: SIDEBAR })} active={active === SIDEBAR}>
             Sidebar
           </TabButton>
diff --git a/lib/ui/src/components/preview/toolbar.tsx b/lib/ui/src/components/preview/toolbar.tsx
index 5dcb34efed17..266ea45b8146 100644
--- a/lib/ui/src/components/preview/toolbar.tsx
+++ b/lib/ui/src/components/preview/toolbar.tsx
@@ -56,15 +56,13 @@ export const fullScreenTool: Addon = {
     <Consumer filter={fullScreenMapper}>
       {({ toggle, value, shortcut, hasPanel, singleStory }) =>
         (!singleStory || (singleStory && hasPanel)) && (
-          <S.DesktopOnly>
-            <IconButton
-              key="full"
-              onClick={toggle as any}
-              title={`${value ? 'Exit full screen' : 'Go full screen'} [${shortcut}]`}
-            >
-              <Icons icon={value ? 'close' : 'expand'} />
-            </IconButton>
-          </S.DesktopOnly>
+          <IconButton
+            key="full"
+            onClick={toggle as any}
+            title={`${value ? 'Exit full screen' : 'Go full screen'} [${shortcut}]`}
+          >
+            <Icons icon={value ? 'close' : 'expand'} />
+          </IconButton>
         )
       }
     </Consumer>

From 66ad19546c813f5e30521c77a52882733c8a5741 Mon Sep 17 00:00:00 2001
From: Luca Cras <luca_cras@hotmail.com>
Date: Mon, 4 Apr 2022 13:10:04 +0200
Subject: [PATCH 2/4] formatting change

---
 lib/ui/src/app.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/lib/ui/src/app.tsx b/lib/ui/src/app.tsx
index 9b0302fee3ef..1027819e9449 100644
--- a/lib/ui/src/app.tsx
+++ b/lib/ui/src/app.tsx
@@ -61,7 +61,13 @@ const App = React.memo<AppProps>(
     if (!width || !height) {
       content = <div />;
     } else if (width < 600) {
-      content = <Mobile {...props} viewMode={viewMode} options={layout} docsOnly={docsOnly} />;
+      content =
+        <Mobile
+          {...props}
+          viewMode={viewMode}
+          options={layout}
+          docsOnly={docsOnly}
+        />;
     } else {
       content = (
         <Desktop

From 6b0c7eda7813a4d6ab897e4303b43d3ee6b5ff2c Mon Sep 17 00:00:00 2001
From: Luca Cras <luca_cras@hotmail.com>
Date: Tue, 5 Apr 2022 18:48:19 +0200
Subject: [PATCH 3/4] update the height of PanelsContainer based on
 isFullscreen

---
 lib/ui/src/components/layout/mobile.tsx | 25 ++++++++++++++-----------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/lib/ui/src/components/layout/mobile.tsx b/lib/ui/src/components/layout/mobile.tsx
index 84c93ed42b64..c10f1a20511d 100644
--- a/lib/ui/src/components/layout/mobile.tsx
+++ b/lib/ui/src/components/layout/mobile.tsx
@@ -83,8 +83,8 @@ const Pane = styled.div<{ index: number; active: ActiveTabsType }>(
   }
 );
 
-const Panels = React.memo((({ children, active }) => (
-  <PanelsContainer>
+const Panels = React.memo((({ children, active, isFullscreen }) => (
+  <PanelsContainer isFullscreen={isFullscreen}>
     {Children.toArray(children).map((item, index) => (
       // eslint-disable-next-line react/no-array-index-key
       <Pane key={index} index={index} active={active}>
@@ -92,16 +92,19 @@ const Panels = React.memo((({ children, active }) => (
       </Pane>
     ))}
   </PanelsContainer>
-)) as FunctionComponent<{ active: ActiveTabsType; children: ReactNode }>);
+)) as FunctionComponent<{ active: ActiveTabsType; children: ReactNode, isFullscreen: boolean }>);
 Panels.displayName = 'Panels';
 
-const PanelsContainer = styled.div({
-  position: 'fixed',
-  top: 0,
-  left: 0,
-  width: '100vw',
-  height: 'calc(100% - 40px)',
-});
+const PanelsContainer = styled.div<{ isFullscreen: boolean }>(
+  {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    width: '100vw',
+  }, ({ isFullscreen }) => ({
+    height: isFullscreen ? '100vh' : 'calc(100% - 40px)',
+  })
+);
 
 const Bar = styled.nav<{ isFullscreen: boolean }>(
   {
@@ -173,7 +176,7 @@ class Mobile extends Component<MobileProps, MobileState> {
           }}
         />
 
-        <Panels active={active}>
+        <Panels active={active} isFullscreen={options.isFullscreen}>
           <Sidebar />
           <div>
             <div hidden={!viewMode}>

From c07e5d15d26ab54c31b8cf0e215f775b62ea8df9 Mon Sep 17 00:00:00 2001
From: Luca Cras <luca_cras@hotmail.com>
Date: Tue, 5 Apr 2022 21:10:51 +0200
Subject: [PATCH 4/4] implement requested change

---
 lib/ui/src/components/layout/mobile.tsx | 38 +++++++++++++------------
 1 file changed, 20 insertions(+), 18 deletions(-)

diff --git a/lib/ui/src/components/layout/mobile.tsx b/lib/ui/src/components/layout/mobile.tsx
index c10f1a20511d..64edfdb4bcf2 100644
--- a/lib/ui/src/components/layout/mobile.tsx
+++ b/lib/ui/src/components/layout/mobile.tsx
@@ -106,21 +106,21 @@ const PanelsContainer = styled.div<{ isFullscreen: boolean }>(
   })
 );
 
-const Bar = styled.nav<{ isFullscreen: boolean }>(
+const Bar = styled.nav(
   {
     position: 'fixed',
     bottom: 0,
     left: 0,
     width: '100vw',
     height: 40,
+    display: 'flex',
     boxShadow: '0 1px 5px 0 rgba(0, 0, 0, 0.1)',
 
     '& > *': {
       flex: 1,
     },
   },
-  ({ theme, isFullscreen }) => ({
-    display: isFullscreen ? 'none' : 'flex',
+  ({ theme }) => ({
     background: theme.barBg,
   })
 );
@@ -190,22 +190,24 @@ class Mobile extends Component<MobileProps, MobileState> {
           </div>
           <Panel hidden={!viewMode} />
         </Panels>
-        <Bar isFullscreen={options.isFullscreen}>
-          <TabButton onClick={() => this.setState({ active: SIDEBAR })} active={active === SIDEBAR}>
-            Sidebar
-          </TabButton>
-          <TabButton onClick={() => this.setState({ active: CANVAS })} active={active === CANVAS}>
-            {viewMode ? 'Canvas' : null}
-            {pages.map(({ key, route: Route }) => (
-              <Route key={key}>{key}</Route>
-            ))}
-          </TabButton>
-          {viewMode && !docsOnly ? (
-            <TabButton onClick={() => this.setState({ active: ADDONS })} active={active === ADDONS}>
-              Addons
+        {!options.isFullscreen && (
+          <Bar>
+            <TabButton onClick={() => this.setState({ active: SIDEBAR })} active={active === SIDEBAR}>
+              Sidebar
+            </TabButton>
+            <TabButton onClick={() => this.setState({ active: CANVAS })} active={active === CANVAS}>
+              {viewMode ? 'Canvas' : null}
+              {pages.map(({ key, route: Route }) => (
+                <Route key={key}>{key}</Route>
+              ))}
             </TabButton>
-          ) : null}
-        </Bar>
+            {viewMode && !docsOnly ? (
+              <TabButton onClick={() => this.setState({ active: ADDONS })} active={active === ADDONS}>
+                Addons
+              </TabButton>
+            ) : null}
+          </Bar>
+        )}
       </Root>
     );
   }