Vue.component("ito-nav-sp", {
  props: ["main"],
  template: `<div>
    <nav class="py-2 bg-green fixed-top d-block d-md-none">
        <div class="container">
          <div
            class="d-flex justify-content-between align-items-center font-white"
          >
            <div class="logo">
            <a :href="[ main ? './index.html' : '../index.html']">
            <img :src="[ main ? './assets/img/logo.png' : '../assets/img/logo.png'] " alt="logo" 
                 style="vertical-align: bottom;"/>
              <span class="fw-bold iphone-se-font-12"><div style="display:inline-block;vertical-align:bottom;">ITO <br>HOSPITAL</div>
              </span></a>
            </div>
            <div class="iphone-se-font-13">
              <img
                :src="[main ? './assets/img/icon-phone-fill.png' : '../assets/img/icon-phone-fill.png']"
                alt="telephone"
              /><span class="ps-1">Inquiries</span>
              <div><a href="tel:03-3402-7411">03-3402-7411</a></div>
            </div>
            <div>
            <div class="nav-right icon-menu">
            <div
              class="button icon-menu-btn"
              id="btn"
              @click="menuOpen($event)"
            >
              <div class="bar top"></div>
              <div class="bar middle"></div>
              <div class="bar bottom"></div>
            </div>
            </div>
            </div>
          </div>
        </div>
      </nav>
      <nav class="py-2 fixed-bottom d-block d-md-none" style="bottom: 20px; pointer-events: none; z-index: 3;">
        <div class="container">
          <div class="d-flex justify-content-between align-items-center">
            <div></div>
            <div class="nav-right icon-menu" onclick="window.scrollTo(0, 0);" style="cursor: pointer; pointer-events: visible;z-index: 3;">
              <img style="width: 40px;" src="./assets/img/page-up.png">
            </div>
          </div>
        </div>
      </nav>
      </div>`,
  methods: {
    menuOpen: function (e) {
      e.currentTarget.classList.toggle("active");
      var sidebar = document.querySelector(".sidebar");
      sidebar.classList.toggle("active");
    },
  },
});