feat [front]: ± mobile navbar

This commit is contained in:
Alice 2022-07-11 01:22:28 +02:00
parent ea1acf9b42
commit fb1125f796

View file

@ -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,9 +153,13 @@ $navbar-item-img-max-height: 105px
color: $link-dark color: $link-dark
.place .place
display: none
@include desktop
background-color: rgba(240, 237, 234, 62%) background-color: rgba(240, 237, 234, 62%)
.networks .networks
display: none
@include desktop
display: flex display: flex
justify-content: space-between justify-content: space-between
flex-direction: column flex-direction: column