Client - update app style + add link in nav-bar

This commit is contained in:
Sam 2021-08-07 18:10:32 +02:00
parent 0876373609
commit 73915a1750
4 changed files with 25 additions and 13 deletions

View File

@ -62,6 +62,7 @@
.footer-item { .footer-item {
padding: 10px 10px; padding: 10px 10px;
border-top: solid 1px var(--footer-border-color);
text-align: center; text-align: center;
} }
} }

View File

@ -1,8 +1,10 @@
<template> <template>
<div id="nav"> <div id="nav">
<div class="container"> <div class="nav-container">
<div class="nav-app-name"> <div class="nav-app-name">
<div class="nav-item app-name">FitTrackee</div> <div class="nav-item app-name" @click="$router.push('/')">
FitTrackee
</div>
</div> </div>
<div class="nav-icon-open" :class="{ 'menu-open': isMenuOpen }"> <div class="nav-icon-open" :class="{ 'menu-open': isMenuOpen }">
<i class="fa fa-bars hamburger-icon" @click="openMenu()"></i> <i class="fa fa-bars hamburger-icon" @click="openMenu()"></i>
@ -104,6 +106,18 @@
display: flex; display: flex;
padding: 15px 10px; padding: 15px 10px;
.nav-container {
display: flex;
margin-left: auto;
margin-right: auto;
padding: 0 15px 15px 15px;
max-width: $container-width;
width: 100%;
border-bottom: solid 1px var(--nav-border-color);
}
a { a {
&.router-link-exact-active { &.router-link-exact-active {
color: var(--nav-bar-link-active); color: var(--nav-bar-link-active);
@ -114,6 +128,10 @@
font-size: 1.2em; font-size: 1.2em;
font-weight: bold; font-weight: bold;
margin-right: 10px; margin-right: 10px;
&:hover {
cursor: pointer;
}
} }
.fa { .fa {

View File

@ -23,17 +23,8 @@ a {
text-decoration: none; text-decoration: none;
} }
.container {
display: flex;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
max-width: $container-width;
width: 100%;
}
button { button {
background: var(--app-background-color);
border: solid 1px var(--app-color); border: solid 1px var(--app-color);
border-radius: 0; border-radius: 0;
box-shadow: 2px 2px 2px var(--app-shadow-color); box-shadow: 2px 2px 2px var(--app-shadow-color);

View File

@ -1,12 +1,14 @@
:root { :root {
--app-background-color: #eaeaea; --app-background-color: #FFFFFF;
--app-color: #2c3e50; --app-color: #2c3e50;
--app-a-color: #40578a; --app-a-color: #40578a;
--nav-bar-background-color: #FFFFFF; --nav-bar-background-color: #FFFFFF;
--nav-bar-link-active: #485b6e; --nav-bar-link-active: #485b6e;
--nav-border-color: #c5ccdb;
--footer-background-color: #FFFFFF; --footer-background-color: #FFFFFF;
--footer-border-color: #ebeef3;
--footer-color: #8b8c8c; --footer-color: #8b8c8c;
--app-shadow-color: lightgrey; --app-shadow-color: lightgrey;