<template>
    <header>
        <ClientOnly>
<!-- Navbar -->
         
              <Menubar :model="navitems" class="flex relative sm:z-2" style="min-height: 62px;">
                <template #start>
                    <img alt="logo" src="/sc_logo_icon.png" height="40" class="mr-2" />
                </template>
                <template #end>
                    <InputText placeholder="Search" type="text" />
                </template>
              </Menubar>
           
  
<!-- Navbar -->
        </ClientOnly>
  </header>
<!--Main Navigation-->
</template>

<script setup lang="ts">
  
  import { ref } from 'vue';

  const navitems = ref([
    {
      label: 'About',
      icon: 'pi pi-question-circle',
      url: '/about'
    },
    {
      label: 'Bought',
      icon: 'pi pi-euro',
      url: '/bought'
    },
    {
      label: 'Evaluated',
      icon: 'pi pi-check-square',
      url: '/evaluated'
    },
    {
      label: 'Maintainance',
      icon: 'pi pi-wrench',
      items: [
        { 
          label: 'Clothing-Type',
          url: '/typ'
        },
        {
          label: 'Measures',
          url: '/measure'
        },
        {
          label: 'Photos',
          url: '/photos'
        }
      ]
    }
  ])

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