ToggleSideBarButton.vue 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. <script lang="ts">
  2. export default {
  3. emits: ['toggle']
  4. }
  5. </script>
  6. <template>
  7. <div class="sidebar-button" @click="$emit('toggle')">
  8. <svg
  9. class="icon"
  10. xmlns="http://www.w3.org/2000/svg"
  11. aria-hidden="true"
  12. role="img"
  13. viewBox="0 0 448 512"
  14. >
  15. <path
  16. fill="currentColor"
  17. d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"
  18. class
  19. />
  20. </svg>
  21. </div>
  22. </template>
  23. <style>
  24. .sidebar-button {
  25. position: absolute;
  26. top: 0.6rem;
  27. left: 1rem;
  28. display: none;
  29. padding: 0.6rem;
  30. cursor: pointer;
  31. }
  32. .sidebar-button .icon {
  33. display: block;
  34. width: 1.25rem;
  35. height: 1.25rem;
  36. }
  37. @media screen and (max-width: 719px) {
  38. .sidebar-button {
  39. display: block;
  40. }
  41. }
  42. </style>