<template>

  <!--Main Navigation-->

  <header>

    <!-- Animated navbar-->

    <MDBNavbar container expand="lg" position="top" scroll>

      <MDBNavbarToggler

        v-on:click="collapse = !collapse"

        target="#navbarExample"

      ></MDBNavbarToggler>

      <MDBCollapse v-model="collapse" id="navbarExample">

        <MDBNavbarNav class="me-auto mb-2 mb-lg-0">

          <MDBNavbarItem to="#intro" active>

            Home

          </MDBNavbarItem>

          <MDBNavbarItem

            href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA"

            newTab

            rel="nofollow"

          >

            Learn Bootstrap 5

          </MDBNavbarItem>

          <MDBNavbarItem

            href="https://mdbootstrap.com/docs/standard/"

            newTab

            rel="nofollow"

          >

            Download MDB UI KIT

          </MDBNavbarItem>

        </MDBNavbarNav>

        <ul class="navbar-nav flex-row">

          <!-- Icons -->

          <MDBNavbarItem

            href="https://www.youtube.com/channel/"

            newTab

            rel="nofollow"

            class="pe-2"

          >

            <MDBIcon iconStyle="fab" icon="youtube" />

          </MDBNavbarItem>

          <MDBNavbarItem

            href="https://www.facebook.com/mdbootstrap"

            newTab

            rel="nofollow"

            class="px-2"

          >

            <MDBIcon iconStyle="fab" icon="facebook-f" />

          </MDBNavbarItem>

          <MDBNavbarItem

            href="https://twitter.com/MDBootstrap"

            newTab

            rel="nofollow"

            class="px-2"

          >

            <MDBIcon iconStyle="fab" icon="twitter" />

          </MDBNavbarItem>

          <MDBNavbarItem

            href="https://github.com/mdbootstrap/mdb-ui-kit"

            newTab

            rel="nofollow"

            class="ps-2"

          >

            <MDBIcon iconStyle="fab" icon="github" />

          </MDBNavbarItem>

        </ul>

      </MDBCollapse>

    </MDBNavbar>

    <!-- Animated navbar -->

    <!-- Background image -->

    <div

      id="intro"

      class="bg-image"

      style="

        background-image: url(https://mdbcdn.b-cdn.net/img/new/fluid/city/113.webp);

        height: 100vh;

      "

    >

      <div class="mask text-white" style="background-color: rgba(0, 0, 0, 0.8)">

        <MDBContainer class="d-flex align-items-center text-center h-100">

          <div>

            <h1 class="mb-5">This is title</h1>

            <p>

              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis

              molestiae laboriosam numquam expedita ullam saepe ipsam, deserunt

              provident corporis, sit non accusamus maxime, magni nulla quasi

              iste ipsa architecto? Autem!

            </p>

          </div>

        </MDBContainer>

      </div>

    </div>

    <!-- Background image -->

  </header>

  <!--Main Navigation-->

  <MDBContainer class="my-5">

    <p>

      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis quam

      minima perspiciatis eos tenetur. Praesentium dolores at quos aperiam sed,

      sint provident consectetur incidunt, nostrum porro earum commodi, ex

      architecto.

    </p>

  </MDBContainer>

  <!--Main Navigation-->

</template>

<style>

#app {

  font-family: Roboto, Helvetica, Arial, sans-serif;

}

</style>

<script>

  import {

    MDBNavbar,

    MDBNavbarItem,

    MDBNavbarNav,

    MDBNavbarToggler,

    MDBCollapse,

    MDBIcon,

    MDBContainer

  } from "mdb-vue-ui-kit";

  import { ref } from "vue";

  export default {

    components: {

      MDBNavbar,

      MDBNavbarItem,

      MDBNavbarNav,

      MDBNavbarToggler,

      MDBCollapse,

      MDBIcon,

      MDBContainer

    },

    setup() {

      const collapse = ref(false);

      return {

        collapse

      };

    }

  };

</script>