UNCLASSIFIED - NO CUI

Skip to content
Snippets Groups Projects
Commit 6e47d820 authored by Michelle Tran's avatar Michelle Tran Committed by hunter.congress
Browse files

BULL-1948

parent 0000243e
No related branches found
No related tags found
1 merge request!203BULL-1948
Hide whitespace changes
Inline Side-by-side
src/App.vue
+ 2
− 8
View file @ 6e47d820
......@@ -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;
}
......
src/components/NavBar.vue
+ 230
− 76
View file @ 6e47d820
......@@ -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>
src/router/routes.js
+ 1
− 0
View file @ 6e47d820
......@@ -5,6 +5,7 @@ export const routes = [
meta: {
title: "Platform One",
bodyClass: "home-page",
breadcrumb: "Home",
header: {
title: "Platform One",
description:
......
src/scss/variables.scss
+ 1
− 0
View file @ 6e47d820
......@@ -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;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

UNCLASSIFIED - NO CUI