<template>
    <div>
    <!--Main Navigation-->
    <header>
        <ClientOnly>
<!-- Navbar -->
<nav   style="z-index: 1;" class="navbar navbar-expand-lg navbar-light bg-light">
  <!-- Container wrapper -->
  <div class="container">
    <!-- Toggle button -->
    <button class="navbar-toggler" type="button" data-mdb-toggle="collapse"
      data-mdb-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
      aria-label="Toggle navigation">
      <i class="fas fa-bars"></i>
    </button>

    <!-- Collapsible wrapper -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <!-- Navbar brand -->
      <a class="navbar-brand mt-2 mt-lg-0" href="#">
        <img src="../assets/sc_logo_icon.png" height="15" alt="spargcom IT logo"
          loading="lazy" />
      </a>
      <!-- Left links -->
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <Nuxt-Link class="nav-link text-secondary fw-bold" to="/about">About</Nuxt-Link>
        </li>
        <li class="nav-item">
          <Nuxt-Link class="nav-link text-secondary fw-bold" to="/bought">Bought</Nuxt-Link>
        </li>
        <li class="nav-item">
          <Nuxt-Link class="nav-link text-secondary fw-bold" to="/evaluated">Evaluated</Nuxt-Link>
        </li>
        <li class="nav-item">
            <MDBDropdown class="nav-item text-secondary fw-bold" v-model="dropdown1">
            <MDBDropdownToggle
              tag="a"
              class="nav-link text-secondary fw-bold"
              @click="dropdown1 = !dropdown1"
              >Maintain</MDBDropdownToggle
            >
            <MDBDropdownMenu aria-labelledby="dropdownMenuButton">
              <MDBDropdownItem href="/typ">Clothing-Type</MDBDropdownItem>
              <MDBDropdownItem href="/measure">Measures</MDBDropdownItem>
              <MDBDropdownItem href="/photos"
                >Photos</MDBDropdownItem
              >
            </MDBDropdownMenu>
          </MDBDropdown>
        </li>
      </ul>
      <!-- Left links -->
    </div>
    <!-- Collapsible wrapper -->

    <!-- Right elements -->
    <div class="d-flex align-items-center">
      <!-- Icon -->
      <a class="text-secondary me-3" href="https://www.youtube.com/c/Mdbootstrap/videos" rel="nofollow" target="_blank">
        <i class="fab fa-youtube"></i>
      </a>
      <!-- Icon -->
      <a class="text-secondary me-3" href="https://twitter.com/ascensus_mdb" rel="nofollow" target="_blank">
        <i class="fab fa-twitter"></i>
      </a>
      <!-- Icon -->
      <a class="text-secondary me-3" href="https://github.com/mdbootstrap/mdb-ui-kit" rel="nofollow" target="_blank">
        <i class="fab fa-github"></i>
      </a>
    </div>
    <!-- Right elements -->
  </div>
  <!-- Container wrapper -->
</nav>
<!-- Navbar -->
</ClientOnly>
</header>
<!--Main Navigation-->
</div>
</template>

<script setup lang="ts">
  import {
    MDBBtn,
    MDBNavbar,
    MDBNavbarToggler,
    MDBNavbarBrand,
    MDBNavbarNav,
    MDBNavbarItem,
    MDBCollapse,
    MDBDropdown,
    MDBDropdownToggle,
    MDBDropdownMenu,
    MDBDropdownItem
  } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  const collapse1 = ref(false);
  const dropdown1 = ref(false);
</script>