1<script>
 2  export let title = '';
 3  export let items = [];
 4</script>
 5
 6<div class="sidebar border-r-4 border-violet-500 rounded-lg">
 7  <h3 class="text-purple-500 text-3xl font-bold">{title}</h3>
 8  <ul>
 9    {#each items as item}
10      <li class="animate-bounce">{item.name}</li>
11    {/each}
12  </ul>
13</div>
14
15<style>
16  .sidebar {
17    border-right: 4px solid #8b5cf6;
18    border-radius: 16px;
19    font-family: 'Roboto', sans-serif;
20    background: #000000;
21  }
22
23  .sidebar h3 {
24    background: linear-gradient(135deg, #a855f7, #06b6d4);
25    -webkit-background-clip: text;
26    background-clip: text;
27  }
28
29  .animated-item {
30    animation: elastic 0.6s ease-out;
31    transition: height 0.4s ease;
32  }
33</style>