From 6e47d820a7689f6cd61313c214027acdf253dbb6 Mon Sep 17 00:00:00 2001
From: Michelle Tran <michelle.tran@darkwolfsolutions.com>
Date: Wed, 7 Sep 2022 20:12:17 +0000
Subject: [PATCH] BULL-1948
---
src/App.vue | 10 +-
src/components/NavBar.vue | 306 ++++++++++++++++++++++++++++----------
src/router/routes.js | 1 +
src/scss/variables.scss | 1 +
4 files changed, 234 insertions(+), 84 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 95f6cb64..2f951aad 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -71,6 +71,8 @@ export default {
}
.theme--dark {
+ color: $light-text-color;
+ background-color: $dark-bg-color;
h1,
h2,
h3,
@@ -87,14 +89,6 @@ export default {
border: $button-border;
}
- .v-list-item {
- &.v-list-item--active {
- color: $dark-bg-color !important;
- }
- .v-list-item__content {
- text-align: left;
- }
- }
.v-select__selections {
line-height: 1.25rem;
}
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index e48633e4..2bdd6857 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -16,42 +16,141 @@
</router-link>
</v-toolbar-title>
<v-spacer></v-spacer>
+
<v-toolbar-items>
- <div class="navbar-nav my-auto pr-10">
- <router-link class="nav-item" to="/" exact> Home </router-link>
- <v-menu open-on-hover bottom offset-y>
+ <div class="main-navbar my-auto pr-10">
+ <router-link class="nav-item" :to="Home.path" exact>
+ {{ Home.meta.breadcrumb }}
+ </router-link>
+
+ <!-- Services menu -->
+ <v-menu
+ open-on-hover
+ bottom
+ offset-y
+ attach=".main-navbar"
+ content-class="ml-n10 overflow-visible contain-none"
+ >
<template v-slot:activator="{ on, attrs }">
<span class="pt-1" v-bind="attrs" v-on="on">
- <router-link class="nav-item d-inline" to="/services">
- Services
+ <router-link class="nav-item d-inline" :to="Services.path">
+ {{ Services.meta.breadcrumb }}
<v-icon class="navbar-chevron-icon">mdi-chevron-down</v-icon>
</router-link>
</span>
</template>
- <v-list class="navbar-nav-list">
- <v-list-item
- v-for="(item, index) in servicesSubMenu"
- :key="index"
- :to="item.path"
- link
- >
- <v-list-item-title class="navbar-list-items">
- {{ item.meta.breadcrumb }}
+
+ <!-- Display Services dropdown menu -->
+ <v-list dark class="navbar-nav-list">
+ <v-list-item>
+ <v-list-item-title class="nav-item">
+ <router-link
+ class="nav-item d-inline submenu-item"
+ :to="IronBank.path"
+ >
+ {{ IronBank.meta.breadcrumb }}
+ </router-link>
+ </v-list-item-title>
+ </v-list-item>
+
+ <!-- Display Party Bus dropdown submenu -->
+ <v-list-item id="pbMenu">
+ <v-menu
+ open-on-hover
+ right
+ offset-x
+ attach="#pbMenu"
+ content-class="overflow-visible contain-none"
+ >
+ <template v-slot:activator="{ on, attrs }">
+ <v-list-item-title
+ class="nav-item"
+ v-bind="attrs"
+ v-on="on"
+ >
+ <router-link
+ class="nav-item d-inline submenu-item"
+ to="/products/party-bus"
+ >
+ {{ PartyBus.meta.breadcrumb }}
+ <v-icon class="mt-1 navbar-chevron-icon"
+ >mdi-chevron-right</v-icon
+ >
+ </router-link>
+ </v-list-item-title>
+ </template>
+ <v-list dark class="mt-n5 navbar-nav-list">
+ <v-list-item>
+ <v-list-item-title class="nav-item">
+ <router-link
+ class="nav-item d-inline submenu-item"
+ :to="PartyBusOnboarding.path"
+ >
+ {{ PartyBusOnboarding.meta.breadcrumb }}
+ </router-link>
+ </v-list-item-title>
+ </v-list-item>
+
+ <v-list-item-title class="nav-item">
+ <router-link
+ class="nav-item d-inline submenu-item"
+ :to="ServiceCatalog.path"
+ >
+ {{ ServiceCatalog.meta.breadcrumb }}
+ </router-link>
+ </v-list-item-title>
+ </v-list>
+ </v-menu>
+ </v-list-item>
+
+ <!-- Display the rest of the Services menu -->
+ <v-list-item>
+ <v-list-item-title class="nav-item">
+ <router-link
+ class="nav-item d-inline submenu-item"
+ :to="BigBang.path"
+ >
+ {{ BigBang.meta.breadcrumb }}
+ </router-link>
+ </v-list-item-title>
+ </v-list-item>
+
+ <v-list-item>
+ <v-list-item-title class="nav-item">
+ <router-link
+ class="nav-item d-inline submenu-item"
+ :to="CNAP.path"
+ >
+ {{ CNAP.meta.breadcrumb }}
+ </router-link>
+ </v-list-item-title>
+ </v-list-item>
+
+ <v-list-item>
+ <v-list-item-title class="nav-item">
+ <router-link
+ class="nav-item d-inline submenu-item"
+ :to="Cybersecurity.path"
+ >
+ {{ Cybersecurity.meta.breadcrumb }}
+ </router-link>
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
- <router-link class="nav-item" to="/resellers">
- Resellers
+
+ <!-- Display the rest of the Nav Bar items -->
+ <router-link class="nav-item" :to="Resellers.path">
+ {{ Resellers.meta.breadcrumb }}
</router-link>
- <router-link class="nav-item" to="/resources">
- Resources
+ <router-link class="nav-item" :to="Resources.path">
+ {{ Resources.meta.breadcrumb }}
</router-link>
- <router-link class="nav-item" to="/who-we-are">
- Who We Are
+ <router-link class="nav-item" :to="WhoWeAre.path">
+ {{ WhoWeAre.meta.breadcrumb }}
</router-link>
- <router-link class="nav-item" to="/contact-us">
- Contact Us
+ <router-link class="nav-item" :to="ContactUs.path">
+ {{ ContactUs.meta.breadcrumb }}
</router-link>
</div>
</v-toolbar-items>
@@ -65,6 +164,7 @@
:full-width="showBurgerIcon"
/>
+ <!-- Mobile view implementation -->
<v-app-bar-nav-icon
id="nav-toggle"
@click.stop="menuVisible = !menuVisible"
@@ -90,72 +190,116 @@
dark
id="nav-drawer"
>
- <div class="navbar-nav my-auto d-flex flex-column px-5">
+ <div class="main-navbar my-auto d-flex flex-column px-5">
<router-link
class="nav-item"
- to="/"
+ :to="Home.path"
exact
@click.native="menuVisible = false"
>
- Home
+ {{ Home.meta.breadcrumb }}
</router-link>
<v-divider class="my-2" />
<router-link
class="nav-item"
- to="/services"
+ :to="Services.path"
+ @click.native="menuVisible = false"
+ >
+ {{ Services.meta.breadcrumb }}
+ </router-link>
+
+ <!-- Services submenu Mobile -->
+ <router-link
+ :to="IronBank.path"
+ @click.native="menuVisible = false"
+ class="nav-item-mobile"
+ >
+ {{ IronBank.meta.breadcrumb }}
+ </router-link>
+
+ <router-link
+ :to="PartyBus.path"
+ class="nav-item-mobile"
+ @click.native="menuVisible = false"
+ >
+ {{ PartyBus.meta.breadcrumb }}
+ </router-link>
+ <router-link
+ :to="PartyBusOnboarding.path"
+ class="nav-item-mobile pbMenu-item-mobile"
+ @click.native="menuVisible = false"
+ >
+ Onboarding
+ </router-link>
+ <router-link
+ :to="ServiceCatalog.path"
+ class="nav-item-mobile pbMenu-item-mobile"
@click.native="menuVisible = false"
>
- Services
+ Service Catalog
</router-link>
<router-link
- v-for="item in servicesSubMenu"
- :key="item.path"
- :to="item.path"
+ :to="BigBang.path"
@click.native="menuVisible = false"
class="nav-item-mobile"
>
- {{ item.meta.breadcrumb }}
+ {{ BigBang.meta.breadcrumb }}
+ </router-link>
+
+ <router-link
+ :to="CNAP.path"
+ @click.native="menuVisible = false"
+ class="nav-item-mobile"
+ >
+ {{ CNAP.meta.breadcrumb }}
+ </router-link>
+
+ <router-link
+ :to="Cybersecurity.path"
+ @click.native="menuVisible = false"
+ class="nav-item-mobile"
+ >
+ {{ Cybersecurity.meta.breadcrumb }}
</router-link>
<v-divider class="mt-6 mb-2" />
<router-link
class="nav-item"
- to="/resellers"
+ :to="Resellers.path"
@click.native="menuVisible = false"
>
- RESELLERS
+ {{ Resellers.meta.breadcrumb }}
</router-link>
<v-divider class="my-2" />
-
<router-link
class="nav-item"
- to="/resources"
+ :to="Resources.path"
@click.native="menuVisible = false"
>
- Resources
+ {{ Resources.meta.breadcrumb }}
</router-link>
<v-divider class="my-2" />
+
<router-link
class="nav-item"
- to="/who-we-are"
+ :to="WhoWeAre.path"
@click.native="menuVisible = false"
>
- Who We Are
+ {{ WhoWeAre.meta.breadcrumb }}
</router-link>
-
<v-divider class="my-2" />
<router-link
class="nav-item"
- to="/contact-us"
+ :to="ContactUs.path"
@click.native="menuVisible = false"
>
- Contact Us
+ {{ ContactUs.meta.breadcrumb }}
</router-link>
<v-divider class="mt-2 mb-4" />
@@ -177,13 +321,19 @@ export default {
data: () => ({
menuVisible: false,
- servicesSubMenu: [
- routesByName.IronBank,
- routesByName.PartyBus,
- routesByName.BigBang,
- routesByName.CNAP,
- routesByName.Cybersecurity,
- ],
+ Home: routesByName.Home,
+ Services: routesByName.Services,
+ IronBank: routesByName.IronBank,
+ PartyBus: routesByName.PartyBus,
+ BigBang: routesByName.BigBang,
+ CNAP: routesByName.CNAP,
+ Cybersecurity: routesByName.Cybersecurity,
+ PartyBusOnboarding: routesByName.PartyBusOnboarding,
+ ServiceCatalog: routesByName.ServiceCatalog,
+ Resellers: routesByName.Resellers,
+ Resources: routesByName.Resources,
+ WhoWeAre: routesByName.WhoWeAre,
+ ContactUs: routesByName.ContactUs,
navigationDrawerBreakPoint: 1150,
showBurgerIcon: false,
isSearchExpanded: false,
@@ -193,7 +343,6 @@ export default {
window.removeEventListener("resize", this.onResize, { passive: true });
},
-
mounted() {
this.onResize();
@@ -213,29 +362,13 @@ export default {
},
};
</script>
-<style lang="scss">
+<style lang="scss" scoped>
#nav-drawer {
margin-top: 102px;
z-index: 9;
}
-.v-navigation-drawer__content {
- background-color: $dark-bg-color !important;
-}
-
-.navbar-nav-list {
- background-color: $dark-bg-color !important;
-}
-
-.navbar-list-items {
- color: #ffffff;
-
- &:hover {
- color: $p1-dark-green !important;
- }
-}
a.nav-item {
- color: #ffffff !important;
text-transform: uppercase;
&:hover,
&:active {
@@ -251,8 +384,9 @@ a.nav-item {
}
}
-a.nav-item.router-link-active {
+a.nav-item.router-link-exact-active {
color: #bdc931 !important;
+ border-bottom: 2px solid $p1-light-green;
i.navbar-chevron-icon:not(.no-link) {
padding: 0 0 4px 0;
@@ -260,7 +394,12 @@ a.nav-item.router-link-active {
}
}
-.navbar-nav {
+a.nav-item-mobile.router-link-exact-active {
+ color: #bdc931 !important;
+ border-bottom: 2px solid $p1-light-green;
+}
+
+.main-navbar {
font-weight: 600;
.nav-item {
@@ -278,15 +417,20 @@ a.nav-item.router-link-active {
color: $p1-dark-green !important;
}
}
- .router-link-active {
- border-bottom: 2px solid $p1-light-green;
- color: $p1-light-green !important;
+
+ .submenu-item {
+ font-weight: 400 !important;
+ padding: 0 !important;
+ margin: 0 !important;
+ text-transform: none !important;
}
}
// Mobile-view styling
.nav-item-mobile {
- padding: 0;
- margin: 0;
+ text-align: left;
+ margin-left: 1.9rem;
+ padding-left: 0.1rem;
+ margin-right: 0.8rem;
font-size: 0.75rem !important;
color: $light-text-color !important;
letter-spacing: 0.04rem;
@@ -297,12 +441,19 @@ a.nav-item.router-link-active {
}
}
-#app-bar .navbar-nav .nav-item:last-child {
+.pbMenu-item-mobile {
+ text-align: right;
+ margin-left: 0.8rem !important;
+ padding-left: 0 !important;
+ margin-right: 2.15rem !important;
+ padding-right: 0.1rem !important;
+}
+
+#app-bar .main-navbar .nav-item:last-child {
margin-right: 0;
}
#app-bar {
- background-color: $dark-bg-color !important;
padding-left: 1rem;
padding-right: 1rem;
z-index: 10;
@@ -316,7 +467,7 @@ a.nav-item.router-link-active {
}
&.hide-nav-toolbar {
- .navbar-nav {
+ .main-navbar {
display: none;
}
&.search-expanded {
@@ -458,4 +609,7 @@ a.nav-item.router-link-active {
transform: rotate(45deg);
}
}
+.contain-none {
+ contain: none !important;
+}
</style>
diff --git a/src/router/routes.js b/src/router/routes.js
index 334a4813..29520861 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -5,6 +5,7 @@ export const routes = [
meta: {
title: "Platform One",
bodyClass: "home-page",
+ breadcrumb: "Home",
header: {
title: "Platform One",
description:
diff --git a/src/scss/variables.scss b/src/scss/variables.scss
index 09ea7e85..cf534aff 100644
--- a/src/scss/variables.scss
+++ b/src/scss/variables.scss
@@ -3,6 +3,7 @@ $header-text-color: #000000;
$button-text-color: #000000;
$light-text-color: #ffffff;
$light-bg-color: #ffffff;
+$dark-text-color: #002743;
$dark-bg-color: #002743;
$gradient-alpha: #00000000;
--
GitLab