frontend: initial commit

Signed-off-by: Nicolas Froger <nicolas@kektus.xyz>

summer2024-frontend/src/views/PostsView.vue

@@ -0,0 +1,122 @@
+<script setup>
+import PostComponent from '@/components/PostComponent.vue'
+import { usePostsStore } from '@/stores/posts.js'
+import { ref } from 'vue'
+import WelcomeComponent from '@/components/WelcomeComponent.vue'
+
+const postsStore = usePostsStore()
+
+const fullpage = ref(null)
+const fullpageOptions = ref({
+  licenseKey: 'gplv3-license',
+  menu: '#menu',
+  scrollBar: true,
+  normalScrollElements: '.scrollable-element',
+  scrollOverflow: false,
+  onLeave: onLeave,
+  afterLoad: afterLoad,
+  credits: {enabled: false}
+})
+const menu = ref(null)
+
+function onLeave(origin, destination, direction, trigger) {
+  if (destination.anchor === 'welcome-section') {
+    menu.value.style.opacity = '0'
+  } else {
+    menu.value.style.opacity = '1'
+ }
+}
+
+function afterLoad(origin, destination, direction, trigger) {
+  if (destination.anchor === 'welcome-section') {
+    menu.value.style.opacity = '0'
+  }
+}
+</script>
+
+<template>
+  <div id="menu-grid">
+    <ul id="menu" class="scrollable-element" ref="menu">
+      <li :data-menuanchor="'post-' + post.id" v-for="post in postsStore.posts" :key="post.id">
+        <a :href="'#post-' + post.id">{{ post.formatedDate }}</a>
+      </li>
+    </ul>
+  </div>
+  <full-page
+    id="fullpage"
+    ref="fullpage"
+    :options="fullpageOptions"
+    @on-leave="onLeave"
+    @after-load="afterLoad"
+  >
+    <WelcomeComponent />
+    <PostComponent class="section" v-for="post in postsStore.posts" :key="post.id" :post="post" />
+  </full-page>
+</template>
+
+<style scoped>
+#menu-grid {
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+  z-index: 70;
+  pointer-events: none;
+}
+
+#menu {
+  grid-area: 3 / 5 / 4 / 6;
+  pointer-events: auto;
+  list-style-type: none;
+  max-height: 220px;
+  overflow-y: scroll;
+  margin-right: 20px;
+  transition: opacity 1s;
+  opacity: 0;
+}
+
+@media screen and (max-width: 1024px) {
+  #menu {
+    grid-area: 4 / 4 / 6 / 6;
+  }
+}
+@media screen and (max-width: 500px) {
+  #menu {
+    grid-area: 1 / 1 / 2 / 6;
+    margin-top: 50px;
+  }
+}
+
+#menu li {
+  margin: 10px;
+  border-radius: 10px;
+  backdrop-filter: blur(10px);
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+#menu li:hover {
+  background-color: rgba(100, 100, 100, 0.1);
+}
+
+#menu li.active,
+#menu li.active:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+#menu li a {
+  text-decoration: none;
+  color: #fff;
+  padding: 9px 18px;
+  display: block;
+  text-align: right;
+}
+
+#menu li.active a,
+#menu li.active:hover a:hover {
+  font-weight: bold;
+}
+</style>