UsersList.vue 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. <template>
  2. <div class='sidebar' transition='slide' v-if='$parent.sidebars.users'>
  3. <div class='inner-wrapper'>
  4. <div class='title'>Users</div>
  5. <h5 class="center">Total users: {{$parent.userCount}}</h5>
  6. <aside class="menu">
  7. <ul class="menu-list">
  8. <li v-for="user in $parent.users">
  9. <a href="#" v-link="{ path: '/u/' + user }" target="_blank">@{{user}}</a>
  10. </li>
  11. </ul>
  12. </aside>
  13. </div>
  14. </div>
  15. </template>
  16. <style type='scss' scoped>
  17. .sidebar {
  18. position: fixed;
  19. z-index: 1;
  20. top: 0;
  21. right: 0;
  22. width: 300px;
  23. height: 100vh;
  24. background-color: #fff;
  25. box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  26. }
  27. .inner-wrapper {
  28. top: 64px;
  29. position: relative;
  30. }
  31. .slide-transition {
  32. transition: transform 0.6s ease-in-out;
  33. transform: translateX(0);
  34. }
  35. .slide-enter, .slide-leave {
  36. transform: translateX(100%);
  37. }
  38. .title {
  39. background-color: rgb(3, 169, 244);
  40. text-align: center;
  41. padding: 10px;
  42. color: white;
  43. font-weight: 600;
  44. }
  45. .menu { padding: 0 20px; }
  46. .menu-list li a:hover { color: #000 !important; }
  47. </style>