TILT- React Material UI and Navigation–part 29

I wanted some good looking on the site – so I choose https://mui.com/

It does not have ready made navigation like in Angular – so I need to make on myself. Fortunately , it has the all the things that one need:

  1. Media Query: https://mui.com/material-ui/react-use-media-query/

  2. App Bar: https://mui.com/material-ui/react-app-bar/

The final code looks like that 

const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down("md"));
const [userWantshowLeftMenu, showLeftMenu] = useState(false);
const showMenu= (event: React.MouseEvent<HTMLElement>) =>{
  showLeftMenu((prevState)=> !prevState )
}

Created MenuLeft components to show menu left

Created PublicTilts component to show the main page

The GUI in React: 

  <AppBar position="static">
          <Toolbar>          
            { isMobile && 
            <IconButton
              size="large"
              edge="start"
              color="inherit"
              aria-label="menu"
              sx={{ mr: 2 }}
              onClick={showMenu}
            >
              <MenuIcon />              
            </IconButton>
            }
            <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
              TILT
            </Typography>
            <Button color="inherit">Login </Button>
          </Toolbar>
        </AppBar>
      </Box>
      {!isMobile || userWantshowLeftMenu ? (<span style={{float:"left"}}><MenuLeft /></span>):("")}
      
      <span style={{float:"left"}}><PublicTilts /></span>

Lessons Learned:

  1. It is better to write components and again components in React. If not , you will be overflow by the amount of GUI

  2. React does not know how to display a boolean . Use this

{userWantshowLeftMenu?”true”:”false”}

  1. It is somehow more difficult to make the React events in TypeScript rather than in JavaScript.