Как установить AppBar в статическое состояние, чтобы оно не исчезало при постоянном ящике (в MaterialUI)? - PullRequest
Новая
       88

Как установить AppBar в статическое состояние, чтобы оно не исчезало при постоянном ящике (в MaterialUI)?

0 голосов
/ 21 сентября 2019

Я хочу, чтобы мой AppBar оставался фиксированным и не попадал под постоянный ящик.

enter image description here

Я пытаюсь добавить боковую навигацию, например, Меню дляСтраница портфолио с использованием GatsbyJS с Material-UI.Я добавил постоянный ящик для достижения этого.Но поскольку постоянный ящик масштабируется от нижнего к верхнему, он запускается поверх панели приложений, которая скрывает определенную часть панели приложений

Layout.js - определяет панель приложений 

/**
 * Layout component that queries for data
 * with Gatsby's useStaticQuery component
 *
 * See: https://www.gatsbyjs.org/docs/use-static-query/
 */

import React from "react"
import PropTypes from "prop-types"
import { useStaticQuery, graphql } from "gatsby"

import Header from "./header"
import "./layout.css"

const Layout = ({ children }) => {
  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

  return (
    <>
      <Header siteTitle={data.site.siteMetadata.title} />
      <div
        style={{
          height: '100%',
          display: 'flex',
          flexDirection: "column"
        }}
      >
        <main >{children}</main>
      </div>
    </>
  )
}

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Layout

Products.js - добавление ящика сюда 

import React from 'react';
import Layout from "../components/layout"
import { makeStyles } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
import CssBaseline from '@material-ui/core/CssBaseline';
import Toolbar from '@material-ui/core/Toolbar';
import List from '@material-ui/core/List';
import Typography from '@material-ui/core/Typography';
import Divider from '@material-ui/core/Divider';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';

const drawerWidth = 240;

const useStyles = makeStyles(theme => ({
    root: {
    flexGrow: 1,
    fontFamily: "'Montserrat', sans-serif;"
},
appBar: {
    width: `calc(100% - ${drawerWidth}px)`,
    marginLeft: drawerWidth,
},
drawer: {
    width: drawerWidth,
    flexShrink: 0,
},
drawerPaper: {
    width: drawerWidth,
},
toolbar: theme.mixins.toolbar,
content: {
    flexGrow: 1,
    padding: 10
},
text: {
    fontFamily: "'Montserrat', sans-serif;",
}
}));
export default function Products() {
const classes = useStyles();

return (
    <div className={classes.root}>
      <Layout className={classes.text} >

        <CssBaseline />
          <Drawer
        className={classes.drawer}
        variant="permanent"
        classes = {{
          paper: classes.drawer.Paper,
        }}
          anchor="left"
     >
    <div className={classes.toolbar} />
    <Divider />
    <List>
    <ListItem button key={'One'}>
      <ListItemText primary={`One`} />
    </ListItem>
    <ListItem button key={'Two'}>
          <ListItemText primary={`Two`} />
    </ListItem>
    <ListItem button key={'Three'}>
      <ListItemText primary={`Three`} /              
            </ListItem>
    </List>
</Drawer>
<main className={classes.content}>
  <div className={classes.toolbar} />
    <Typography paragraph>
            Product1
    </Typography>
</main>
   </Layout>
  </div>

);}

...