feat(sidebar): render as button menu for < sm viewports

Preserve as much screen real estate as possible by hiding the sidebar behind a 25% transparent menu button for viewports smaller than `sm` - For < sm viewports, ensure page layouts are at absolute top left - Pad new post banner to ensure title not obscured - Use breakpoint responsive values to render either a sidebar, or a hidden sidebar revealed by an icon button
opengovsg · Oct 30, 2023 · faa2120 · faa2120
1 parent 7533a6f
commit faa2120
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 12 deletions.
diff --git a/src/components/DashSidebar.tsx b/src/components/DashSidebar.tsx
@@ -1,20 +1,22 @@
-import { Box, Flex } from '@chakra-ui/react'
+import { Box, Flex, IconButton, useBreakpoint } from '@chakra-ui/react'
 import {
   SidebarContainer,
   SidebarItem,
   useIsMobile,
 } from '@opengovsg/design-system-react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { useMemo } from 'react'
-import { BiFace, BiHomeSmile } from 'react-icons/bi'
+import { useMemo, useState } from 'react'
+import { BiFace, BiHomeSmile, BiMenu, BiX } from 'react-icons/bi'
 import { ADMIN_DASHBAR_WIDTHS, ADMIN_NAVBAR_HEIGHT } from '~/constants/layouts'
 import { useMe } from '~/features/me/api'
 import { HOME, PROFILE, SETTINGS_PROFILE } from '~/lib/routes'
 
 export const DashSidebar = () => {
+  const [showWhenSmallMobile, setShowWhenSmallMobile] = useState(false)
   const isMobile = useIsMobile()
   const { me } = useMe()
+  const breakpointValue = useBreakpoint()
   const { pathname, query } = useRouter()
 
   const isProfileActive = useMemo(() => {
@@ -26,19 +28,51 @@ export const DashSidebar = () => {
       return true
   }, [pathname, query.username, me?.username])
 
+  const showText = isMobile && breakpointValue === 'sm'
+
   return (
-    <Box position="relative">
+    <Box
+      position={{ base: 'fixed', sm: 'relative' }}
+      top={{ base: ADMIN_NAVBAR_HEIGHT, sm: 0 }}
+      zIndex="3"
+    >
+      <IconButton
+        zIndex="overlay"
+        variant="clear"
+        colorScheme="neutral"
+        border="1px"
+        borderRadius="0"
+        borderBottomRightRadius="lg"
+        bg="white"
+        opacity="0.75"
+        borderColor="base.divider.medium"
+        aria-label={showWhenSmallMobile ? 'Close sidebar' : 'Open sidebar'}
+        onClick={() => setShowWhenSmallMobile(!showWhenSmallMobile)}
+        display={{ base: 'inline-flex', sm: 'none' }}
+        icon={showWhenSmallMobile ? <BiX /> : <BiMenu />}
+      />
       <Flex
         bg="white"
         borderRight="1px solid"
         borderColor="base.divider.medium"
         pos="fixed"
         width={ADMIN_DASHBAR_WIDTHS}
         h={`calc(var(--chakra-vh) - ${ADMIN_NAVBAR_HEIGHT})`}
+        opacity={{
+          base: showWhenSmallMobile ? 1 : 0,
+          sm: 1,
+        }}
         flexDir="column"
         justify="space-between"
         zIndex="2"
-        pb="0.5rem"
+        top={ADMIN_NAVBAR_HEIGHT}
+        pt={{ base: ADMIN_NAVBAR_HEIGHT, sm: 0 }}
+        pb={{ base: 0, sm: '0.5rem' }}
+        w={{ base: showWhenSmallMobile ? '100%' : 0, sm: 'fit-content' }}
+        transition={{
+          base: 'opacity 0.2s, width 0.2s',
+          sm: undefined,
+        }}
       >
         <SidebarContainer size="sm">
           <SidebarItem
@@ -50,7 +84,7 @@ export const DashSidebar = () => {
             px={{ base: '0.75rem', md: '1rem' }}
             borderRadius={{ base: 0, md: 'md' }}
           >
-            {isMobile ? '' : 'Home'}
+            {showText ? '' : 'Home'}
           </SidebarItem>
           <SidebarItem
             icon={BiFace}
@@ -61,7 +95,7 @@ export const DashSidebar = () => {
             px={{ base: '0.75rem', md: '1rem' }}
             borderRadius={{ base: 0, md: 'md' }}
           >
-            {isMobile ? '' : 'Profile'}
+            {showText ? '' : 'Profile'}
           </SidebarItem>
         </SidebarContainer>
       </Flex>

diff --git a/src/features/home/components/NewPostBanner.tsx b/src/features/home/components/NewPostBanner.tsx
@@ -3,7 +3,12 @@ import { NewPostModalButton } from '~/features/posts/components'
 
 export const NewPostBanner = (): JSX.Element => {
   return (
-    <Stack justify="space-between" direction="row" align="center">
+    <Stack
+      justify="space-between"
+      direction="row"
+      align="center"
+      ml={{ base: '2.75rem', sm: 0 }}
+    >
       <Text as="h2" textStyle="h6">
         What’s on your mind?
       </Text>

diff --git a/src/pages/home.tsx b/src/pages/home.tsx
@@ -1,15 +1,25 @@
 import { Box, Flex } from '@chakra-ui/react'
 import { SkeletonPostList } from '~/components/SkeletonPostList'
 import Suspense from '~/components/Suspense'
-import { APP_GRID_COLUMN, APP_GRID_TEMPLATE_COLUMN } from '~/constants/layouts'
+import {
+  ADMIN_NAVBAR_HEIGHT,
+  APP_GRID_COLUMN,
+  APP_GRID_TEMPLATE_COLUMN,
+} from '~/constants/layouts'
 import { NewPostBanner, PostList } from '~/features/home/components'
 import { type NextPageWithLayout } from '~/lib/types'
 import { AppGrid } from '~/templates/AppGrid'
 import { AdminLayout } from '~/templates/layouts/AdminLayout'
 
 const Home: NextPageWithLayout = () => {
   return (
-    <Flex w="100%" flexDir="column">
+    <Flex
+      w="100%"
+      flexDir="column"
+      position={{ base: 'absolute', sm: 'inherit' }}
+      left={{ base: 0, sm: undefined }}
+      minH={`calc(100% - ${ADMIN_NAVBAR_HEIGHT})`}
+    >
       <AppGrid
         templateColumns={APP_GRID_TEMPLATE_COLUMN}
         px={{ base: '1rem', lg: 0 }}

diff --git a/src/templates/layouts/ProfileLayout.tsx b/src/templates/layouts/ProfileLayout.tsx
@@ -12,7 +12,12 @@ const _ProfileLayout: NextPageWithLayout['getLayout'] = (page) => {
   const username = String(query.username)
 
   return (
-    <Flex w="100%" flexDir="column">
+    <Flex
+      w="100%"
+      flexDir="column"
+      position={{ base: 'absolute', sm: 'inherit' }}
+      left={{ base: 0, sm: undefined }}
+    >
       <AppGrid
         templateColumns={APP_GRID_TEMPLATE_COLUMN}
         bg="base.canvas.brand-subtle"
@@ -33,7 +38,9 @@ const _ProfileLayout: NextPageWithLayout['getLayout'] = (page) => {
           <ProfileTabs username={username} />
         </Box>
         <Divider gridColumn={{ base: '1/5', md: '1/12' }} h="1px" />
-        <Box gridColumn={APP_GRID_COLUMN}>{page}</Box>
+        <Box gridColumn={APP_GRID_COLUMN} minH="100%">
+          {page}
+        </Box>
       </AppGrid>
     </Flex>
   )