나만의 홈페이지 만들기-09 [Nav&Footer&Profile]

상단의 메뉴바에 몇개 메뉴를 추가해보자. 그리고, 이 메뉴는 컨텐츠 섹션이 움직일때에도 항상 고정되어 있게 해보도록 하자. 먼저 상단메뉴바는 layout.js 파일에 있으니 이곳을 아래처럼 수정한다.

  <Navbar bg="dark" variant="dark" fixed="top" >
                <Container>
                    <Navbar.Brand href="/">
                        <img
                            alt=""
                            src="/logo192.png"
                            width="30"
                            height="30"
                            className="d-inline-block align-top"
                        />{' '}
                        React Myweb
                    </Navbar.Brand>
                    <Navbar.Toggle aria-controls="basic-navbar-nav" />
                    <Navbar.Collapse id="basic-navbar-nav">
                        <Nav className="mr-auto">                           
                            <Nav.Link href="/profile">Profile</Nav.Link>
                            <NavDropdown title="Services" id="basic-nav-dropdown">
                                <NavDropdown.Item href="#service1">Service 1</NavDropdown.Item>
                                <NavDropdown.Item href="#service2">Service 2</NavDropdown.Item>
                                <NavDropdown.Item href="#service3">Service 3</NavDropdown.Item>
                                <NavDropdown.Divider />
                                <NavDropdown.Item href="#all-services">All Services</NavDropdown.Item>
                            </NavDropdown>
                        </Nav>
                    </Navbar.Collapse>
              </Container>
 </Navbar>

react bootstrap 에서 Nav 태그를 이용해서 메뉴를 추가한다. 그리고, fixed="top" props 를 이용하면, Nav 바가 브라우저에 고정되어 있게 된다.

이렇게 고정하게 되면 아래에 컨텐츠 페이지들이 겹쳐지는 문제가 생기는데, 이럴때 아래처럼 css 에 추가해주면 간단히 해결된다.

body {
  padding-top: 70px;
  }

Footer는 layout.js 페이지에서 아래처럼 추가해준다.

<footer>
      <Container>
        <Row>
          <Col xs={12} md={4}>
            <h3>About Us</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, magna a faucibus blandit, urna risus congue nunc, a dictum enim velit vel ligula.</p>
          </Col>
          <Col xs={12} md={4}>
            <h3>Contact Us</h3>
            <ul>
              <li>Email: contact@example.com</li>
              <li>Phone: 555-555-5555</li>
              <li>Address: 1234 Example Street, Anytown USA</li>
            </ul>
          </Col>
          <Col xs={12} md={4}>
            <h3>Follow Us</h3>
            <ul>
              <li><a href="#">Facebook</a></li>
              <li><a href="#">Twitter</a></li>
              <li><a href="#">Instagram</a></li>
            </ul>
          </Col>
        </Row>
        <Row>
          <Col>
            <p className="text-center">Copyright © {new Date().getFullYear()} Example Inc.</p>
          </Col>
        </Row>
      </Container>
    </footer>

Profile.js 를 추가하고 프로파일 페이지도 만들어준다.

 <Container>
      <Row>
        <Col xs={12} md={4}>
          <Image src="https://avatars.githubusercontent.com/u/112690304?v=4" roundedCircle width="200" height="200" />
        </Col>
        <Col xs={12} md={8}>
          <h1>Jahvo Trust</h1>
          <Badge variant="secondary">Developer</Badge>
          <Badge variant="secondary">Data Engineer</Badge>
          <Badge variant="secondary">MLOps Engineer</Badge>
          <p>I’m interested in everything that is related to Business. I’m currently learning data engineering and ai</p>
         
        </Col>
      </Row>
    </Container>

위에서 만든 Nav페이지에서 <Nav.Link href="/profile">Profile</Nav.Link> 라고 추가한부분처럼 해주면 Route에서 지정된 것처럼 Profile 페이지로 이동하게 된다.

전체 소스는 아래 페이지에서 참조하면된다.

https://github.com/JahvoTrust/myweb

GitHub - JahvoTrust/myweb