Add Collections Menu and add fancy loading screen.

As proof of concept, the collection url-text pairs are hard-coded into into the Collections.vue file. This is to be better configured later on.

index.html

@@ -30,6 +30,7 @@
         position: relative;
         width: 80px;
         height: 80px;
+        margin-top: 15px;
       }
       .lds-dual-ring:after {
         content: " ";
@@ -57,9 +58,8 @@
     
     <div id="app">
       <div class="loading-page">
-        <img src="/src/assets/logo2x-1.png" style="margin-top: 50px;">
+        <img src="/src/assets/logo2x-1.png" style="width: 304px; margin-top: 50px;">
         <div class="lds-dual-ring"></div>
-        <div class="loading-messages"><p>Loading...</p></div>
       </div>
     </div>
     

src/components/Collections.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { searchLinksColor as searchLinksColorSetting } from '../obp/style-setting'
+import { inject, ref } from 'vue'
+
+const searchLinksColor = ref(searchLinksColorSetting);
+
+const collectionData = [
+    {
+        "url": "/?api-collection-id=341bf039-97e4-4803-aaae-2d1dc6a5b162",
+        "text": "Risk mgmt. & mitigation"
+    },
+    {
+        "url": "/?api-collection-id=fc3220e5-c891-4943-bbdb-6579ef3889c0",
+        "text": "Process mgmt. & enh."
+    },
+    {
+        "url": "/?api-collection-id=18fa516e-8e52-473c-98c4-430b1043ef4f",
+        "text": "Credit data & scoring"
+    },
+    {
+        "url": "/?api-collection-id=7d4b5f73-9bde-4556-a0ee-ce0f746f833f",
+        "text": "Innovative prods & svcs"
+    },
+    {
+        "url": "/?api-collection-id=cbd97e62-fb8a-42a4-ad5a-139729d11312",
+        "text": "Women-led/owned MSMEs prods & svcs"
+    }
+]
+
+</script>
+
+<template>
+  <el-menu 
+    class="collections-menu"
+    mode="horizontal"
+    background-color="#151d30"
+    text-color="#fff"
+    active-text-color="#52b165">
+        <el-menu-item v-for="(item, index) in collectionData" :index="index">
+            <RouterLink :to="item.url">{{ item.text }}</RouterLink>
+        </el-menu-item>
+    </el-menu>
+</template>
+
+<style scoped>
+a {
+  font-size: 14px;
+  font-family: 'Roboto';
+  color: #7787a6;
+  text-decoration: none;
+}
+
+/* This is not working at the moment, but ideally we would like the color of the menu item to change when hovering.
+a:hover {
+    color: v-bind(searchLinksColor);
+}
+*/
+
+</style>

src/views/BodyView.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import SearchNav from '../components/SearchNav.vue'
 import Menu from '../components/Menu.vue'
+import Collections from '../components/Collections.vue'
 </script>
 
 <template>
@@ -11,6 +12,9 @@ import Menu from '../components/Menu.vue'
     </el-aside>
     <el-main>
       <el-container class="main">
+        <el-header class="collections">
+          <Collections />
+        </el-header>
         <el-header class="menu">
           <Menu />
         </el-header>
@@ -49,4 +53,10 @@ import Menu from '../components/Menu.vue'
   background-color: #151d30;
   max-height: 100vh;
 }
+.collections {
+  margin-left: -20px;
+  margin-right: -20px;
+  padding-left: 20px;
+  padding-right: 20px;
+}
 </style>