<template>

  <MDBNavbar expand="lg" light bg="light" container>

    <MDBNavbarBrand href="#">Brand</MDBNavbarBrand>

    <MDBNavbarToggler

      @click="collapse1 = !collapse1"

      target="#navbarSupportedContent"

    ></MDBNavbarToggler>

    <MDBCollapse v-model="collapse1" id="navbarSupportedContent">

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

        <MDBNavbarItem to="#" active>

          Home

        </MDBNavbarItem>

        <MDBNavbarItem href="#">

          Link

        </MDBNavbarItem>

        <MDBNavbarItem :disabled="disabled">

          <!-- Navbar dropdown -->

          <MDBDropdown class="nav-item" v-model="dropdown1"

          :style="{ 

                  pointerEvents: disabled ? 'none' : 'auto',                

                  }"             

          >

            <MDBDropdownToggle

              tag="a"

              class="nav-link"

              :style="{ 

                  color: disabled ? 'lightgray' : 'black',                

              }"  

              @click="dropdown1 = !dropdown1"

              >Dropdown</MDBDropdownToggle

            >

            <!-- or you can change the click method for the toggler like this: -->

            <!-- @click="!disabled && (dropdown1 = !dropdown1)" -->

            <MDBDropdownMenu aria-labelledby="dropdownMenuButton">

              <MDBDropdownItem href="#" disabled>Action</MDBDropdownItem>

              <MDBDropdownItem href="#">Another Action</MDBDropdownItem>

              <MDBDropdownItem href="#"

                >Something else here</MDBDropdownItem

              >

            </MDBDropdownMenu>

          </MDBDropdown>

        </MDBNavbarItem>

        <MDBNavbarItem to="#" :disabled="disabled">

          Disabled {{disabled}}

        </MDBNavbarItem>

      </MDBNavbarNav>

      <!-- Search form -->

      <form class="d-flex input-group w-auto">

        <input

          type="search"

          class="form-control"

          placeholder="Type query"

          aria-label="Search"

        />

        <MDBBtn outline="primary">

          Search

        </MDBBtn>

      </form>

    </MDBCollapse>

  </MDBNavbar>

  <MDBBtn @click="disabled=!disabled">Toggle disabled items - {{disabled}}</MDBBtn>

</template>

<style>

#app {

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

}

</style>

<script>

  import {

    MDBBtn,

    MDBNavbar,

    MDBNavbarToggler,

    MDBNavbarBrand,

    MDBNavbarNav,

    MDBNavbarItem,

    MDBCollapse,

    MDBDropdown,

    MDBDropdownToggle,

    MDBDropdownMenu,

    MDBDropdownItem

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

  import { ref } from 'vue';

​

  export default {

    components: {

      MDBBtn,

      MDBNavbar,

      MDBNavbarToggler,

      MDBNavbarBrand,

      MDBNavbarNav,

      MDBNavbarItem,

      MDBCollapse,

      MDBDropdown,

      MDBDropdownToggle,

      MDBDropdownMenu,

      MDBDropdownItem

    },

    setup() {

      const collapse1 = ref(false);

      const dropdown1 = ref(false);

      const disabled = ref(false);

      return {

        disabled,

        collapse1,

        dropdown1

      }

    }

  };

</script>