automngr/resources/js/Components/Sidebar.vue

75 lines
3.3 KiB
Vue

<template>
<!-- give the sidebar z-50 class so its higher than the navbar if you want to see the logo -->
<!-- you will need to add a little "X" button next to the logo in order to close it though -->
<div class="w-1/2 md:w-1/3 lg:w-64 fixed md:top-0 md:left-0 h-screen lg:block bg-white border-r z-30" :class="sideBarOpen ? '' : 'hidden'" id="main-nav">
<div class="w-full h-20 border-b flex px-4 items-center mb-8">
<p class="font-semibold text-2xl text-blue-400 pl-4">Your SwissCar</p>
</div>
<div class="mb-4 px-4">
<jet-nav-link :href="route('dashboard')" :active="route().current('dashboard')">
<unicon class="mr-2" height="22" width="22" name="dashboard"></unicon>
Dashboard
</jet-nav-link>
</div>
<div class="mb-4 px-4">
<p class="text-sm font-semibold mb-1 text-gray-400 flex items-center">
Autos
</p>
<jet-nav-link :href="route('cars.create')" :active="route().current('cars.create')">
<unicon class="mr-2" height="22" width="22" name="plus-circle"></unicon>
Neues Auto
</jet-nav-link>
<jet-nav-link :href="route('cars')" :active="route().current('cars')">
<unicon class="mr-2" height="22" width="22" name="car-sideview"></unicon>
Alle Autos
</jet-nav-link>
<jet-nav-link :href="route('cars.unsold')" :active="route().current('cars.unsold')">
<unicon class="mr-2 ml-3" height="22" width="22" name="angle-right"></unicon>
Meine Autos
</jet-nav-link>
<jet-nav-link :href="route('cars.sold')" :active="route().current('cars.sold')">
<unicon class="mr-2 ml-3" height="22" width="22" name="angle-right"></unicon>
Verkaufte Autos
</jet-nav-link>
</div>
<div class="mb-4 px-4">
<p class="text-sm font-semibold mb-1 text-gray-400 flex items-center">
Kontakte
</p>
<jet-nav-link :href="route('contacts.create')" :active="route().current('contacts.create')">
<unicon class="mr-2" height="22" width="22" name="plus-circle"></unicon>
Neuer Kontakt
</jet-nav-link>
<jet-nav-link :href="route('contacts')" :active="route().current('contacts')">
<unicon class="mr-2" height="22" width="22" name="users-alt"></unicon>
Alle Kontakte
</jet-nav-link>
<jet-nav-link :href="route('contacts.buyers')" :active="route().current('contacts.buyers')">
<unicon class="mr-2 ml-3" height="22" width="22" name="angle-right"></unicon>
Käufer
</jet-nav-link>
<jet-nav-link :href="route('contacts.sellers')" :active="route().current('contacts.sellers')">
<unicon class="mr-2 ml-3" height="22" width="22" name="angle-right"></unicon>
Verkäufer
</jet-nav-link>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex'
import JetNavLink from '@/Jetstream/NavLink'
export default {
components: {
JetNavLink,
},
computed: {
...mapState(['sideBarOpen'])
}
}
</script>