fix: WorkspacePage top menu not showing in md breakpoint

frontend/src/features/workspace/WorkspacePage.tsx

@@ -9,14 +9,14 @@ import {
   Flex,
   Grid,
   Stack,
+  useBreakpointValue,
   useDisclosure,
 } from '@chakra-ui/react'
 
 import {
   EMERGENCY_CONTACT_KEY_PREFIX,
   ROLLOUT_ANNOUNCEMENT_KEY_PREFIX,
 } from '~constants/localStorage'
-import { useIsMobile } from '~hooks/useIsMobile'
 import { useLocalStorage } from '~hooks/useLocalStorage'
 
 import { RolloutAnnouncementModal } from '~features/rollout-announcement/RolloutAnnouncementModal'
@@ -33,7 +33,12 @@ import { useDashboard, useWorkspace } from './queries'
 export const WorkspacePage = (): JSX.Element => {
   const [currWorkspaceId, setCurrWorkspaceId] = useState<string>('')
 
-  const isMobile = useIsMobile()
+  const shouldUseTopMenu = useBreakpointValue({
+    base: true,
+    xs: true,
+    md: true,
+    lg: false,
+  })
   const createFormModal = useDisclosure()
   const mobileDrawer = useDisclosure()
 
@@ -99,6 +104,8 @@ export const WorkspacePage = (): JSX.Element => {
             <Flex pt="1rem" px="1rem" alignItems="center">
               <WorkspaceMenuHeader
                 onMenuClick={mobileDrawer.onClose}
+                shouldShowAddWorkspaceButton
+                shouldShowMenuIcon
                 justifyContent="space-between"
                 w="100%"
                 px={0}
@@ -119,9 +126,9 @@ export const WorkspacePage = (): JSX.Element => {
       </Drawer>
 
       <Grid templateColumns={{ base: 'inherit', lg: '15.5rem 1fr' }} h="100vh">
-        {isMobile ? (
+        {shouldUseTopMenu ? (
           <WorkspaceMenuHeader
-            shouldShowAddWorkspaceButton={false}
+            shouldShowMenuIcon
             onMenuClick={mobileDrawer.onOpen}
             borderBottom="1px"
             borderBottomColor="neutral.300"
@@ -134,7 +141,7 @@ export const WorkspacePage = (): JSX.Element => {
               borderRightColor="neutral.300"
               minH="100vh"
             >
-              <WorkspaceMenuHeader />
+              <WorkspaceMenuHeader shouldShowAddWorkspaceButton />
               <WorkspaceMenuTabs
                 workspaces={workspaces ?? []}
                 currWorkspace={currWorkspaceId}

frontend/src/features/workspace/components/WorkspaceSideMenu/WorkspaceMenuHeader.tsx

@@ -1,58 +1,55 @@
 import { BiMenuAltLeft, BiPlus } from 'react-icons/bi'
 import { Flex, FlexProps, Text } from '@chakra-ui/react'
 
-import { useIsMobile } from '~hooks/useIsMobile'
 import IconButton from '~components/IconButton'
 
 interface WorkspaceMenuHeaderProps extends FlexProps {
-  shouldShowAddWorkspaceButton?: boolean
   onMenuClick?: () => void
+  shouldShowAddWorkspaceButton?: boolean
+  shouldShowMenuIcon?: boolean
 }
 
 export const WorkspaceMenuHeader = ({
-  shouldShowAddWorkspaceButton = true,
+  shouldShowAddWorkspaceButton = false,
+  shouldShowMenuIcon = false,
   onMenuClick,
   ...props
-}: WorkspaceMenuHeaderProps): JSX.Element => {
-  const isMobile = useIsMobile()
-
-  return (
-    <Flex
-      justifyContent={{ base: 'inherit', md: 'space-between' }}
-      px={{ base: '1.5rem', md: '2rem' }}
-      mt={{ base: 0, md: '1rem' }}
-      {...props}
-      alignItems="center"
-    >
-      <Flex alignItems="center">
-        {isMobile && (
-          <IconButton
-            icon={<BiMenuAltLeft />}
-            onClick={() => onMenuClick && onMenuClick()}
-            aria-label="open workspace drawer"
-            variant="clear"
-            colorScheme="primary"
-            color="secondary.500"
-          />
-        )}
-        <Text textStyle="h4" color="secondary.700">
-          Workspaces
-        </Text>
-      </Flex>
-
-      {shouldShowAddWorkspaceButton && (
+}: WorkspaceMenuHeaderProps): JSX.Element => (
+  <Flex
+    justifyContent={{ base: 'inherit', md: 'space-between' }}
+    px={{ base: '1.5rem', md: '2rem' }}
+    mt={{ base: 0, lg: '1rem' }}
+    {...props}
+    alignItems="center"
+  >
+    <Flex alignItems="center">
+      {shouldShowMenuIcon && (
         <IconButton
-          size="lg"
-          aria-label="Create new workspace"
+          icon={<BiMenuAltLeft />}
+          onClick={() => onMenuClick && onMenuClick()}
+          aria-label="open workspace drawer"
           variant="clear"
           colorScheme="primary"
           color="secondary.500"
-          // TODO (hans): Implement add workspace modal view
-          onClick={() => null}
-          icon={<BiPlus />}
-          justifySelf="flex-end"
         />
       )}
+      <Text textStyle="h4" color="secondary.700">
+        Workspaces
+      </Text>
     </Flex>
-  )
-}
+
+    {shouldShowAddWorkspaceButton && (
+      <IconButton
+        size="lg"
+        aria-label="Create new workspace"
+        variant="clear"
+        colorScheme="primary"
+        color="secondary.500"
+        // TODO (hans): Implement add workspace modal view
+        onClick={() => null}
+        icon={<BiPlus />}
+        justifySelf="flex-end"
+      />
+    )}
+  </Flex>
+)