Unable to remove margin in material ui appBar and change appearance of menu item when clicked

I am making a content website using react & material ui. Inside the drawer component, I have included an appBar. Everything is working fine. But I want to do slight changes in its appearance and also in functionality. I am unable to do following two things,

1. remove margin around the appBar,
2. change the appearance of the menu button when clicked.

Current status of the page looks like,

submenu.js

import React, {Fragment, useCallback, useState} from 'react';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import {Link} from "react-router-dom";
import ListItemText from "@material-ui/core/ListItemText";
import ListItem from "@material-ui/core/ListItem";
import Typography from "@material-ui/core/Typography";
import Toolbar from "@material-ui/core/Toolbar";

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
    width: '100%',
    backgroundColor: theme.palette.background.paper,
  },
  appBar: {
    shadowColor: '#206a5d',
    zIndex: theme.zIndex.drawer,
    transition: theme.transitions.create(['width', 'margin'], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
  },
}));

export function Submenu({items, header}) {
  const classes = useStyles();
  const [selected, setSelected] = useState(false);

  const clickHandler = useCallback(
    () => {
      setSelected(!selected)
    },
    [selected],
  );


  return (
    <Fragment>
    <div className={classes.root}>
      <AppBar position="sticky"
              color="inherit"
              className={classes.appBar}
              style={{margin: 0}}
      >
        <Typography style={{marginLeft: '1.5rem'}}>
          <h1 style={{color:'#1f4068'}}>{header}</h1>
        </Typography>
        <div style={{display: 'flex'}}>
          {items.map(item =>
          <ListItem button
                    dense
                    key={item.title}
                    component={Link}
                    to={item.to || '/404'}
                    style={{padding:'0.25rem',
                      textAlign: 'center',
                    }}
          >
            <ListItemText primary={item.title} />
          </ListItem>
        )}
        </div>
      </AppBar>
    </div>
      </Fragment>
  );
}

Technical.js

import React, {Fragment} from "react";
import {Submenu} from "../submenu";
import {TechIntro} from "./Introduction";
import {TheDowTheory} from "./DowTheory";
import {Charts} from "./Charts";
import {Trends} from "./Trendlines";
import {Support} from "./Support";
import {Indicators} from "./Indicators";
import {TechRoutes} from "./TechRoutes";
import {makeStyles} from "@material-ui/core/styles";
import {BrowserRouter as Router} from "react-router-dom";

const useStyles = makeStyles((theme) => ({
  toolbar: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-end',
    padding: theme.spacing(0, 1),
    // necessary for content to be below app bar
    ...theme.mixins.toolbar,
  },
  content: {
    flexGrow: 1,
    padding: theme.spacing(3),
  },
}));

const menu = [
  {
    title: 'Introduction',
    to: '/technical',
    component: TechIntro
  },
  {
    title: 'The Dow Theory',
    to: '/thedowtheory',
    component: TheDowTheory
  },
  {
    title: 'Chart Patterns',
    to: '/chart',
    component: Charts
  },
  {
    title: 'Trend Lines',
    to: '/trends',
    component: Trends
  },
  {
    title: 'Support/Resistance',
    to: '/support',
    component: Support
  },
  {
    title: 'Technical Indicators',
    component: Indicators,
    to: '/indicators'
  },
  {
    title: 'Fibonacci',
    component: 'Fibonacci',
    to: '/fibonacci'
  },
  {
    title: 'Risk Management',
    component: 'Risk',
    to: '/risk'
  },
]

export const Technical = () => {
  const classes = useStyles()

  return (
    <Fragment>
        <Router>
          <Submenu items={menu} header={'Technical Analysis'} />
          <TechRoutes />
        </Router>
    </Fragment>
  )
}

TechRoutes.js

import React from "react";
import {Switch, Route, Redirect} from "react-router-dom";
import {TheDowTheory} from "./DowTheory";
import {TechIntro} from "./Introduction";
import {Charts} from "./Charts";
import {Trends} from "./Trendlines";
import {Support} from "./Support";
import {Indicators} from "./Indicators";

export const TechRoutes = () => {
  return (
    <Switch>
      <Route path="/technical" component={TechIntro} />
      <Route path="/thedowtheory" component={TheDowTheory} />
      <Route path="/chart" component={Charts} />
      <Route path="/trends" component={Trends} />
      <Route path="/support" component={Support} />
      <Route path="/indicators" component={Indicators} />
      {/*<Route path="/404" component={NotFound} />*/}
      <Redirect to="/404" />
    </Switch>
  );
}