feat [front]: ± mobile navbar
This commit is contained in:
parent
ea1acf9b42
commit
fb1125f796
1 changed files with 23 additions and 7 deletions
|
@ -1,13 +1,13 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="navbar-container mb-4">
|
<div class="navbar-container">
|
||||||
<nav
|
<nav
|
||||||
class="navbar container"
|
class="navbar container"
|
||||||
role="navigation"
|
role="navigation"
|
||||||
aria-label="main navigation"
|
aria-label="main navigation"
|
||||||
>
|
>
|
||||||
<div class="navbar-brand">
|
<div class="navbar-brand">
|
||||||
<nuxt-link class="mr-5 my-2" to="/">
|
<nuxt-link class="navbar-item" to="/">
|
||||||
<img src="~/assets/img/logo.png" width="160" height="205" />
|
<img src="~/assets/img/logo.png" />
|
||||||
</nuxt-link>
|
</nuxt-link>
|
||||||
<a
|
<a
|
||||||
role="button"
|
role="button"
|
||||||
|
@ -96,6 +96,9 @@ const isBurgerOpen = ref(false)
|
||||||
<style lang="sass" scoped>
|
<style lang="sass" scoped>
|
||||||
$navbar-item-img-max-height: 105px
|
$navbar-item-img-max-height: 105px
|
||||||
|
|
||||||
|
.navbar
|
||||||
|
background-color: $grey-light
|
||||||
|
|
||||||
@include desktop
|
@include desktop
|
||||||
.navbar-container
|
.navbar-container
|
||||||
color: $black-ter
|
color: $black-ter
|
||||||
|
@ -116,10 +119,19 @@ $navbar-item-img-max-height: 105px
|
||||||
width: 100%
|
width: 100%
|
||||||
content: ""
|
content: ""
|
||||||
background-color: rgba(248, 245, 243, 0.8)
|
background-color: rgba(248, 245, 243, 0.8)
|
||||||
|
|
||||||
.navbar
|
.navbar
|
||||||
padding: 0 2rem
|
padding: 0 2rem
|
||||||
background: transparent
|
background: transparent
|
||||||
|
|
||||||
|
.navbar-brand .navbar-item
|
||||||
|
@include reset
|
||||||
|
margin: 0.5rem 1rem 0.5rem 0
|
||||||
|
img
|
||||||
|
max-height: none
|
||||||
|
width: 160px
|
||||||
|
height: 205px
|
||||||
|
|
||||||
.navbar-menu
|
.navbar-menu
|
||||||
display: flex
|
display: flex
|
||||||
flex-direction: column
|
flex-direction: column
|
||||||
|
@ -141,12 +153,16 @@ $navbar-item-img-max-height: 105px
|
||||||
color: $link-dark
|
color: $link-dark
|
||||||
|
|
||||||
.place
|
.place
|
||||||
background-color: rgba(240, 237, 234, 62%)
|
display: none
|
||||||
|
@include desktop
|
||||||
|
background-color: rgba(240, 237, 234, 62%)
|
||||||
|
|
||||||
.networks
|
.networks
|
||||||
display: flex
|
display: none
|
||||||
justify-content: space-between
|
@include desktop
|
||||||
flex-direction: column
|
display: flex
|
||||||
|
justify-content: space-between
|
||||||
|
flex-direction: column
|
||||||
</style>
|
</style>
|
||||||
<style lang="sass">
|
<style lang="sass">
|
||||||
.navbar .networks .navbar-item .ov-icon
|
.navbar .networks .navbar-item .ov-icon
|
||||||
|
|
Loading…
Reference in a new issue