mirror of
https://github.com/KevinMidboe/planetposen.git
synced 2025-10-29 17:50:32 +00:00
Renamed header to navigation. Added scss mixin for desktop and mobile. Separate mobile and desktop navigation elements. Transparent planetposen logos in assets/
This commit is contained in:
@@ -1,17 +1,17 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Header></Header>
|
<Navigation></Navigation>
|
||||||
|
|
||||||
<router-view />
|
<router-view />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Header from '@/components/Header';
|
import Navigation from '@/components/Navigation';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'App',
|
name: 'App',
|
||||||
components: { Header }
|
components: { Navigation }
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
BIN
frontend/assets/images/logo-black.png
Normal file
BIN
frontend/assets/images/logo-black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
frontend/assets/images/logo-white.png
Normal file
BIN
frontend/assets/images/logo-white.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@@ -1,102 +0,0 @@
|
|||||||
<template>
|
|
||||||
<header class="flex space-between">
|
|
||||||
<div>
|
|
||||||
<img class="logo" src="https://planetposen.no/Planetposen/Hjem_files/shapeimage_1.png" />
|
|
||||||
|
|
||||||
<router-link to="/" class="header-element">
|
|
||||||
<span>Hjem</span>
|
|
||||||
</router-link>
|
|
||||||
<router-link to="/" class="header-element">
|
|
||||||
<span>Om oss</span>
|
|
||||||
</router-link>
|
|
||||||
<router-link to="/" class="header-element">
|
|
||||||
<span>Produkter</span>
|
|
||||||
</router-link>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<!-- <i class="icon icon--profile"></i> -->
|
|
||||||
<router-link to="/cart">
|
|
||||||
<i class="icon icon--cart-outline header-element"></i>
|
|
||||||
</router-link>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'Header'
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import "./frontend/styles/variables";
|
|
||||||
|
|
||||||
$header-height: 80px;
|
|
||||||
|
|
||||||
header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
background-color: #3b945e; // 3
|
|
||||||
height: $header-height;
|
|
||||||
color: #f2f2f2; // 3
|
|
||||||
|
|
||||||
> div {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
height: $header-height;
|
|
||||||
|
|
||||||
a {
|
|
||||||
text-decoration: unset;
|
|
||||||
color: inherit;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
// background-color: $green; // 1
|
|
||||||
// background-color: #3aafa9; // 2
|
|
||||||
// background-color: #3b945e; // 3
|
|
||||||
// color: $text-color; // 1
|
|
||||||
// color: white; // 2
|
|
||||||
// color: #f2f2f2; // 3
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
display: block;
|
|
||||||
height: 100%;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-element {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0 0.7rem;
|
|
||||||
height: 100%;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
// background-color: #379683; // 1
|
|
||||||
background-color: #def2f1; // 2
|
|
||||||
// background-color: #57ba98; // 3
|
|
||||||
color: white; // 1
|
|
||||||
color: $text-color; // 2
|
|
||||||
color: #182628; // 3
|
|
||||||
// background-color: #8ee4af;
|
|
||||||
}
|
|
||||||
|
|
||||||
// &:first-of-type {
|
|
||||||
// margin-left: 5rem;
|
|
||||||
// }
|
|
||||||
|
|
||||||
span {
|
|
||||||
letter-spacing: 2.5px;
|
|
||||||
text-transform: lowercase;
|
|
||||||
font-weight: 300;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
font-size: 1.75rem;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
148
frontend/components/Navigation.vue
Normal file
148
frontend/components/Navigation.vue
Normal file
@@ -0,0 +1,148 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<nav class="mobile-only">
|
||||||
|
<ul class="nav-list">
|
||||||
|
<li class="nav-item">
|
||||||
|
<router-link to="/cart">
|
||||||
|
<i class="icon icon--basket-outline"></i>
|
||||||
|
</router-link>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<img class="logo" src="/frontend/assets/images/logo-white.png" />
|
||||||
|
|
||||||
|
<li class="nav-item">
|
||||||
|
<router-link to="/cart">
|
||||||
|
<i class="icon icon--basket-outline"></i>
|
||||||
|
</router-link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<nav class="desktop-only">
|
||||||
|
<ul class="nav-list">
|
||||||
|
<img class="logo" src="/frontend/assets/images/logo-black.png" />
|
||||||
|
<!-- <img class="logo" src="https://planetposen.no/Planetposen/Hjem_files/shapeimage_1.png" /> -->
|
||||||
|
|
||||||
|
<li class="nav-item">
|
||||||
|
<router-link to="/" class="">
|
||||||
|
<span>Hjem</span>
|
||||||
|
</router-link>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<router-link to="/">
|
||||||
|
<span>Om oss</span>
|
||||||
|
</router-link>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<router-link to="/">
|
||||||
|
<span>Produkter</span>
|
||||||
|
</router-link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li class="nav-item">
|
||||||
|
<!-- <i class="icon icon--profile"></i> -->
|
||||||
|
<router-link to="/cart">
|
||||||
|
<i class="icon icon--basket-outline"></i>
|
||||||
|
</router-link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'Navigation'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import "./frontend/styles/variables";
|
||||||
|
@import './frontend/styles/global';
|
||||||
|
|
||||||
|
$nav-height: 80px;
|
||||||
|
|
||||||
|
nav {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
background-color: #3b945e; // 3
|
||||||
|
height: $nav-height;
|
||||||
|
color: #f2f2f2; // 3
|
||||||
|
|
||||||
|
> ul {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: $nav-height;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
@include mobile {
|
||||||
|
width: 100%;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: unset;
|
||||||
|
color: inherit;
|
||||||
|
// height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
// background-color: $green; // 1
|
||||||
|
// background-color: #3aafa9; // 2
|
||||||
|
// background-color: #3b945e; // 3
|
||||||
|
// color: $text-color; // 1
|
||||||
|
// color: white; // 2
|
||||||
|
// color: #f2f2f2; // 3
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
display: block;
|
||||||
|
height: 100%;
|
||||||
|
width: auto;
|
||||||
|
|
||||||
|
@include desktop {
|
||||||
|
background-color: #def2f1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 0.7rem;
|
||||||
|
height: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
// background-color: #379683; // 1
|
||||||
|
background-color: #def2f1; // 2
|
||||||
|
// background-color: #57ba98; // 3
|
||||||
|
color: white; // 1
|
||||||
|
color: $text-color; // 2
|
||||||
|
color: #182628; // 3
|
||||||
|
// background-color: #8ee4af;
|
||||||
|
}
|
||||||
|
|
||||||
|
// &:first-of-type {
|
||||||
|
// margin-left: 5rem;
|
||||||
|
// }
|
||||||
|
|
||||||
|
span {
|
||||||
|
letter-spacing: 2.5px;
|
||||||
|
text-transform: lowercase;
|
||||||
|
font-weight: 300;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
font-size: 1.75rem;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,3 +1,4 @@
|
|||||||
|
@import './frontend/styles/variables';
|
||||||
|
|
||||||
.flex {
|
.flex {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -15,3 +16,15 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@include desktop {
|
||||||
|
.mobile-only {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include mobile {
|
||||||
|
.desktop-only {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,3 +1,17 @@
|
|||||||
|
|
||||||
$green: #5cdb95;
|
$green: #5cdb95;
|
||||||
$text-color: #05386B;
|
$text-color: #05386B;
|
||||||
|
|
||||||
|
$mobile-width: 768px;
|
||||||
|
|
||||||
|
@mixin mobile {
|
||||||
|
@media (max-width: #{$mobile-width}) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin desktop {
|
||||||
|
@media (min-width: #{$mobile-width + 1px}) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user