1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<header>
  <div id="logo" on="tap:sidebar.open">Open mip-sidebar</div>
</header>
<mip-sidebar
  id="sidebar"
  layout="nodisplay"
  class="mip-hidden">
  <ul>
    <li>
      <a href="https://www.mipengine.org/">MIP官网</a>
      <button on="tap:sidebar.close"> X </button>
    </li>
    <li>Nav item 1</li>
    <li>Nav item 2</li>
    <li>Nav item 3</li>
    <li>
      Nav item 4 - Image
      <mip-img
        src="https://www.mipengine.org/favicon.ico"
        width="32"
        height="32"
        alt="mipengine ico"></mip-img>
    </li>
    <li>Nav item 5</li>
    <li>Nav item 6</li>
  </ul>
</mip-sidebar>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<header>
  <div id="logo" on="tap:right-sidebar.open">Open mip-sidebar</div>
</header>
<mip-sidebar 
  id="right-sidebar"
  layout="nodisplay"
  side="right"
  class="mip-hidden">
  <ul>
    <li>
      <a href="https://www.mipengine.org/">MIP官网</a>
      <button on="tap:right-sidebar.close"> X </button>
    </li>
    <li>Nav item 1</li>
    <li>Nav item 2</li>
    <li>Nav item 3</li>
    <li>
      Nav item 4 - Image
      <mip-img
        src="https://www.mipengine.org/favicon.ico"
        width="32"
        height="32"
        alt="mipengine ico">
      </mip-img>
    </li>
    <li>Nav item 5</li>
    <li>Nav item 6</li>
    <li>placeholder</li>
    <li>placeholder</li>
    <li>placeholder</li>
    <li>placeholder</li>
    <li>placeholder</li>
    <li>placeholder</li>
    <li>placeholder</li>
    <li>placeholder</li>
    <li>placeholder</li>
    <li>placeholder</li>
    <li>placeholder</li>
    <li>placeholder</li>
    <li>placeholder</li>
    <li>placeholder</li>
  </ul>
</mip-sidebar>