Блог

Я хочу, чтобы содержимое навигационной панели открывалось с правой стороны при уменьшении размера окна просмотра

как вы можете видеть, нажав на переключатель, содержимое занимает все место, которое я хочу, чтобы оно открывалось в виде боковой панели слева. это и есть код:

 <Container className={`${props.className} sticky-top`} fluid>
      <Navbar bg="light" variant="light" expand="lg">
        <Navbar.Brand>
          <Image
            width={65}
            height={65}
            src="/images/rnsit-logo.jpg"
            alt="rnsit-logo"
            fluid
          />
          amp;nbsp;amp;nbsp;
          <span>RNSIT</span>
        </Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="ml-auto">
            <LinkContainer to="/">
              <Nav.Link>
                <i className="fas fa-home"></i>amp;nbsp;Home
              </Nav.Link>
            </LinkContainer>
            <LinkContainer to="/about-us">
              <Nav.Link>
                <i className="fas fa-info-circle"></i>amp;nbsp;About Us
              </Nav.Link>
            </LinkContainer>
            <LinkContainer to="/admissions">
              <Nav.Link>
                <i className="fas fa-university"></i>amp;nbsp;Admissions
              </Nav.Link>
            </LinkContainer>
            <NavDropdown
              title={
                <span>
                  <i className="fas fa-building"></i>amp;nbsp;Departmemts
                </span>
              }
              id="basic-nav-dropdown"
            >
              {dropdownContent}
            </NavDropdown>
            <LinkContainer to="/placements">
              <Nav.Link>
                <i className="fas fa-briefcase"></i>amp;nbsp;Placements
              </Nav.Link>
            </LinkContainer>
            <LinkContainer to="/events">
              <Nav.Link>
                <i className="fas fa-calendar-check"></i>amp;nbsp;Events
              </Nav.Link>
            </LinkContainer>
            <LinkContainer to="/contact-us">
              <Nav.Link>
                <i className="fas fa-address-book"></i>amp;nbsp;Contact Us
              </Nav.Link>
            </LinkContainer>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    </Container>
 

Thanks in advance!