56 lines
2.0 KiB
Vue
56 lines
2.0 KiB
Vue
<template>
|
|
<aside class="menu m-3" :class="{ 'is-collapsed': collapsed }">
|
|
|
|
<div class="level">
|
|
<p class="level-item" v-if="!collapsed">CMMS</p>
|
|
<div class="level-item">
|
|
<button class="button" :title="collapsed ? 'Expand menu' : 'Collapse menu'" @click="toggleSidebar">
|
|
<span class="icon">
|
|
<i class="fa-solid" :class="collapsed ? 'fa-angles-right' : 'fa-angles-left'"></i>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<ul class="menu-list">
|
|
<li v-for="item in items" :key="item.to">
|
|
<RouterLink :to="item.to" active-class="is-active" :class="{ 'has-text-centered': collapsed }"
|
|
:title="collapsed ? item.label : null">
|
|
<span class="icon">
|
|
<i class="fa-solid" :class="item.icon"></i>
|
|
</span>
|
|
<span v-if="!collapsed"> {{ t(item.label) }}</span>
|
|
</RouterLink>
|
|
</li>
|
|
</ul>
|
|
<p class="menu-label" v-if="!collapsed">{{ displayName }}</p>
|
|
</aside>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { RouterLink } from 'vue-router';
|
|
import { displayName } from '@/global.js';
|
|
|
|
const { t } = useI18n()
|
|
|
|
const collapsed = ref(localStorage.getItem('sidebarCollapsed') === 'true');
|
|
|
|
function toggleSidebar() {
|
|
collapsed.value = !collapsed.value;
|
|
localStorage.setItem('sidebarCollapsed', collapsed.value);
|
|
}
|
|
|
|
// Example items — replace `to` with real routes as pages are added.
|
|
const items = [
|
|
{ label: 'menu.dashboard', icon: 'fa-gauge-high', to: '/' },
|
|
// { label: 'Assets', icon: 'fa-boxes-stacked', to: '/assets' },
|
|
// { label: 'Work Orders', icon: 'fa-clipboard-list', to: '/work-orders' },
|
|
// { label: 'Maintenance', icon: 'fa-screwdriver-wrench', to: '/maintenance' },
|
|
// { label: 'Reports', icon: 'fa-chart-line', to: '/reports' },
|
|
{ label: 'menu.userSettings', icon: 'fa-user-gear', to: '/user_settings' },
|
|
{ label: 'menu.settings', icon: 'fa-gear', to: '/settings' },
|
|
];
|
|
</script>
|