import React from "react";

import { makeStyles } from "@material-ui/core/styles";

import AppBar from "@material-ui/core/AppBar";

import Toolbar from "@material-ui/core/Toolbar";

import Typography from "@material-ui/core/Typography";

​

const useStyles = makeStyles((theme) => ({

  root: {

    position: "fixed",

    bottom: 0,

    width: "100%"

  },

  title: {

    flexGrow: 1

  }

}));

​

const StickyBottomNav = () => {

  const classes = useStyles();

​

  return (

    <AppBar position="static" className={classes.root}>

      <Toolbar>

        <Typography variant="h6" className={classes.title}>

          Your Bottom Navigation

        </Typography>

        {/* Add your navigation components here */}

      </Toolbar>

    </AppBar>

  );

};

​

export default StickyBottomNav;