flylocal-web/components/TheSideBar.vue

<template>
  <div>
    <div class="sidebar-buttons">
      <!-- {{ $cookies.get('email') }}
      {{ userEmail }} -->
      <button
        class="btn btn--primary"
        v-if="isSidebarVisible && userEmail"
        @click="logout"
      >
        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-logout" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
          <path d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2" />
          <path d="M7 12h14l-3 -3m0 6l3 -3" />
        </svg>
        logout
      </button>
      <a
        :href="$BASE_URL() + '/login'"
        class="btn btn--primary"
        v-if="isSidebarVisible && !userEmail"
      >
        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-login" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
          <path d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2" />
          <path d="M20 12h-13l3 -3m0 6l-3 -3" />
        </svg>
        login
      </a>
      <button class="btn btn--primary" @click="showSidebar">
        <svg
          v-if="!isSidebarVisible"
          xmlns="http://www.w3.org/2000/svg"
          class="icon icon-tabler icon-tabler-user-circle"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="#ffffff"
          fill="none"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
          <circle cx="12" cy="12" r="9" />
          <circle cx="12" cy="10" r="3" />
          <path
            d="M6.168 18.849a4 4 0 0 1 3.832 -2.849h4a4 4 0 0 1 3.834 2.855"
          />
        </svg>
        <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>
    </div>
    <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>
          <iframe
            id="lbry-iframe"
            src="https://odysee.com/$/embed/What-is-FlyLocal-%28fall%2C2021%2Cdesktop%29/4b6d3c94ef05cd3609a22df6b2b0d45c174957a8?r=29V3nQLvAKT88DXBMViaBRypn3iWW5WM"
            allowfullscreen
          ></iframe>
          <iframe
            v-if="false"
            id="lbry-iframe-mobile"
            src="https://odysee.com/$/embed/What-is-FlyLocal-%28fall%2C2021%2Cmobile%29/9af5d6ac694a83b95a5763dc74b87f76e6503b0e?r=Ct8Uk1dFJb5UoQzJN7ASdkypiqzkqqez"
            allowfullscreen
          ></iframe>
          <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.4.2 &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: [],
    userEmail: ''
  }),
  async fetch() {

    this.userEmail = this.$cookies.get('email');
    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,
      });
    },
    logout() {
      this.$cookies.remove('email');
      this.userEmail = '';
    }
  },
};
</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;
}

#lbry-iframe {
  width: calc(var(--sidebar-width) - 4rem);
  aspect-ratio: 560/315;
  margin-bottom: 2rem;
  border-radius: 2rem;
}

#lbry-iframe-mobile {
  width: calc(var(--sidebar-width) - 4rem);
  aspect-ratio: 315/560;
  margin-bottom: 2rem;
  border-radius: 2rem;
}

.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-buttons {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1003;
  display: flex;
  align-content: flex-end;
  gap: 1rem;
}

.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>