chore: OliveTin 3k progress

frontend/resources/vue/components/Sidebar.vue

@@ -0,0 +1,254 @@
+<template>
+  <aside :class="{ 'shown': isOpen, 'stuck': isStuck }" class="sidebar">
+    <button
+      class="stick-toggle"
+      :aria-pressed="isStuck"
+      :title="isStuck ? 'Unstick sidebar' : 'Stick sidebar'"
+      @click="toggleStick"
+    >
+      <span v-if="isStuck">📌 Unstick</span>
+      <span v-else>📍 Stick</span>
+    </button>
+    <nav class="mainnav">
+      <ul class="navigation-links">
+        <li v-for="link in navigationLinks" :key="link.id" :title="link.title">
+          <router-link :to="link.path" :class="{ active: isActive(link.path) }">
+            <span v-if="link.icon" class="icon" v-html="link.icon"></span>
+            <span class="title">{{ link.title }}</span>
+          </router-link>
+        </li>
+      </ul>
+
+      <ul class="supplemental-links">
+        <li v-for="link in supplementalLinks" :key="link.id" :title="link.title">
+          <a :href="link.url" :target="link.target || '_self'">
+            <span v-if="link.icon" class="icon" v-html="link.icon"></span>
+            <span class="title">{{ link.title }}</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </aside>
+</template>
+
+<script setup>
+import { ref, onMounted, getCurrentInstance } from 'vue'
+import { useRoute } from 'vue-router'
+
+const isOpen = ref(false)
+const isStuck = ref(false)
+const navigationLinks = ref([
+  {
+    id: 'actions',
+    title: 'Actions',
+    path: '/',
+    icon: '⚡'
+  },
+  {
+    id: 'logs',
+    title: 'Logs',
+    path: '/logs',
+    icon: '📋'
+  },
+  {
+    id: 'diagnostics',
+    title: 'Diagnostics',
+    path: '/diagnostics',
+    icon: '🔧'
+  }
+])
+const supplementalLinks = ref([])
+
+const route = useRoute()
+const instance = getCurrentInstance()
+
+function toggleStick() {
+  isStuck.value = !isStuck.value
+}
+
+function toggle() {
+  isOpen.value = !isOpen.value
+}
+
+function open() {
+  isOpen.value = true
+}
+
+function close() {
+  isOpen.value = false
+}
+
+function isActive(path) {
+  return route.path === path
+}
+
+// Method to add navigation links from other components
+function addNavigationLink(link) {
+  const existingIndex = navigationLinks.value.findIndex(l => l.id === link.id)
+  if (existingIndex >= 0) {
+    navigationLinks.value[existingIndex] = { ...link }
+  } else {
+    navigationLinks.value.push({ ...link })
+  }
+}
+
+// Method to add supplemental links from other components
+function addSupplementalLink(link) {
+  const existingIndex = supplementalLinks.value.findIndex(l => l.id === link.id)
+  if (existingIndex >= 0) {
+    supplementalLinks.value[existingIndex] = { ...link }
+  } else {
+    supplementalLinks.value.push({ ...link })
+  }
+}
+
+// Method to remove links
+function removeNavigationLink(linkId) {
+  navigationLinks.value = navigationLinks.value.filter(link => link.id !== linkId)
+}
+
+function removeSupplementalLink(linkId) {
+  supplementalLinks.value = supplementalLinks.value.filter(link => link.id !== linkId)
+}
+
+// Method to clear all links
+function clearNavigationLinks() {
+  navigationLinks.value = []
+}
+
+function clearSupplementalLinks() {
+  supplementalLinks.value = []
+}
+
+// Method to get all links
+function getNavigationLinks() {
+  return [...navigationLinks.value]
+}
+
+function getSupplementalLinks() {
+  return [...supplementalLinks.value]
+}
+
+onMounted(() => {
+  // Make the sidebar globally accessible
+  window.sidebar = {
+    get isOpen() { return isOpen.value },
+    set isOpen(val) { isOpen.value = val },
+    toggle,
+    open,
+    close,
+    addNavigationLink,
+    addSupplementalLink,
+    removeNavigationLink,
+    removeSupplementalLink,
+    clearNavigationLinks,
+    clearSupplementalLinks,
+    getNavigationLinks,
+    getSupplementalLinks
+  }
+})
+
+defineExpose({
+  isOpen,
+  navigationLinks,
+  supplementalLinks,
+  toggle,
+  open,
+  close,
+  isActive,
+  addNavigationLink,
+  addSupplementalLink,
+  removeNavigationLink,
+  removeSupplementalLink,
+  clearNavigationLinks,
+  clearSupplementalLinks,
+  getNavigationLinks,
+  getSupplementalLinks
+})
+</script>
+
+<style scoped>
+.mainnav {
+  padding: 1rem 0;
+}
+
+.navigation-links,
+.supplemental-links {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.navigation-links li,
+.supplemental-links li {
+  margin: 0;
+  padding: 0;
+}
+
+.navigation-links a,
+.supplemental-links a {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  color: #333;
+  text-decoration: none;
+  transition: background-color 0.2s ease;
+  border-left: 3px solid transparent;
+}
+
+.navigation-links a:hover,
+.supplemental-links a:hover {
+  background: #f8f9fa;
+  color: #007bff;
+}
+
+.navigation-links a.active {
+  background: #e3f2fd;
+  color: #007bff;
+  border-left-color: #007bff;
+}
+
+.navigation-links a.router-link-active {
+  background: #e3f2fd;
+  color: #007bff;
+  border-left-color: #007bff;
+}
+
+.icon {
+  font-size: 1.2em;
+  width: 1.5rem;
+  text-align: center;
+}
+
+.title {
+  font-weight: 500;
+}
+
+.supplemental-links {
+  border-top: 1px solid #eee;
+  margin-top: 1rem;
+  padding-top: 1rem;
+}
+
+.supplemental-links a {
+  font-size: 0.9rem;
+  color: #666;
+}
+
+.supplemental-links a:hover {
+  color: #007bff;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .sidebar {
+    width: 100%;
+    left: -100%;
+  }
+  
+  .sidebar.shown {
+    left: 0;
+  }
+}
+</style>