From a323c1a342a51306def293ce0aae684593bb4223 Mon Sep 17 00:00:00 2001
From: Graham Smith <gsmith@skye.local>
Date: Tue, 14 Jul 2020 14:17:56 -0400
Subject: [PATCH] add home to nav
---
src/components/NavBar.vue | 45 ++++++++++++++++++++++-----------------
1 file changed, 25 insertions(+), 20 deletions(-)
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 3c773617..9f2ba05e 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -1,6 +1,6 @@
<template>
<div>
- <b-navbar toggleable="md" type="dark" variant="" fixed="top">
+ <b-navbar toggleable="lg" type="dark" variant="" fixed="top">
<b-navbar-brand to="/" class="home-link">
<YodaLogo />
</b-navbar-brand>
@@ -13,6 +13,12 @@
<b-collapse id="navbar-toggle-collapse" is-nav>
<b-navbar-nav class="ml-auto">
+ <router-link class="nav-item" to="/" exact>
+ HOME
+ </router-link>
+ <router-link class="nav-item" to="/products">
+ PRODUCTS
+ </router-link>
<router-link class="nav-item" to="/services">
SERVICES
</router-link>
@@ -29,6 +35,7 @@
</template>
<script>
import YodaLogo from "@/assets/images/icons/Logo_P1_Yoda_Campfire-WH.svg";
+
export default {
name: "NavBar",
components: {
@@ -39,8 +46,6 @@ export default {
<style lang="scss" scoped>
.navbar {
background-color: $secondary-bg-color;
- // margin-left: auto;
- // margin-right: auto;
.navbar-toggler {
outline: none;
@@ -64,15 +69,15 @@ export default {
.nav-item {
padding: 0.5rem;
- margin: 0 1rem;
- width: 130px;
+ margin: 0 0.5rem;
+ // width: 120px;
letter-spacing: 0.02rem;
color: $secondary-text-color;
border-top: 2px solid transparent;
border-bottom: 2px solid transparent;
}
- .router-link-exact-active {
+ .router-link-active {
border-bottom: 2px solid $p1-light-green;
color: $p1-light-green;
}
@@ -81,22 +86,22 @@ export default {
margin-right: 0;
}
}
+}
- @include media-breakpoint-down(sm) {
- .home-link {
- margin-left: 1rem;
- }
- .navbar-nav {
- margin-right: 1rem;
- }
+@include media-breakpoint-down(md) {
+ .navbar .home-link {
+ margin-left: 1rem;
}
- @include media-breakpoint-only(md) {
- .home-link {
- margin-left: 1.5rem;
- }
- .navbar-nav {
- margin-right: 1.5rem;
- }
+ .navbar .navbar-nav {
+ margin-right: 1rem;
+ }
+}
+@include media-breakpoint-only(lg) {
+ .navbar .home-link {
+ margin-left: 1.5rem;
+ }
+ .navbar .navbar-nav {
+ margin-right: 1.5rem;
}
}
</style>
--
GitLab