From ad6519fb87f605aee4e4dc5a34b5a130d3a07e9d Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Fri, 21 May 2021 10:11:10 +0200
Subject: [PATCH] minimalist squares navmap

---
 .../public/vuejs/AccompanyingCourse/App.vue   |  4 +
 .../components/StickyNav.vue                  | 90 +++++++++++++++++++
 2 files changed, 94 insertions(+)
 create mode 100644 src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav.vue

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
index a217d2c0d..314959e14 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
@@ -1,5 +1,6 @@
 <template>
    <banner></banner>
+   <sticky-nav></sticky-nav>
    
    <h1 v-if="accompanyingCourse.step === 'DRAFT'">{{ $t('course.title.draft') }}</h1>
    <h1 v-else>{{ $t('course.title.active') }}</h1>
@@ -17,6 +18,7 @@
 <script>
 import { mapState } from 'vuex'
 import Banner from './components/Banner.vue';
+import StickyNav from './components/StickyNav.vue';
 import PersonsAssociated from './components/PersonsAssociated.vue';
 import Requestor from './components/Requestor.vue';
 import SocialIssue from './components/SocialIssue.vue';
@@ -29,6 +31,7 @@ export default {
    name: 'App',
    components: { 
       Banner,
+      StickyNav,
       PersonsAssociated, 
       Requestor,
       SocialIssue,
@@ -98,5 +101,6 @@ export default {
          table {
          }
       }
+      
 }
 </style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav.vue
new file mode 100644
index 000000000..db7565790
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav.vue
@@ -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>