<script setup lang="ts">
import { RouterLink } from 'vue-router';
</script>

<template>
    <aside class="fixed top-0 left-0 z-40 w-64 h-screen transition-transform -translate-x-full sm:translate-x-0">
        <div class="h-full px-3 py-4 overflow-y-auto bg-slate-700">
            <ul class="space-y-2 font-medium">
                <li>
                    <RouterLink to="/reprocess" class="flex items-center p-2 rounded-md">
                        <span>Reprocess</span>
                    </RouterLink>
                </li>
                <li>
                    <RouterLink to="/market" class="flex items-center p-2 rounded-md">
                        <span>Market</span>
                    </RouterLink>
                </li>
            </ul>
        </div>
    </aside>
</template>

<style scoped>
.router-link-active {
    @apply bg-emerald-500;
}
</style>
