Kevin
100 lines
4.9 KiB
Vue
100 lines
4.9 KiB
Vue
<script lang="ts" setup>
|
|
import { ref, useAttrs } from 'vue'
|
|
import { useSidebar } from '~/composables/useSidebar'
|
|
import { Link } from '@adonisjs/inertia/vue'
|
|
import { siteIcon } from '~/assets/icons'
|
|
|
|
const { isOpen } = useSidebar()
|
|
const activeClass = ref('bg-gray-600/25 text-gray-100 border-gray-100')
|
|
const inactiveClass = ref(
|
|
'border-gray-900 text-gray-500 hover:bg-gray-600/25 hover:text-gray-100'
|
|
)
|
|
const route = useAttrs()
|
|
console.log(route)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex h-full">
|
|
<!-- Backdrop -->
|
|
<div
|
|
:class="isOpen ? 'block' : 'hidden'"
|
|
class="fixed inset-0 z-20 transition-opacity bg-black opacity-50 lg:hidden"
|
|
@click="isOpen = false"
|
|
/>
|
|
<!-- End Backdrop -->
|
|
|
|
<div
|
|
:class="isOpen ? 'translate-x-0 ease-out' : '-translate-x-full ease-in'"
|
|
class="fixed inset-y-0 left-0 z-30 w-64 overflow-y-auto transition duration-300 transform bg-gray-900 lg:h-full lg:translate-x-0 lg:static lg:inset-0"
|
|
>
|
|
<div class="flex items-center justify-center mt-8">
|
|
<div class="flex items-center">
|
|
<img :src="siteIcon" style="width: 64px; height: 64px; fill: aliceblue" />
|
|
|
|
<span class="mx-2 text-2xl font-semibold text-white">PC CREATOR</span>
|
|
</div>
|
|
</div>
|
|
|
|
<nav class="mt-10">
|
|
<Link
|
|
:class="[$page.url.startsWith('/computers') ? activeClass : inactiveClass]"
|
|
class="flex items-center px-6 py-2 mt-4 duration-200 border-l-4"
|
|
href="/computers"
|
|
>
|
|
<svg
|
|
class="h-5 w-5"
|
|
fill="currentColor"
|
|
viewBox="0 0 512.000000 512.000000"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<g stroke="none" transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)">
|
|
<path
|
|
d="M660 5089 c-116 -59 -216 -180 -257 -314 -17 -57 -18 -120 -18 -1140 0 -1014 1 -1082 18 -1112 31 -58 53 -63 287 -63 l210 0 0 1090 0 1090 1660 0 1660 0 0 -1090 0 -1090 210 0 c234 0 256 5 287 63 17 30 18 98 18 1112 0 1020 -1 1083 -18 1140 -41 134 -141 255 -257 314 l-63 31 -1837 0 -1837 0 -63 -31z m1948 -157 c17 -22 15 -62 -5 -84 -34 -38 -103 -11 -103 42 0 61 70 89 108 42z"
|
|
/>
|
|
<path
|
|
d="M2055 3549 c-38 -5 -92 -15 -119 -22 l-49 -13 386 -334 c430 -372 439 -382 438 -489 0 -33 -7 -76 -16 -98 -11 -25 -100 -122 -272 -295 -290 -290 -308 -303 -419 -296 -46 3 -72 11 -102 31 -23 15 -188 197 -369 406 -180 209 -331 380 -334 380 -16 2 -40 -178 -40 -289 2 -395 212 -734 566 -912 167 -85 319 -113 545 -104 125 6 166 4 214 -9 72 -19 145 -55 198 -96 21 -17 261 -304 533 -637 271 -334 510 -620 530 -636 143 -112 323 -132 487 -55 87 42 351 304 395 394 67 133 70 263 10 389 -56 119 8 61 -852 760 -425 345 -497 411 -535 486 -48 97 -54 135 -55 370 -1 197 -4 234 -22 302 -52 185 -134 330 -262 462 -168 174 -374 275 -616 305 -101 12 -139 12 -240 0z m2116 -2684 c102 -35 169 -130 169 -239 -1 -177 -161 -295 -332 -244 -48 14 -123 78 -147 127 -72 141 5 315 159 362 42 12 104 10 151 -6z"
|
|
/>
|
|
<path
|
|
d="M380 2259 c-19 -12 -112 -115 -208 -231 l-173 -210 3 -161 c3 -183 12 -212 80 -278 74 -71 41 -69 917 -69 l786 1 -92 38 c-371 154 -651 476 -749 859 l-18 72 -256 0 c-240 0 -257 -2 -290 -21z m92 -606 c79 -79 25 -213 -87 -213 -127 0 -174 164 -66 234 41 26 115 16 153 -21z"
|
|
/>
|
|
<path
|
|
d="M3465 2258 c15 -51 63 -95 383 -355 l335 -273 316 0 c354 0 361 -1 361 -64 0 -63 -9 -65 -274 -68 l-237 -3 114 -92 114 -93 165 0 c190 0 236 11 296 69 68 66 77 95 80 278 l3 162 -178 215 c-137 165 -187 218 -216 230 -33 14 -116 16 -653 16 l-615 0 6 -22z"
|
|
/>
|
|
</g>
|
|
</svg>
|
|
|
|
<span class="mx-4">Computers</span>
|
|
</Link>
|
|
|
|
<Link
|
|
:class="[$page.url.startsWith('/components') ? activeClass : inactiveClass]"
|
|
class="flex items-center px-6 py-2 mt-4 duration-200 border-l-4"
|
|
href="/components"
|
|
>
|
|
<svg
|
|
class="w-5 h-5"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M5 3C3.89543 3 3 3.89543 3 5V7C3 8.10457 3.89543 9 5 9H7C8.10457 9 9 8.10457 9 7V5C9 3.89543 8.10457 3 7 3H5Z"
|
|
/>
|
|
<path
|
|
d="M5 11C3.89543 11 3 11.8954 3 13V15C3 16.1046 3.89543 17 5 17H7C8.10457 17 9 16.1046 9 15V13C9 11.8954 8.10457 11 7 11H5Z"
|
|
/>
|
|
<path
|
|
d="M11 5C11 3.89543 11.8954 3 13 3H15C16.1046 3 17 3.89543 17 5V7C17 8.10457 16.1046 9 15 9H13C11.8954 9 11 8.10457 11 7V5Z"
|
|
/>
|
|
<path
|
|
d="M11 13C11 11.8954 11.8954 11 13 11H15C16.1046 11 17 11.8954 17 13V15C17 16.1046 16.1046 17 15 17H13C11.8954 17 11 16.1046 11 15V13Z"
|
|
/>
|
|
</svg>
|
|
|
|
<span class="mx-4">Components</span>
|
|
</Link>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</template>
|