fullscreen

<template>
 <Navbar
  expand
  background-color="white"
 >
  <Container>
   <examples-snippets-navbar-demo-navbar-content-fullscreen />
  </Container>
 </Navbar>
 <Modal id="navModalFullscreen">
  <ModalDialog fullscreen>
   <ModalContent
    background-color="dark"
    :opacity="75"
   >
    <ModalHeader>
     <CloseButton
      dismiss="modal"
      white
     />
    </ModalHeader>
    <ModalBody>
     <Container>
      <Row
       gutter="5"
       margin="y-auto"
       text-color="light"
      >
       <Col
        col="lg-6"
       >
        <b-div headings="2">
         Bootstrap
        </b-div>
        <p>Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes.</p>
        <Anchor
         button
         color="light"
         to="/lang-en"
         icon="bi-chevron-right"
         icon-end
        >
         Learn more
        </Anchor>
       </Col>
       <Col
        col="lg-6"
        padding="3"
       >
        <ViewState
         v-slot="navs"
         src="app-config://usebootstrap/navigations/default"
        >
         <Anchor
          v-for="item in navs.data"
          :key="item.name"
          header
          dynamic-route
          :to="item.children[0].path"
          link-underline="0"
          color="light"
         >
          <b-h4
           headings="2"
           margin="y-4"
          >
           {{ item.name }}
          </b-h4>
         </Anchor>
        </ViewState>
       </Col>
      </Row>
     </Container>
    </ModalBody>
   </ModalContent>
  </ModalDialog>
 </Modal>
</template>