skouter/components/sidebar.vue

<template>

<div v-if="mobile && !toggled" class="sidebar-toggle">
<svg @click="() => toggled = !toggled"
width="1em" height="60" viewBox="0 0 16 16" class="bi bi-justify-left"
fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path
fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0
1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0
0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0
0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/> </svg>
</div>

<menu v-if="!mobile || toggled" class="sidebar">

<svg v-if="mobile" @click="() => toggled = !toggled"
width="16" height="16" fill="currentColor" class="bi bi-x close" viewBox="0 0 16 16">
  <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
</svg>

<img v-if="avatar"
:src="avatarUrl">

<a href="#" :class="active == 1 ? 'active' : ''">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-house" viewBox="0 0 16 16"> <path
fill-rule="evenodd" d="M2 13.5V7h1v6.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0
.5-.5V7h1v6.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2
13.5zm11-11V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/> <path
fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0
1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z"/>
</svg>
<span>Home</span>
</a>

<a href="#new" :class="active == 2 ? 'active' : ''">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-journal-plus" viewBox="0 0 16 16"> <path
fill-rule="evenodd" d="M8 5.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V10a.5.5
0 0 1-1 0V8.5H6a.5.5 0 0 1 0-1h1.5V6a.5.5 0 0 1 .5-.5z"/> <path d="M3 0h10a2 2 0
0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0
1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z"/> <path d="M1
5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1
1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0
0 1 0 1h-2a.5.5 0 0 1 0-1H1z"/> </svg>
<span>New</span>
</a>

<a href="#estimates" :class="active == 3 ? 'active' : ''">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-journals" viewBox="0 0 16 16"> <path d="M5
0h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2 2 2 0 0 1-2 2H3a2 2 0 0 1-2-2h1a1 1 0 0 0 1
1h8a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1H1a2 2 0 0 1 2-2h8a2 2 0 0 1 2
2v9a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1H3a2 2 0 0 1 2-2z"/> <path
d="M1 6v-.5a.5.5 0 0 1 1 0V6h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5
0 0 1 1 0V9h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 2.5v.5H.5a.5.5 0 0 0 0
1h2a.5.5 0 0 0 0-1H2v-.5a.5.5 0 0 0-1 0z"/> </svg>
<span>Estimates</span>
</a>

<a href="#settings" :class="active == 4 ? 'active' : ''">
<svg width="15px" height="15px" viewBox="0 0 15 15" fill="none"
xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd"
clip-rule="evenodd" d="M5.944 0.5L5.858 0.936707L5.52901 2.53467C5.00301 2.73554
4.526 3.02037 4.095 3.35815L2.487 2.8205L2.05501 2.68658L1.83101
3.07233L0.723999 4.9231L0.5 5.3089L0.828003 5.5957L2.07201 6.65399C2.02701
6.93081 1.96901 7.20461 1.96901 7.49542C1.96901 7.78623 2.02701 8.0601 2.07201
8.33691L0.828003 9.3952L0.5 9.68201L0.723999 10.0677L1.83101 11.9186L2.05501
12.3053L2.487 12.1704L4.095 11.6328C4.526 11.9705 5.00301 12.2553 5.52901
12.4562L5.858 14.0541L5.944 14.4909H9.05501L9.142 14.0541L9.47 12.4562C9.996
12.2553 10.473 11.9705 10.904 11.6328L12.512 12.1704L12.944 12.3053L13.169
11.9186L14.275 10.0677L14.5 9.68201L14.171 9.3952L12.927 8.33691C12.973 8.0601
13.03 7.78623 13.03 7.49542C13.03 7.20461 12.973 6.93081 12.927 6.65399L14.171
5.5957L14.5 5.3089L14.275 4.9231L13.169 3.07233L12.944 2.68658L12.512
2.8205L10.904 3.35815C10.473 3.02037 9.996 2.73554 9.47 2.53467L9.142
0.936707L9.05501 0.5H5.944Z" stroke="currentColor" stroke-linecap="square"
stroke-linejoin="round"/> <path fill-rule="evenodd" clip-rule="evenodd"
d="M9.49963 7.49542C9.49963 8.5987 8.60363 9.49414 7.49963 9.49414C6.39563
9.49414 5.49963 8.5987 5.49963 7.49542C5.49963 6.39214 6.39563 5.49677 7.49963
5.49677C8.60363 5.49677 9.49963 6.39214 9.49963 7.49542Z" stroke="currentColor"
stroke-linecap="square" stroke-linejoin="round"/> </svg>
<span>Settings</span>
</a>

<a href="#sign-out" :class="active == 5 ? 'active' : ''">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-door-closed" viewBox="0 0 16 16"> <path d="M3
2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v13h1.5a.5.5 0 0 1 0 1h-13a.5.5 0 0 1 0-1H3V2zm1
13h8V2H4v13z"/> <path d="M9 9a1 1 0 1 0 2 0 1 1 0 0 0-2 0z"/> </svg>
<span>Sign out</span>
</a>

</menu>
</template>

<script setup>
import { ref, onMounted, computed } from "vue"
const props = defineProps(['role', 'active', 'avatar'])
const mobile = ref(false)
const toggled = ref(false)

let avatarUrl = computed(() => {
  return URL.createObjectURL(props.avatar)
})

function checkMobile() {
	if (window.innerWidth < 720) {
		mobile.value = true
	} else {
		mobile.value = false
	}
}

onMounted(() => {
		window.onresize = checkMobile
		checkMobile()
})
</script>