Hide Menu Icon Button of Appbar of Material UI for only Desktop

Question

<AppBar title="My AppBar" showMenuIconButton={false} />

This Hides the Menu Icon in all devices.

I need to hide only in Desktop.

How Can I achieve this?

Answer 1

You can try this-

showMenuIconButton={window.screen.width.<600? true:false}

where 600 is 600 pixels.

Answer 2

You can subscribe to resize event listener:

import React, { useState, useEffect } from 'react'

const Events = () => {
  const [windowWidth, setWindowWidth] = useState(window.innerWidth)

  useEffect(() => {
    function handleResize() {
      setWindowWidth(window.innerWidth)
    }

    window.addEventListener('resize', handleResize)
    return () => window.removeEventListener('resize', handleResize)
  }, [])

  return (
    <div>
     <AppBar title="My AppBar" showMenuIconButton={windowWidth < 600} />
    </div>
  )

Answer 3

you can use sx prop attribute for responsive style.

sx={{ mr: 2, display: {sm: 'none'} }}

<IconButton 
         edge="start"
         color="inherit"
         aria-label="menu"
         sx={{ mr: 2, display: {sm: 'none'} }}
>
         <MenuIcon />
</IconButton>

AppBar should look like,

<Box sx={{display: 'flex'}}>
   <CssBaseline />
   <AppBar
      position="fixed" 
      elevation={1}
   >
     <Toolbar variant="dense">
      <IconButton 
          edge="start" 
          color="inherit" 
          aria-label="menu"  
          sx={{ mr: 2, display: {sm: 'none'} }} 
          onClick={this.handleDrawerToggle}>
              <MenuIcon />
      </IconButton>
      <Typography variant="h6" color="inherit" component="div">
         Logo
      </Typography>
     </Toolbar>
    </AppBar>
    <LeftSideBar  
        handleDrawerToggle={this.handleDrawerToggle} 
        mobileOpen={this.state.mobileOpen} 
    />
</Box>