Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-08-22 07:33:50 +00:00
Code Issues Actions Projects Releases Wiki Activity

minimalist squares navmap

Browse Source
This commit is contained in:
Mathieu Jaumotte
2021-05-21 10:11:10 +02:00
parent d08f2e0e11
commit ad6519fb87
2 changed files with 94 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav.vue Normal file
View File

@@ -0,0 +1,90 @@
<template>
<teleport to="#content_conainter">
<div class="sticky-section">
<nav>
<a href="#top">
<i class="fa fa-fw fa-square-o"></i>
<span>Haut</span>
</a>
<a href="#section-10">
<i class="fa fa-fw fa-square"></i>
<span>1</span>
</a>
<a href="#section-20">
<i class="fa fa-fw fa-square"></i>
<span>2</span>
</a>
<a href="#section-30">
<i class="fa fa-fw fa-square"></i>
<span>3</span>
</a>
<a href="#section-40">
<i class="fa fa-fw fa-square"></i>
<span>4</span>
</a>
<a href="#section-50">
<i class="fa fa-fw fa-square"></i>
<span>5</span>
</a>
<a href="#section-60" v-if="accompanyingCourse.step === 'DRAFT'">
<i class="fa fa-fw fa-square"></i>
<span>6</span>
</a>
<a href="#section-70" v-if="accompanyingCourse.step === 'DRAFT'">
<i class="fa fa-fw fa-square"></i>
<span>7</span>
</a>
<!--a href="#bottom">
<i class="fa fa-fw fa-square-o"></i>
<span>Bas</span>
</a-->
</nav>
</div>
</teleport>
</template>
<script>
export default {
name: "StickyNav",
computed: {
accompanyingCourse() {
return this.$store.state.accompanyingCourse
}
}
}
</script>
<style lang="scss" scoped>
div.sticky-section {
position: fixed;
top: 250px;
left: 25px;
nav {
font-size: small;
a {
display: block;
box-sizing: border-box;
margin-bottom: -3px;
color: #71859669;
span {
display: none;
}
&:hover {
color: #718596b5;
span {
display: inline;
padding-left: 8px;
}
}
&.active {
color: #df6a27;
}
}
}
}
@media only screen and (max-width: 768px) {
div.sticky-section {
display: none;
}
}
</style>