oceanhelm 0.0.11 → 0.0.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -23,16 +23,19 @@
23
23
 
24
24
  <!-- Dropdown -->
25
25
  <template v-else-if="item.type === 'dropdown'">
26
- <a class="dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
26
+ <a class="dropdown-toggle" @click.prevent="toggleDropdown(item)" style="cursor: pointer;">
27
27
  <i :class="item.icon" v-if="item.icon"></i>
28
28
  {{ item.label }}
29
+ <i class="" :class="{ open: item.open }"></i>
29
30
  </a>
30
- <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
31
- <a v-for="(subItem, subIndex) in getFilteredChildren(item)" :key="subIndex" class="dropdown-item black"
32
- @click.prevent="handleAction(subItem)" style="cursor: pointer;">
33
- {{ subItem.label }}
34
- </a>
35
- </div>
31
+
32
+ <ul v-show="item.open" class="sidebar-dropdown">
33
+ <li v-for="(subItem, subIndex) in getFilteredChildren(item)" :key="subIndex">
34
+ <a class="dropdown-item" @click.prevent="handleAction(subItem)">
35
+ {{ subItem.label }}
36
+ </a>
37
+ </li>
38
+ </ul>
36
39
  </template>
37
40
 
38
41
  <!-- Separator -->
@@ -130,6 +133,16 @@ export default {
130
133
  },
131
134
 
132
135
  methods: {
136
+ toggleDropdown(item) {
137
+ // Close others if you want accordion behavior
138
+ this.filteredMenuItems.forEach(i => {
139
+ if (i !== item && i.type === 'dropdown') {
140
+ i.open = false;
141
+ }
142
+ });
143
+
144
+ item.open = !item.open;
145
+ },
133
146
  // Get filtered children for dropdown items
134
147
  getFilteredChildren(item) {
135
148
  if (!item.children) return [];
@@ -216,4 +229,38 @@ export default {
216
229
 
217
230
  emits: ['navigate', 'action', 'item-click']
218
231
  }
219
- </script>
232
+ </script>
233
+
234
+ <style>
235
+ /* Dropdown container */
236
+ .sidebar-dropdown {
237
+ list-style: none;
238
+ padding-left: 20px;
239
+ margin: 5px 0 10px 0;
240
+ }
241
+
242
+ /* Dropdown items */
243
+ .sidebar-dropdown li a {
244
+ display: block;
245
+ padding: 8px 15px;
246
+ font-size: 14px;
247
+ color: #ddd;
248
+ border-radius: 4px;
249
+ transition: background 0.2s ease;
250
+ }
251
+
252
+ .sidebar-dropdown li a:hover {
253
+ background: rgba(255, 255, 255, 0.1);
254
+ }
255
+
256
+ /* Dropdown arrow */
257
+ .dropdown-arrow {
258
+ float: right;
259
+ transition: transform 0.2s ease;
260
+ }
261
+
262
+ .dropdown-arrow.open {
263
+ transform: rotate(180deg);
264
+ }
265
+
266
+ </style>