flylocal-web/components/TheSideBar.vue

<template>
  <div>
    <button class="btn btn--primary sidebar-button" @click="showSidebar">
      <svg
        v-if="!isSidebarVisible"
        xmlns="http://www.w3.org/2000/svg"
        class="icon icon-tabler icon-tabler-menu"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        stroke-width="3"
        stroke="#ffffff"
        fill="none"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <line x1="4" y1="8" x2="20" y2="8" />
        <line x1="4" y1="16" x2="20" y2="16" />
      </svg>
      <svg
        v-if="isSidebarVisible"
        xmlns="http://www.w3.org/2000/svg"
        class="icon icon-tabler icon-tabler-arrow-bar-to-right"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        stroke-width="3"
        stroke="#ffffff"
        fill="none"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <line x1="14" y1="12" x2="4" y2="12" />
        <line x1="14" y1="12" x2="10" y2="16" />
        <line x1="14" y1="12" x2="10" y2="8" />
        <line x1="20" y1="4" x2="20" y2="20" />
      </svg>
    </button>
    <aside
      :class="[
        'sidebar-container',
        { 'sidebar-container--hide': !isSidebarVisible },
        { 'sidebar-container--show': isSidebarVisible },
      ]"
    >
      <div class="sidebar">
        <div class="sidebar-content">
          <h1 class="h1--about">
            What is<br>FlyLocal Alaska?
          </h1>
          <div class="img-divider">
            <img
              class="img--about"
              src="https://openmoji.org/data/black/svg/1F3D4.svg"
              alt=""
              srcset=""
            >
            <img
              class="img--about"
              src="https://openmoji.org/data/black/svg/1F4C5.svg"
              alt=""
              srcset=""
            >
            <img
              class="img--about"
              src="https://openmoji.org/data/black/svg/1F601.svg"
              alt=""
              srcset=""
            >
          </div>
          <p class="text--about">
            <strong>FlyLocal-Alaska</strong> is an easy way to view the
            schedules for your favorite Alaskan airlines - all in one place.
          </p>
          <h1 class="h1--about">
            Why FlyLocal<br>in Alaska?
          </h1>
          <div class="img-divider">
            <img
              class="img--about"
              src="https://openmoji.org/data/black/svg/1F6AB.svg"
              alt=""
              srcset=""
            >
            <img
              class="img--about"
              src="https://openmoji.org/data/black/svg/1F697.svg"
              alt=""
              srcset=""
            >
            <img
              class="img--about"
              src="https://openmoji.org/data/black/svg/1F6E3.svg"
              alt=""
              srcset=""
            >
          </div>
          <p class="text--about">
            <strong>80% of Alaskan communities are not connected to the road
              system.</strong>
            Therefore, they rely heavily on local airlines for transportation.
          </p>
          <div class="img-divider">
            <img
              class="img--about"
              src="https://openmoji.org/data/black/svg/1F6A3.svg"
              alt=""
              srcset=""
            >
            <img
              class="img--about"
              src="https://openmoji.org/data/black/svg/1F3D5.svg"
              alt=""
              srcset=""
            >
            <img
              class="img--about"
              src="https://openmoji.org/data/black/svg/1F43B.svg"
              alt=""
              srcset=""
            >
          </div>
          <p class="text--about">
            <strong>See new places.</strong> There are ~400 public airports in
            Alaska, but only 20 (or 5%) with service from major US carriers.
          </p>
          <div class="img-divider">
            <img
              class="img--about"
              src="https://openmoji.org/data/black/svg/1F6E9.svg"
              alt=""
              srcset=""
            >
            <img
              class="img--about"
              src="https://openmoji.org/data/black/svg/1F681.svg"
              alt=""
              srcset=""
            >
            <img
              class="img--about"
              src="https://openmoji.org/data/black/svg/1F6F8.svg"
              alt=""
              srcset=""
            >
          </div>
          <p class="text--about">
            Enjoy a completely <strong>unique flying experience</strong>. Have
            you ever landed on a lake in a seaplane? Now is your chance to check
            it off the bucket-list.
          </p>
          <h1 class="h1--about">
            Up-to-date<br>Travel Info
          </h1>
          <ul class="about-carriers list-lrg">
            <li @click="clickedLink('alaska-travel-info')">
              <a href="https://covid19.alaska.gov/travelers/" target="_blank">
                <img
                  class="img--carrier-logo"
                  :src="require(`@/assets/images/orgs/alaska-travel-info.png`)"
                  alt="Alaska Travel Info"
                  title="Alaska Travel Info"
                >
              </a>
            </li>
          </ul>
          <h1 class="h1--about">
            Explore Alaska<br>on these great local airlines
          </h1>
          <ul class="about-carriers">
            <li v-for="carrier in carriers" :key="carrier.id" @click="clickedCarrier(carrier.fields.Slug)">
              <a :href="carrier.fields.BookingLink" target="_blank">
                <img
                  class="img--carrier-logo"
                  :src="require(`@/assets/images/carriers/${carrier.fields.Slug}.png`)"
                  :alt="carrier.fields.Name"
                  :title="carrier.fields.Name"
                >
              </a>
            </li>
          </ul>
          <h1 class="h1--about">
            Proud Member of
          </h1>
          <ul class="about-carriers list-med">
            <li @click="clickedLink('aaca')">
              <a href="https://alaskaaircarriers.org" target="_blank">
                <img
                  class="img--carrier-logo"
                  :src="require(`@/assets/images/orgs/aaca.png`)"
                  alt="Alaska Air Carriers Association"
                  title="Alaska Air Carriers Association"
                >
              </a>
            </li>
            <li @click="clickedLink('alaska-tia')">
              <a href="https://alaskatia.org" target="_blank">
                <img
                  class="img--carrier-logo"
                  :src="require(`@/assets/images/orgs/alaska-tia.png`)"
                  alt="Alaska Travel Industry Association"
                  title="Alaska Travel Industry Association"
                >
              </a>
            </li>
          </ul>
          <h1 class="h1--about">
            Featured on
          </h1>
          <ul class="about-carriers list-med">
            <li @click="clickedLink('1-million-cups')">
              <a href="https://www.1millioncups.com/anchorage/presentations/flylocal-alaska-35304" target="_blank">
                <img
                  class="img--carrier-logo"
                  :src="require(`@/assets/images/orgs/1-million-cups.png`)"
                  alt="1 Million Cups"
                  title="1 Million Cups"
                >
              </a>
            </li>
            <li @click="clickedLink('travel-alaska')">
              <a href="https://www.travelalaska.com/offers/FlyLocal/Plane-Statewide.aspx" target="_blank">
                <img
                  class="img--carrier-logo"
                  style="background: black; border-radius: 0.5rem; padding-left: 0.4rem;"
                  :src="require(`@/assets/images/orgs/travel-alaska.png`)"
                  alt="Travel Alaska"
                  title="Travel Alaska"
                >
              </a>
            </li>
          </ul>
          <div class="company-footer">
            ⎨&nbsp; FlyLocal v5.0.2.3 &nbsp;&nbsp;𐄙&nbsp;&nbsp; ©2021 FlyLocal, Inc &nbsp;⎬
          </div>
        </div>
        <ul class="contact">
          <li class="contact-item" @click="clickedLink('twitter')">
            <a href="https://twitter.com/fly_local" target="_blank">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="icon icon-tabler icon-tabler-brand-twitter"
                width="40"
                height="40"
                viewBox="0 0 24 24"
                stroke-width="2"
                stroke="#007fff"
                fill="none"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                <path
                  d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z"
                />
              </svg>
              <span>@fly_local</span>
            </a>
          </li>
          <li class="contact-item" @click="clickedLink('facebook')">
            <a href="https://facebook.com/iFlyLocal" target="_blank">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="icon icon-tabler icon-tabler-brand-facebook"
                width="40"
                height="40"
                viewBox="0 0 24 24"
                stroke-width="2"
                stroke="#007fff"
                fill="none"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                <path
                  d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3"
                />
              </svg>
              <span>@iFlyLocal</span>
            </a>
          </li>
          <li class="contact-item" @click="clickedLink('instagram')">
            <a href="https://instagram.com/fly_local" target="_blank">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="icon icon-tabler icon-tabler-brand-instagram"
                width="40"
                height="40"
                viewBox="0 0 24 24"
                stroke-width="2"
                stroke="#007fff"
                fill="none"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                <rect x="4" y="4" width="16" height="16" rx="4" />
                <circle cx="12" cy="12" r="3" />
                <line x1="16.5" y1="7.5" x2="16.5" y2="7.501" />
              </svg>
              <span>@fly_local</span>
            </a>
          </li>
          <li class="contact-item" @click="clickedLink('team-email')">
            <a href="mailto:team@iflylocal.com" target="_blank">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="icon icon-tabler icon-tabler-user"
                width="40"
                height="40"
                viewBox="0 0 24 24"
                stroke-width="2"
                stroke="#007fff"
                fill="none"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                <circle cx="12" cy="7" r="4" />
                <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
              </svg>
              <span>contact us</span>
            </a>
          </li>
          <li class="contact-item" @click="clickedLink('partners-email')">
            <a href="mailto:partners@iflylocal.com" target="_blank">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="icon icon-tabler icon-tabler-briefcase"
                width="40"
                height="40"
                viewBox="0 0 24 24"
                stroke-width="2"
                stroke="#007fff"
                fill="none"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                <rect x="3" y="7" width="18" height="13" rx="2" />
                <path d="M8 7v-2a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v2" />
                <line x1="12" y1="12" x2="12" y2="12.01" />
                <path d="M3 13a20 20 0 0 0 18 0" />
              </svg>
              <span>partner with us</span>
            </a>
          </li>
        </ul>
      </div>
    </aside>
    <div
      :class="[
        'sidebar-blockui',
        { 'sidebar-blockui--show': isSidebarVisible },
      ]"
    />
  </div>
</template>

<script>
export default {
  data: () => ({
    isSidebarVisible: false,
    carriers: []
  }),
  async fetch () {
    const filterFormula = 'AND(IsActive=1,FIND("Alaska",Region)>0)'
    const sortFormula = '&sort[0][field]=Name&sort[0][direction]=asc'

    let offset
    let data = []

    while (true) {
      const offsetParam = offset ? `&offset=${offset}` : ''
      const res = await fetch(`https://api.airtable.com/v0/appiQwfVZixRgRICe/Carriers_Alaska?filterByFormula=${filterFormula}${sortFormula}${offsetParam}`, {
        method: 'GET',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
          Authorization: 'Bearer keyJ2ht64ZSN57AG1'
        }
      })

      const json = await res.json()
      offset = await json.offset
      data = [...data, ...await json.records]
      // await console.log(data.length)

      if (await !offset) { break } // Were done let's stop this thing
    }

    this.carriers = [...data]
  },
  methods: {
    showSidebar () {
      this.isSidebarVisible = !this.isSidebarVisible

      if(this.isSidebarVisible) {
        this.$segment.track('sidebar__show_sidebar')
      } else {
        this.$segment.track('sidebar__hide_sidebar')
      }
    },
    clickedCarrier (slug) {
      this.$segment.track('sidebar__open_carrier', {
        carrier: slug
      });
    },
    clickedLink (slug) {
      this.$segment.track('sidebar__open_link', {
        carrier: slug
      });      
    }
  }
}
</script>

<style>
:root {
  --sidebar-width: 50ch;
}

.sidebar-container {
  z-index: 1002;
  position: fixed;
  top: 0;
  right: 0;
  display: flex;
  justify-content: flex-start;
  height: 100vh;
  transition: all 0.3s;
  pointer-events: none;
}

.sidebar-container.sidebar-container--hide {
  transform: translateX(calc(var(--sidebar-width) + 6rem));
}

.sidebar-container.sidebar-container--show {
  transform: translateX(0);
}

.sidebar {
  background: white;
  padding: 3rem 0 3rem 3rem;
  border-radius: 3rem 0 0 3rem;
  pointer-events: all;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.sidebar-content {
  overflow: auto;
  max-width: var(--sidebar-width);
  height: calc(100vh - 11rem);
  padding-right: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.img--about {
  height: min(3rem, 60px);
  display: inline-block;
}

div.img-divider {
  display: flex;
  justify-content: space-around;
  padding: 0 25%;
}

.img--carrier-logo {
  max-width: 6rem;
  max-height: 6rem;
}

.list-med .img--carrier-logo {
  max-width: 9rem;
  max-height: 9rem;
}

.list-lrg .img--carrier-logo {
  max-width: 15rem;
  max-height: 15rem;
}

h1.h1--about {
  font-weight: 200;
  text-transform: uppercase;
  color: #007fff;
  font-size: min(2.7rem, 50px);
  line-height: 1;
  text-align: center;
  margin-bottom: 1rem;
}

.text--about {
  margin-top: 1rem;
  margin-bottom: 1rem;
  max-width: 40ch;
  font-size: min(1rem, 18px);
}

.text--about:nth-of-type(1),
.text--about:nth-of-type(4) {
  margin-bottom: 5rem;
}

.about-carriers {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 5rem;
}

.about-carriers li {
  filter: saturate(0%);
  transition: 0.3s all;
  position: relative;
}

/* .about-carriers li::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: red;
  content: '';
} */

.about-carriers li:hover {
  filter: saturate(100%);
  transform: scale(1.05);
}

.sidebar-button {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1003;
}

.sidebar-blockui {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  filter: blur(0.5);
  background-color: #007fff;
  transition: all 0.3s;
  pointer-events: none;
  z-index: 1001;
}

.sidebar-blockui.sidebar-blockui--show {
  opacity: 0.8;
  pointer-events: all;
}

ul.contact {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 3rem 3rem 0 0;
  max-width: var(--sidebar-width);
}

li.contact-item a span {
  color: #007fff;
  transition: all 0.3s;
}

ul.contact li.contact-item a {
  display: flex;
  flex-direction: row;
  align-items: center;
  transition: all 0.3s;
}

ul.contact li.contact-item a:hover span {
  color: #00ca00;
}

ul.contact li.contact-item a svg {
  max-height: 2rem;
  max-width: 2rem;
  stroke-width: 1;
  transition: all 0.3s;
}

ul.contact li.contact-item a:hover svg {
  stroke: #00ca00;
}

.company-footer {
  font-family: monospace;
  font-size: 0.8rem;
  text-transform: uppercase;
  color: gray;
}

</style>