86 lines
2.8 KiB
Svelte
86 lines
2.8 KiB
Svelte
<script lang="ts">
|
|
import { scrollto } from "svelte-scrollto";
|
|
export let currentLanguage = 'it'
|
|
export const menu = {home:{it:"Home",en:"Home"},
|
|
job:{it:"Esperienze",en:"Experiences"},
|
|
school:{it:"Formazione",en:"Training"},
|
|
contacts:{it:"Contatti",en:"Contacts"},
|
|
portfolio:{it:"Portfolio",en:"Portfolio"}}
|
|
</script>
|
|
|
|
<div class="div-menu">
|
|
<div class="wrapper">
|
|
<a use:scrollto={{element:'#home', offset:-70}} class="menu-element" href="#home" alt="{menu.home[currentLanguage]}"><i class="fas fa-home"></i><span class="hide">{menu.home[currentLanguage]}</span></a>
|
|
<a use:scrollto={{element:'#jobs', offset:-50}} class="menu-element" href="#jobs" alt="{menu.job[currentLanguage]}"><i class="fas fa-user-tie"></i><span class="hide">{menu.job[currentLanguage]}</span></a>
|
|
<a use:scrollto={{element:'#training', offset:-50}} class="menu-element" href="#training" alt="{menu.school[currentLanguage]}"><i class="fas fa-graduation-cap"></i><span class="hide">{menu.school[currentLanguage]}</span></a>
|
|
<a use:scrollto={{element:'#portfolio', offset:-50}} class="menu-element" href="#portfolio" alt="{menu.portfolio[currentLanguage]}"><i class="fas fa-user-clock"></i><span class="hide">{menu.portfolio[currentLanguage]}</span></a>
|
|
<a use:scrollto={{element:'#contacts', offset:-50}} class="menu-element" href="#contacts" alt="{menu.contacts[currentLanguage]}"><i class="fas fa-address-card"></i><span class="hide">{menu.contacts[currentLanguage]}</span></a>
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
@import '/node_modules/@fortawesome/fontawesome-free/css/all.css';
|
|
@import './static/colors.scss';
|
|
.div-menu{
|
|
width: 100%;
|
|
background-color: $steel-blue;
|
|
}
|
|
|
|
.menu-element {
|
|
background-color: $cultured;
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
align-items: center;
|
|
justify-content: space-evenly;
|
|
text-decoration: none;
|
|
color: $rich-black-fogra-29;
|
|
width: 13%;
|
|
height: 30px;
|
|
margin: 10px;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
border-color: $rich-black-fogra-29;
|
|
}
|
|
|
|
.menu-element:hover{
|
|
background-color: $navajo-white;
|
|
}
|
|
|
|
.wrapper {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-evenly;
|
|
width: 100%;
|
|
margin: auto;
|
|
height: auto;
|
|
max-width: $cv-max-width;
|
|
}
|
|
|
|
.hide{
|
|
display: none;
|
|
}
|
|
|
|
@media screen and (min-width: 666px) {
|
|
.div-menu{
|
|
display: flex;
|
|
height: auto;
|
|
}
|
|
|
|
.menu-element {
|
|
background-color: $cultured;
|
|
text-decoration: none;
|
|
color: $rich-black-fogra-29;
|
|
width: 17%;
|
|
height: 30px;
|
|
margin-left: 5px;
|
|
margin-right: 5px;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
.hide{
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
</style> |