src/Components/Layout1.js
// props parameter can be removed on download 
props parameter can be removed on download
props parameter can be removed on download
function Layout1(props) {
  const {modalShow, setModalShow} = useContext(AppContext);
  return(
    <div className={styles['layout-background']}>
    <Container className={styles['layout-container']}>
      <Navbar collapseOnSelect expand='md' className={styles['layout-1-nav']} fixed='top'>
        <Navbar.Brand>
          {}
          <Button className={styles['button-styling']}onClick={() => props.handleBackClick()}>Go Back</Button>
        </Navbar.Brand>
        <Navbar.Toggle aria-controls='responsive-navbar-nav' className={styles['layout-toggle']}/>
        <Navbar.Collapse id='responsive-navbar-nav' className={styles['layout-collapse']}>
          <Nav className={styles['navbar-style']}>
            <Nav.Link className={styles['layout-navs']}>Link 1</Nav.Link>
            <Nav.Link className={styles['layout-navs']}>Link 2</Nav.Link>
            <Nav.Link className={styles['layout-navs']}>Link 3</Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
      <body className={styles['layout-body']}>
        <h1 className={styles['layout-heading']}>Hello</h1>
        <footer className={styles['footer-position']}>&copy;2021</footer>
      </body>
      {}
      <Button className={styles["modal-activate"]} onClick={() => {setModalShow(true)}}>?</Button>
      <Modal 
      show={modalShow} 
      onHide={() => setModalShow(false)} 
      title="Forest themed layout"
      spec1="React-Bootstrap"
      spec2="CSS-Modules"
      spec3="15mb"
      spec4="React"
      spec5="JavaScript"
      spec6="1"
      spec7="1"
      spec8="2"/>
    </Container>
    </div>
  )
}
function Layout1 ( props ) { const { modalShow , setModalShow } = useContext ( AppContext ) ; return ( < div className = { styles [ 'layout-background' ] } > < Container className = { styles [ 'layout-container' ] } > < Navbar collapseOnSelect expand = 'md' className = { styles [ 'layout-1-nav' ] } fixed = 'top' > < Navbar . Brand > { } < Button className = { styles [ 'button-styling' ] } onClick = { ( ) => props . handleBackClick ( ) } > Go Back < / Button > < / Navbar . Brand > < Navbar . Toggle aria-controls = 'responsive-navbar-nav' className = { styles [ 'layout-toggle' ] } / > < Navbar . Collapse id = 'responsive-navbar-nav' className = { styles [ 'layout-collapse' ] } > < Nav className = { styles [ 'navbar-style' ] } > < Nav . Link className = { styles [ 'layout-navs' ] } > Link 1 < / Nav . Link > < Nav . Link className = { styles [ 'layout-navs' ] } > Link 2 < / Nav . Link > < Nav . Link className = { styles [ 'layout-navs' ] } > Link 3 < / Nav . Link > < / Nav > < / Navbar . Collapse > < / Navbar > < body className = { styles [ 'layout-body' ] } > < h1 className = { styles [ 'layout-heading' ] } > Hello < / h1 > < footer className = { styles [ 'footer-position' ] } > &copy;2021 < / footer > < / body > { } < Button className = { styles [ "modal-activate" ] } onClick = { ( ) => { setModalShow ( true ) } } > ? < / Button > < Modal show = { modalShow } onHide = { ( ) => setModalShow ( false ) } title = "Forest themed layout" spec1 = "React-Bootstrap" spec2 = "CSS-Modules" spec3 = "15mb" spec4 = "React" spec5 = "JavaScript" spec6 = "1" spec7 = "1" spec8 = "2" / > < / Container > < / div > ) }
props parameter can be removed on download
props parameter can be removed on download
/* This button can be deleted on download and replaced with a logo */ /* The button and modal below can be removed on download */