You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
101 lines
3.2 KiB
101 lines
3.2 KiB
<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-xl"> |
|
<!-- 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> |