Working on UI

vue/components/Sidebar.vue

@@ -0,0 +1,53 @@
+<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>
+  </aside>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { RouterLink } from 'vue-router';
+
+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>