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
1 year ago
|
<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>
|