UNPKG

@vuepress/theme-default/components/SidebarButton.vue

Version:

990 BPlain TextView Raw

1<template>
<div
  class="sidebar-button"
  @click="$emit('toggle-sidebar')"
>
  <svg
    class="icon"
    xmlns="http://www.w3.org/2000/svg"
    aria-hidden="true"
    role="img"
    viewBox="0 0 448 512"
  >
    <path
      fill="currentColor"
      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"
      class=""
    />
  </svg>
</div>
20</template>
21
22<style lang="stylus">
sidebar-button
cursor pointer
display none
width 1.25rem
height 1.25rem
position absolute
padding 0.6rem
top 0.6rem
left 1rem
.icon
  display block
  width 1.25rem
  height 1.25rem
36
37@media (max-width: $MQMobile)
.sidebar-button
  display block
40</style>

1	`<template>`
2	`<div`
3	`class="sidebar-button"`
4	`@click="$emit('toggle-sidebar')"`
5	`>`
6	`<svg`
7	`class="icon"`
8	`xmlns="http://www.w3.org/2000/svg"`
9	`aria-hidden="true"`
10	`role="img"`
11	`viewBox="0 0 448 512"`
12	`>`
13	`<path`
14	`fill="currentColor"`
15	`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"`
16	`class=""`
17	`/>`
18	`</svg>`
19	`</div>`
20	`</template>`
21
22	`<style lang="stylus">`
23	`.sidebar-button`
24	`cursor pointer`
25	`display none`
26	`width 1.25rem`
27	`height 1.25rem`
28	`position absolute`
29	`padding 0.6rem`
30	`top 0.6rem`
31	`left 1rem`
32	`.icon`
33	`display block`
34	`width 1.25rem`
35	`height 1.25rem`
36
37	`@media (max-width: $MQMobile)`
38	`.sidebar-button`
39	`display block`
40	`</style>`