vue3-uikit

1
<template>
2
    <nav class="sidebar">
3
      <ul>
4
        <li v-for="element in elements" :key="element">
5
          <router-link :to="`/elements/${element}`">{{ element }}</router-link>
6
        </li>
7
      </ul>
8
    </nav>
9
  </template>
10
  
11
  <script>
12

13
  export default {
14
    name: 'Sidebar',
15
    data() {
16
      return {
17
        elements: [
18
          'Button',
19
          'Input',          
20
          'Modal',
21
          'Card',
22
          'Accordion',
23
          'Badge',
24
          'Pagination',
25
          'Breadcrumb',
26
          'Progress',
27
        ],
28
      };
29
    },
30
  };
31
  </script>
32
  
33
  <style scoped>
34
  .sidebar {
35
    background-color: #f5f5f5;
36
    width: 200px;
37
    padding: 16px;
38
  }
39
  
40
  .sidebar ul {
41
    list-style: none;
42
    padding: 0;
43
  }
44
  
45
  .sidebar li {
46
    margin-bottom: 8px;
47
  }
48
  
49
  .sidebar a {
50
    color: #6200ea;
51
    text-decoration: none;
52
  }
53
  
54
  .sidebar a:hover {
55
    text-decoration: underline;
56
  }
57

58
  @media (max-width: 600px) {
59

60
    .sidebar {
61
      width: auto;
62
    }
63

64
  }
65
  </style>
66