<template>

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

    <MDBContainer fluid class="justify-content-between">

    <!-- Left elements -->

    <div class="d-flex">

      <!-- Navbar brand -->

      <MDBNavbarBrand href="#" class="d-flex align-items-center">

        <MDBIcon icon="flask" class="text-primary me-2"/><small class="fw-bold text-dark">CodeLab</small>

      </MDBNavbarBrand>

      <!-- Search form -->

      <form @submit.prevent class="input-group w-auto my-auto d-none d-lg-flex">

        <MDBInput

               autocomplete="off"

               type="search"

               rounded

               placeholder="Search"

               style="min-width: 125px"

               />

        <span class="input-group-text border-0 d-none d-lg-flex"

              ><MDBIcon icon="search"/></span>

      </form>

    </div>

    <!-- Left elements -->

​

    <!-- Center elements -->

    <MDBNavbarNav right class="flex-row d-none d-md-flex">

      <MDBNavbarItem class="me-3 me-lg-1 active" to="#!">

          <span><MDBIcon icon="home" class="fa-lg"/></span>

          <MDBBadge pill notification color="danger"

                >1</MDBBadge

            >

      </MDBNavbarItem>

​

      <MDBNavbarItem class="me-3 me-lg-1" to="#!">

          <span><MDBIcon icon="flag" class="fa-lg"/></span>

      </MDBNavbarItem>

​

      <MDBNavbarItem class="me-3 me-lg-1" to="#!">

          <span><MDBIcon icon="video" class="fa-lg"/></span>

      </MDBNavbarItem>

​

      <MDBNavbarItem class="me-3 me-lg-1" to="#!">

          <span><MDBIcon icon="shopping-bag" class="fa-lg"/></span>

      </MDBNavbarItem>

​

      <MDBNavbarItem class="me-3 me-lg-1" to="#!">

          <span><MDBIcon icon="users" class="fa-lg"/></span>

          <MDBBadge pill notification color="danger"

                >2</MDBBadge

            >

      </MDBNavbarItem>

    </MDBNavbarNav >

    <!-- Center elements -->

​

    <!-- Right elements -->

    <MDBNavbarNav right class="flex-row">

      <MDBNavbarItem class="me-3 me-lg-1" linkClass="d-sm-flex align-items-sm-center" to="#!">

          <img

               v-mdb-lazy="{

              src: 'https://mdbootstrap.com/img/new/avatars/1.jpg',

            }"

               class="rounded-circle"

               height="22"

               alt="Black and White Portrait of a Man"

               loading="lazy"

               />

          <strong class="d-none d-sm-block ms-1">John</strong>

      </MDBNavbarItem>

      <MDBNavbarItem class="me-3 me-lg-1" to="#!">

          <span><MDBIcon icon="plus-circle" class="fa-lg"/></span>

      </MDBNavbarItem>

       <MDBDropdown class="nav-item me-3 me-lg-1" v-model="dropdown1" align="end">

        <MDBDropdownToggle

          tag="a"

          role="button"

          class="hidden-arrow nav-link"

          @click="dropdown1 = !dropdown1"

        >

          <MDBIcon icon="comments" iconStyle="fas" class="fa-lg"/>

          <MDBBadge pill notification color="danger">6</MDBBadge>

        </MDBDropdownToggle>

        <MDBDropdownMenu>

          <MDBDropdownItem href="#">Some news</MDBDropdownItem>

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

          <MDBDropdownItem href="#">Something else here</MDBDropdownItem>

        </MDBDropdownMenu>

      </MDBDropdown>

       <MDBDropdown class="nav-item me-3 me-lg-1" v-model="dropdown2" align="end">

        <MDBDropdownToggle

          tag="a"

          role="button"

          class="hidden-arrow nav-link"

          @click="dropdown2 = !dropdown2"

        >

          <MDBIcon icon="bell" iconStyle="fas" class="fa-lg"/>

          <MDBBadge pill notification color="danger">12</MDBBadge>

        </MDBDropdownToggle>

        <MDBDropdownMenu>

          <MDBDropdownItem href="#">Some news</MDBDropdownItem>

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

          <MDBDropdownItem href="#">Something else here</MDBDropdownItem>

        </MDBDropdownMenu>

      </MDBDropdown>      

      <MDBDropdown class="nav-item me-3 me-lg-1" v-model="dropdown3" align="end">

        <MDBDropdownToggle

          tag="a"

          role="button"

          class="hidden-arrow nav-link"

          @click="dropdown3 = !dropdown3"

        >

          <MDBIcon icon="chevron-circle-down" iconStyle="fas" class="fa-lg"/>

        </MDBDropdownToggle>

        <MDBDropdownMenu>

          <MDBDropdownItem href="#">Some news</MDBDropdownItem>

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

          <MDBDropdownItem href="#">Something else here</MDBDropdownItem>

        </MDBDropdownMenu>

      </MDBDropdown>   

    </MDBNavbarNav>

    <!-- Right elements -->  

​

    </MDBContainer>

  </MDBNavbar>

</template>

<style>

#app {

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

}

</style>

<script>

import {

  MDBContainer,

  MDBNavbar,

  MDBNavbarToggler,

  MDBNavbarBrand,

  MDBNavbarNav,

  MDBNavbarItem,

  MDBCollapse,

  MDBIcon,

  MDBBtn,

  MDBDropdown,

  MDBDropdownToggle,

  MDBDropdownMenu,

  MDBDropdownItem,

  MDBBadge,

  mdbLazy,

  MDBInput

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

import { ref } from "vue";

​

export default {

  components: {

    MDBContainer,

    MDBNavbar,

    MDBNavbarToggler,

    MDBNavbarBrand,

    MDBNavbarNav,

    MDBNavbarItem,

    MDBCollapse,

    MDBIcon,

    MDBBtn,

    MDBDropdown,

    MDBDropdownToggle,

    MDBDropdownMenu,

    MDBDropdownItem,

    MDBBadge,

    MDBInput

  },

  directives: {

    mdbLazy,

  },

​

  setup() {

    const dropdown1 = ref(false);

    const dropdown2 = ref(false);

    const dropdown3 = ref(false);

    return {

      dropdown1,

      dropdown2,

      dropdown3

    };

  },

};

</script>