Merge pull request #36 from esciencecenter-digital-skills/layout

Layout and main menu

app.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="flex flex-col w-screen bg-gentleBlue h-screen overflow-hidden">
-    <Banner />
-
-    <div class="flex-1 overflow-auto">
-      <NuxtPage />
+        <Banner />
+        <div class="flex-1 overflow-auto">
+            <NuxtPage />
+        </div>            
+        <Footer />
     </div>
-    <Footer />
-  </div>
 </template>
-<script setup>
+
+<script setup lang="ts">
 </script>

components/Banner.vue

@@ -1,18 +1,36 @@
 <template>
-  <div class="flex flex-row bg-eScienceWhite">
-    <div class="flex p-5 items-center">
-      <NuxtLink :to="`/`">
-        <img src="~/public/nlesc-logo.svg" alt="Netherlands eScience Center Logo" width="250px">
-      </NuxtLink>
-    </div>
-    <div class="flex font-display font-semibold pt-12 pl-10">
-      <div v-if="$route.path === '/'">
-        <h1 class="text-4xl text-eSciencePurple">
-          {{ $config.public.title }} Modules
-        </h1>
-      </div>
+    <div class="flex p-5 bg-eScienceWhite text-xl items-center text-eSciencePurple border-b-2">
+        <div class="flex flex-1 gap-10 items-center ">
+          <NuxtLink :to="`/`">
+            <div class="text-4xl mx-16 font-bold">
+              {{ $config.public.title }}
+            </div>
+          </NuxtLink>
+        </div>
+
+        <div class="flex align-middle items-center">
+          <div class="p-5">
+
+            <NuxtLink :to="`/`" class="p-5 hover:text-eScienceBlue">
+              Modules
+            </NuxtLink>
+
+            <ContentList :path="'/main'"  v-slot="{ list }">
+              <nuxt-link v-for="page in list" :key="page._path" :to="page._path" class="p-5 hover:text-eScienceBlue">
+                    {{ page.title }}
+              </nuxt-link>
+            </ContentList>
+
+          </div>
+          <NuxtLink to="https://www.github.com/esciencecenter-digital-skills/research-software-support" target="_blank" class=" pl-10">
+            <img src="/icons/github-mark.svg" alt="Netherlands eScience Center Logo" width="50px" height="50px" class="align-middle">
+          </NuxtLink>
+          <NuxtLink to="https://www.esciencecenter.nl" target="_blank" class="px-5">
+            <img src="/nlesc-logo.svg" alt="Netherlands eScience Center Logo" width="200px">
+          </NuxtLink>
+        </div>
+
     </div>
-  </div>
 </template>
 
 <script>

components/ChapterBar.vue

@@ -0,0 +1,24 @@
+<template>
+    <div class="flex no-wrap text-left ml-20">
+      <div v-for="chapter in chapterList" :key="chapter._path">
+        <nuxt-link :to="chapter._path" role="button" class="flex max-h-20 m-4 ">
+            <div class="text-2xl px-1.5 py-3 content-center flex-none rounded-bl-xl bg-eScienceYellow">
+              <img v-if="chapter.type === `info`" src="/icons/info.svg" width="25"></img>
+              <img v-else-if="chapter.type === `exercise`" src="/icons/exercise.svg" width="25"></img>
+              <img v-else-if="chapter.type === `reading`" src="/icons/reading.svg" width="25"></img>
+              <img v-else-if="chapter.type === 'slides'" src="/icons/presentation.svg" width="25"></img>
+            </div>
+            <div class="p-4 flex-initial text-lg font-display font-semibold rounded-tr-xl bg-eScienceBlue bg-opacity-10 text-eSciencePurple hover:bg-eScienceWhite hover:text-eScienceBlue">
+              {{ chapter.title }}
+            </div>
+        </nuxt-link>
+      </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  const route = useRoute();
+  const chapterList = await queryContent('/modules/' + route.params.module + '/')
+    .sort({ order: 1, $numeric: true })
+    .find();
+</script>

components/Footer.vue

@@ -1,10 +1,11 @@
 <template>
   <div>
     <div class="decoration-slice bg-gentleBlue p-4" />
-    <div id="footer" class="bg-eSciencePurple p-2">
-      <p class="font-body text-eScienceWhite text-sm text-center">
+    <div id="footer" class="bg-eSciencePurple p-2 font-body text-eScienceWhite text-sm text-center">
+      <div class="text-center">
         These materials are developed by the <a href="https://www.esciencecenter.nl">Netherlands eScience Center</a>. Licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC-BY 4.0</a> unless otherwise noted.
-      </p>
+      </div>
+
     </div>
   </div>
 </template>