chore: OliveTin 3k progress

frontend/resources/vue/components/SidebarExample.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="sidebar-example">
+    <h3>Sidebar Management Example</h3>
+    
+    <div class="controls">
+      <button @click="addCustomNavLink" class="btn btn-primary">
+        Add Custom Nav Link
+      </button>
+      
+      <button @click="addCustomSupplementalLink" class="btn btn-secondary">
+        Add Custom Supplemental Link
+      </button>
+      
+      <button @click="removeCustomLinks" class="btn btn-danger">
+        Remove Custom Links
+      </button>
+      
+      <button @click="toggleSidebar" class="btn btn-info">
+        Toggle Sidebar
+      </button>
+    </div>
+    
+    <div class="info">
+      <p><strong>Available Sidebar Methods:</strong></p>
+      <ul>
+        <li><code>window.sidebar.addNavigationLink(link)</code> - Add navigation link</li>
+        <li><code>window.sidebar.addSupplementalLink(link)</code> - Add supplemental link</li>
+        <li><code>window.sidebar.removeNavigationLink(id)</code> - Remove navigation link</li>
+        <li><code>window.sidebar.removeSupplementalLink(id)</code> - Remove supplemental link</li>
+        <li><code>window.sidebar.toggle()</code> - Toggle sidebar visibility</li>
+        <li><code>window.sidebar.open()</code> - Open sidebar</li>
+        <li><code>window.sidebar.close()</code> - Close sidebar</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SidebarExample',
+  data() {
+    return {
+      customLinkId: 1
+    }
+  },
+  methods: {
+    addCustomNavLink() {
+      if (window.sidebar) {
+        window.sidebar.addNavigationLink({
+          id: `custom-nav-${this.customLinkId}`,
+          title: `Custom Nav ${this.customLinkId}`,
+          path: `/custom-${this.customLinkId}`,
+          icon: '🔗'
+        })
+        this.customLinkId++
+      } else {
+        console.warn('Sidebar not available')
+      }
+    },
+    
+    addCustomSupplementalLink() {
+      if (window.sidebar) {
+        window.sidebar.addSupplementalLink({
+          id: `custom-supplemental-${this.customLinkId}`,
+          title: `Custom Link ${this.customLinkId}`,
+          url: `https://example.com/custom-${this.customLinkId}`,
+          target: '_blank',
+          icon: '🔗'
+        })
+        this.customLinkId++
+      } else {
+        console.warn('Sidebar not available')
+      }
+    },
+    
+    removeCustomLinks() {
+      if (window.sidebar) {
+        // Remove all custom links
+        for (let i = 1; i < this.customLinkId; i++) {
+          window.sidebar.removeNavigationLink(`custom-nav-${i}`)
+          window.sidebar.removeSupplementalLink(`custom-supplemental-${i}`)
+        }
+        this.customLinkId = 1
+      } else {
+        console.warn('Sidebar not available')
+      }
+    },
+    
+    toggleSidebar() {
+      if (window.sidebar) {
+        window.sidebar.toggle()
+      } else {
+        console.warn('Sidebar not available')
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.sidebar-example {
+  padding: 1rem;
+  background: #f8f9fa;
+  border-radius: 8px;
+  margin: 1rem 0;
+}
+
+.controls {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  flex-wrap: wrap;
+}
+
+.btn {
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.875rem;
+  transition: all 0.2s ease;
+}
+
+.btn-primary {
+  background: #007bff;
+  color: white;
+}
+
+.btn-primary:hover {
+  background: #0056b3;
+}
+
+.btn-secondary {
+  background: #6c757d;
+  color: white;
+}
+
+.btn-secondary:hover {
+  background: #545b62;
+}
+
+.btn-danger {
+  background: #dc3545;
+  color: white;
+}
+
+.btn-danger:hover {
+  background: #c82333;
+}
+
+.btn-info {
+  background: #17a2b8;
+  color: white;
+}
+
+.btn-info:hover {
+  background: #138496;
+}
+
+.info {
+  background: white;
+  padding: 1rem;
+  border-radius: 4px;
+  border-left: 4px solid #007bff;
+}
+
+.info ul {
+  margin: 0.5rem 0;
+  padding-left: 1.5rem;
+}
+
+.info code {
+  background: #f1f3f4;
+  padding: 0.125rem 0.25rem;
+  border-radius: 3px;
+  font-family: monospace;
+  font-size: 0.875rem;
+}
+</style>