cja-phoenix 0.6.0 → 0.6.2

package/src/components/composite/CjaMenuBar.vue

@@ -0,0 +1,543 @@
+<template>
+  <header
+    class="main-header-container"
+    :class="{
+      'sidebar-active':
+        sidebarActive || (callModal?.active && activeViewport.md),
+    }"
+    id="page-header"
+    ref="headerEl"
+  >
+    <FixedContainer :active="activeViewport.lg" :size="{ width: '100%' }">
+      <div
+        class="main-header"
+        :class="{ 'has-categories': categories?.length }"
+      >
+        <div class="btn-sidebar-container" v-if="categories?.length">
+          <button
+            class="btn-sidebar m-cgg-icon--tlist"
+            @click="sidebarActive = !sidebarActive"
+          ></button>
+        </div>
+
+        <div class="logo-container">
+          <component
+            :is="homeNavigationEnabled ? 'a' : 'div'"
+            :href="homeNavigationEnabled ? '/' : ''"
+            class="logo-wrapper"
+          >
+            <img
+              height="26"
+              width="125"
+              :src="imageURL + 'CPJ-logo-header.svg'"
+            />
+          </component>
+        </div>
+
+        <div class="content-container">
+          <JourneyMacroSteps
+            :stepList="macroStepList"
+            v-if="activeViewport.lg && macroStepList"
+          />
+
+          <nav class="categories-container" v-else-if="categories?.length">
+            <div class="menu-category" v-for="category in categories">
+              <component
+                :is="category.link ? 'a' : 'div'"
+                class="category-label"
+                :href="category.link ? getStoryblokUrl(category.link) : ''"
+              >
+                {{ category.text }}
+                <span
+                  v-if="category.subLinks"
+                  class="m-cgg-icon--chevron-down"
+                ></span>
+              </component>
+              <Transition name="fade">
+                <div class="category-links-container" v-if="category.subLinks">
+                  <ul>
+                    <li v-for="menuLink in category.subLinks">
+                      <a :href="getStoryblokUrl(menuLink.link)">
+                        {{ menuLink.text }}
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+              </Transition>
+            </div>
+          </nav>
+
+          <slot name="content" v-else-if="$slots.content"></slot>
+        </div>
+
+        <div class="side-info" v-if="hasSideInfo">
+          <slot name="side"></slot>
+          <button
+            class="contact m-cgg-icon--phone"
+            v-if="hasContact"
+            @click="callModal.toggleModal()"
+          ></button>
+        </div>
+      </div>
+      <FixedContainer
+        v-if="!activeViewport.lg && macroStepList"
+        :size="{ width: '100%' }"
+        :position="{ left: '0', top: '0' }"
+      >
+        <JourneyMacroSteps :stepList="macroStepList" />
+      </FixedContainer>
+    </FixedContainer>
+  </header>
+
+  <Modal
+    ref="callModal"
+    v-if="hasContact"
+    :maxWidth="{ md: '470px', lg: '470px', xl: '470px' }"
+  >
+    <template #header>Precisa de ajuda?</template>
+    <template #body>
+      <div class="call-modal-body">
+        <div class="call-info">
+          <a class="phone-link" href="tel:211165765">
+            <span class="m-cgg-icon--phone"></span>
+            <span>211 165 765</span>
+          </a>
+          <div class="hours-wrapper">Seg - Sex: 10h às 19h</div>
+        </div>
+        <div class="call-cost">Custo de chamada para a rede fixa nacional</div>
+        <div class="btn-container">
+          <CjaButton :type="'secondary'" @click="callModal.closeModal()">
+            Voltar
+          </CjaButton>
+          <CjaButton @click="callContact">Ligar</CjaButton>
+        </div>
+      </div>
+    </template>
+  </Modal>
+
+  <Teleport to="body" v-if="categories?.length">
+    <Transition name="slide">
+      <nav class="categories-sidebar" v-if="sidebarActive">
+        <div class="menu-category" v-for="category in categories">
+          <CollapseContainer v-if="category.subLinks">
+            <template #header>
+              <div class="menu-category-link">
+                {{ category.text }}
+              </div>
+            </template>
+            <template #content>
+              <ul class="category-links-container" v-if="category.subLinks">
+                <li v-if="category.link">
+                  <a class="menu-link" :href="getStoryblokUrl(category.link)">
+                    {{ category.text }}
+                  </a>
+                </li>
+                <li v-for="menuLink in category.subLinks">
+                  <a class="menu-link" :href="getStoryblokUrl(menuLink.link)">
+                    {{ menuLink.text }}
+                  </a>
+                </li>
+              </ul>
+            </template>
+          </CollapseContainer>
+          <a
+            class="menu-category-link menu-link"
+            :href="getStoryblokUrl(category.link)"
+            v-else-if="category.link"
+          >
+            {{ category.text }}
+          </a>
+        </div>
+      </nav>
+    </Transition>
+    <Transition name="fade">
+      <div
+        class="categories-backdrop"
+        @click="sidebarActive = false"
+        v-if="sidebarActive"
+      ></div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import FixedContainer from "../structural/FixedContainer.vue";
+import CollapseContainer from "../structural/CollapseContainer.vue";
+import CjaButton from "../structural/CjaButton.vue";
+import { MacroStep, MenuCategory } from "../../types";
+import JourneyMacroSteps from "./JourneyMacroSteps.vue";
+import Modal from "../structural/Modal.vue";
+import { ref } from "vue";
+import { getStoryblokUrl } from "../../utils";
+import { watch } from "vue";
+import { useViewportDetector, useGlobalProperties } from "../../utils";
+
+withDefaults(
+  defineProps<{
+    homeNavigationEnabled?: boolean;
+    hasSideInfo?: boolean;
+    macroStepList?: MacroStep[];
+    categories?: MenuCategory[];
+    hasContact?: boolean;
+  }>(),
+  {
+    homeNavigationEnabled: true,
+    hasSideInfo: true,
+    hasContact: true,
+  }
+);
+
+const { activeViewport } = useViewportDetector();
+const { imageURL } = useGlobalProperties();
+const callModal = ref();
+const sidebarActive = ref(false);
+
+const callContact = () => {
+  window.open("tel:211165765", "_self");
+};
+
+watch(
+  () => sidebarActive.value,
+  (newVal) => {
+    if (newVal && callModal.value.active) {
+      callModal.value.closeModal();
+    }
+  }
+);
+
+watch(
+  () => callModal.value?.active,
+  (newVal) => {
+    if (callModal.value && newVal && sidebarActive.value) {
+      sidebarActive.value = false;
+    }
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/shadows.scss";
+@import "../../assets/breakpoints.scss";
+@import "../../assets/backdrop.scss";
+
+header.main-header-container {
+  position: relative;
+  z-index: 100;
+  transition: z-index 0s linear 0.4s;
+
+  &.sidebar-active {
+    z-index: 1002;
+    transition: z-index 0s linear;
+  }
+
+  .main-header {
+    position: relative;
+    z-index: 1;
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    gap: 16px;
+    background-color: #fff;
+    height: 60px;
+    padding: 16px 24px;
+    box-shadow: $box-shadow-m;
+
+    @media screen and (min-width: $break-lg-min) {
+      padding: 24px;
+      height: 75px;
+    }
+
+    @media screen and (min-width: $break-xl-min) {
+      gap: 24px;
+    }
+
+    &.has-categories {
+      @media screen and (max-width: $break-md-max) {
+        grid-template-columns: auto auto 1fr auto;
+      }
+    }
+
+    .logo-container {
+      user-select: none;
+
+      a,
+      img {
+        display: block;
+        width: 125px;
+      }
+    }
+
+    .side-info {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+
+      .contact {
+        background: #076b9c;
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        padding: 0;
+        border: none;
+        outline: none;
+        gap: 8px;
+        font-weight: 700;
+        font-size: 10px;
+        color: #fff;
+      }
+    }
+  }
+}
+
+.call-modal-body {
+  max-width: 400px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  font-size: 14px;
+  line-height: 18px;
+
+  @media screen and (min-width: $break-sm-min) {
+    font-size: 16px;
+    line-height: 20px;
+  }
+
+  .call-info {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    white-space: nowrap;
+
+    a {
+      display: flex;
+      flex-direction: row;
+      gap: 8px;
+      align-items: center;
+      color: inherit;
+
+      .m-cgg-icon--phone {
+        background-color: #076b9c;
+        height: 20px;
+        width: 20px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        color: #fff;
+        border-radius: 50%;
+        font-size: 9px;
+      }
+    }
+
+    .hours-wrapper {
+      padding-left: 10px;
+      margin-left: 10px;
+      border-left: 1px solid #dedede;
+
+      @media screen and (min-width: $break-sm-min) {
+        padding-left: 15px;
+        margin-left: 15px;
+      }
+    }
+  }
+
+  .call-cost {
+    text-align: center;
+  }
+
+  .btn-container {
+    display: flex;
+    flex-direction: row;
+    gap: 16px;
+
+    .btn-cancel {
+      @media screen and (max-width: $break-xs-max) {
+        display: none;
+      }
+    }
+  }
+}
+
+.categories-container {
+  display: none;
+
+  @media screen and (min-width: $break-lg-min) {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    gap: 16px;
+  }
+
+  .menu-category {
+    position: relative;
+    padding-bottom: 28px;
+    margin-bottom: -28px;
+
+    .category-label {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 5px;
+      font-size: 12px;
+      line-height: 18px;
+      font-weight: 700;
+
+      @media screen and (min-width: $break-xl-min) {
+        font-size: 16px;
+      }
+    }
+
+    a.category-label {
+      color: inherit;
+      text-decoration: none;
+      transition: all 0.3s ease-in-out;
+
+      &:hover {
+        color: #076b9c;
+      }
+    }
+
+    .category-links-container {
+      position: absolute;
+      opacity: 0;
+      transition: opacity 0.3s ease-in-out, transform 0s linear 0.3s;
+      top: 100%;
+      left: 50%;
+      transform: scale(0);
+      padding: 16px;
+      background: #fff;
+      box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
+      border-bottom-left-radius: 4px;
+      border-bottom-right-radius: 4px;
+
+      ul {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+
+        a {
+          font-size: 16px;
+          line-height: 18px;
+          font-weight: 700;
+          color: inherit;
+          text-decoration: none;
+          transition: all 0.3s ease-in-out;
+          white-space: nowrap;
+
+          &:hover {
+            color: #076b9c;
+          }
+        }
+      }
+    }
+
+    &:hover {
+      .category-links-container {
+        opacity: 1;
+        transform: translateX(-50%);
+        transition: opacity 0.3s ease-in-out, transform 0s linear;
+      }
+    }
+  }
+}
+
+.btn-sidebar-container {
+  @media screen and (min-width: $break-lg-min) {
+    display: none;
+  }
+
+  .btn-sidebar {
+    display: block;
+    background: none;
+    border: none;
+    padding: 0;
+    width: 25px;
+    height: 25px;
+    font-size: 25px;
+    line-height: 25px;
+  }
+}
+
+.categories-sidebar {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  height: calc(100% - 60px);
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+  background: #fff;
+  z-index: 1001;
+  padding: 16px 24px;
+
+  @media screen and (min-width: $break-sm-min) {
+    width: 300px;
+  }
+
+  &.slide-enter-active,
+  &.slide-leave-active {
+    transition: all 0.4s ease-in-out;
+  }
+
+  &.slide-enter-from,
+  &.slide-leave-to {
+    transform: translateX(-100%);
+  }
+
+  &.slide-enter-to,
+  &.slide-leave-from {
+    transform: translateX(0);
+  }
+
+  .category-links-container {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    list-style: none;
+    margin: 0;
+    padding: 0 0 16px;
+    font-size: 16px;
+    line-height: 18px;
+  }
+
+  .menu-link {
+    color: inherit;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  .menu-category-link {
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 18px;
+  }
+}
+
+.categories-backdrop {
+  @include backdrop;
+
+  &.fade-enter-active,
+  &.fade-leave-active {
+    transition: all 0.4s ease-in-out;
+  }
+
+  &.fade-enter-from,
+  &.fade-leave-to {
+    opacity: 0;
+  }
+
+  &.fade-enter-to,
+  &.fade-leave-from {
+    opacity: 1;
+  }
+}
+</style>