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">
            { isMobile && 
              sx={{ mr: 2 }}
              <MenuIcon />              
            <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
            <Button color="inherit">Login </Button>
      {!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


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