KevinMidboe/vinlottis
1
0
Fork 0
Code Issues 8 Pull Requests 14 Packages Projects Releases Wiki Activity

Header menu routes have animated arrows on hover.

Browse Source
This commit is contained in:
Kevin
2021-01-02 14:27:45 +01:00
parent 242aa28847
commit 8044759264
3 changed files with 43 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
frontend/styles/banner.scss
View File

@@ -1,7 +1,7 @@
@import "./media-queries.scss"; @import "./media-queries.scss";
@import "./variables.scss"; @import "./variables.scss";
.top-banner{ .top-banner {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1; z-index: 1;
@@ -24,11 +24,11 @@
} }
} }
.company-logo{ .company-logo {
grid-area: logo; grid-area: logo;
} }
.menu-toggle-container{ .menu-toggle-container {
grid-area: menu; grid-area: menu;
color: #1e1e1e; color: #1e1e1e;
border-radius: 50% 50%; border-radius: 50% 50%;
@@ -40,11 +40,12 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
&:hover{
&:hover {
cursor: pointer; cursor: pointer;
} }
span{ span {
display: block; display: block;
position: relative; position: relative;
border-radius: 3px; border-radius: 3px;
@@ -59,40 +60,39 @@
opacity 0.55s ease; opacity 0.55s ease;
} }
span:first-child{ span:first-child {
transform-origin: 0% 0%; transform-origin: 0% 0%;
margin-bottom: 4px; margin-bottom: 4px;
} }
span:nth-last-child(2){ span:nth-last-child(2) {
transform-origin: 0% 100%; transform-origin: 0% 100%;
margin-bottom: 4px; margin-bottom: 4px;
} }
&.open{ &.open {
span{ span{
opacity: 1; opacity: 1;
transform: rotate(-45deg) translate(2px, -2px); transform: rotate(-45deg) translate(2px, -2px);
background: #232323; background: #232323;
} }
span:nth-last-child(2){ span:nth-last-child(2) {
opacity: 0; opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2); transform: rotate(0deg) scale(0.2, 0.2);
} }
span:nth-last-child(3){ span:nth-last-child(3) {
transform: rotate(45deg) translate(3.5px, -2px); transform: rotate(45deg) translate(3.5px, -2px);
} }
} }
&.open{ &.open {
background: #fff; background: #fff;
} }
} }
.menu{ .menu {
position: fixed; position: fixed;
top: 0; top: 0;
background-color: $primary; background-color: $primary;
@@ -108,15 +108,33 @@
justify-content: center; justify-content: center;
row-gap: 3em; row-gap: 3em;
&.collapsed{ &.collapsed {
max-height: 0%; max-height: 0%;
} }
a{ a {
text-decoration: none; text-decoration: none;
position: relative;
&:hover {
.icon {
opacity: 100%;
right: -2.5rem;
}
}
.icon {
opacity: 0%;
position: absolute;
top: 35%;
right: 0;
color: $link-color;
font-size: 1.4rem;
transition: all 0.25s;
}
} }
.single-route{ .single-route {
font-size: 3em; font-size: 3em;
outline: 0; outline: 0;
text-decoration: none; text-decoration: none;
@@ -124,16 +142,17 @@
border-bottom: 4px solid transparent; border-bottom: 4px solid transparent;
display: block; display: block;
&.open{ &.open {
-webkit-animation: fadeInFromNone 3s ease-out; -webkit-animation: fadeInFromNone 3s ease-out;
-moz-animation: fadeInFromNone 3s ease-out; -moz-animation: fadeInFromNone 3s ease-out;
-o-animation: fadeInFromNone 3s ease-out; -o-animation: fadeInFromNone 3s ease-out;
animation: fadeInFromNone 3s ease-out; animation: fadeInFromNone 3s ease-out;
} }
&:hover{ &:hover {
cursor: pointer; cursor: pointer;
border-color: $link-color; border-color: $link-color;
} }
} }
} }

1
frontend/styles/loginAndRegister.scss
View File

@@ -68,4 +68,5 @@ form {
width: calc(100% - 5rem); width: calc(100% - 5rem);
background-color: $light-red; background-color: $light-red;
color: $red; color: $red;
font-size: 1.5rem;
} }

3
frontend/ui/Banner.vue
View File

@@ -13,7 +13,8 @@
<nav class="menu" :class="isOpen ? 'open' : 'collapsed'" > <nav class="menu" :class="isOpen ? 'open' : 'collapsed'" >
<router-link v-for="(route, index) in routes" :key="index" :to="route.route" class="menu-item-link" > <router-link v-for="(route, index) in routes" :key="index" :to="route.route" class="menu-item-link" >
<a @click="toggleMenu" class="single-route" :class="isOpen ? 'open' : 'collapsed'">{{route.name}}</a> <a @click="toggleMenu" class="single-route" :class="isOpen ? 'open' : 'collapsed'">{{ route.name }}</a>
<i class="icon icon--arrow-right"></i>
</router-link> </router-link>
</nav> </nav>