3.Navbar in mui

 .Mui docs is the best way to learn it . Go to Mui docs and search for the component you want then see its visualization,usage,props,interactive visualization, reaposiveness etc.

go to its api of that component to see all values of all props available for that component.

for now we will use stack component .It is like a list used for styled list or menus

import React from "react";

import { Stack } from "@mui/material";

import { Link } from "react-router-dom";

import Logo from "../../assets/images/Logo.png";

const Navbar = () => {

  return (

    <Stack

      direction="row"

      justifyContent="none"

      spacing={{ sm: 12.2, xs: 4 }}

      sx={{

        // gap: { sm: "122px", xs: "40px" },

        mt: { sm: "32px", xs: "20px" },

        px: "20px",

      }}

    >

      <Link to="/">

        <img

          src={Logo}

          alt="logo"

          style={{ width: "48px", height: "48px", margin: "0 20px" }}

        />

      </Link>

      <Stack direction="row" spacing={4} alignItems="flex-end" fontSize="24px">

        <Link

          to="/"

          style={{

            textDecoration: "none",

            color: "#3a1212",

            borderBottom: "3px solid #ff2625",

          }}

        >

          Home

        </Link>

        <a

          href="#exercises"

          style={{ textDecoration: "none", color: "#3a1212" }}

        >

          Exercises

        </a>

      </Stack>

    </Stack>

  );

};

export default Navbar;

.     direction="row"

      justifyContent="none"

      spacing={4}

.These are  some props given by mui for stack component .We can also add css styles using inline styling using sx prop. 

sx={{

        // gap: { sm: "122px", xs: "40px" },

        mt: { sm: "32px", xs: "20px" },

        px: "20px",

      }}

mt=margin top

px=padding at x axis ie.(left and right)

also mui lets us implement responsiveness direclty:

mt: { sm: "32px", xs: "20px" } ie 32 px for extra small device and 20 px for small and above.

But note that we cant use mui props inside of sx eg: we cant use spacing:{3},etc

inside sx{}.WEcan only use pure css props in camelCase inside sx{}

    <Stack

      direction="row"

      justifyContent="none"

      spacing={{ sm: 12.2, xs: 4 }}

      sx={{

        // gap: { sm: "122px", xs: "40px" },

        mt: { sm: "32px", xs: "20px" },

        px: "20px",

      }}

    >

.

.

.\