WIP: search nav and content

components.d.ts

@@ -9,14 +9,12 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    Body: typeof import('./src/components/Body.vue')['default']
     Content: typeof import('./src/components/Content.vue')['default']
     ElAside: typeof import('element-plus/es')['ElAside']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElCollapse: typeof import('element-plus/es')['ElCollapse']
     ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
     ElContainer: typeof import('element-plus/es')['ElContainer']
-    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
     ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
@@ -25,33 +23,13 @@ declare module '@vue/runtime-core' {
     ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
-    ElLink: typeof import('element-plus/es')['ElLink']
     ElMain: typeof import('element-plus/es')['ElMain']
-    ElMenu: typeof import('element-plus/es')['ElMenu']
-    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
-    ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
-    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
-    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
-    ElTable: typeof import('element-plus/es')['ElTable']
-    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
-    ElTabPane: typeof import('element-plus/es')['ElTabPane']
-    ElTabs: typeof import('element-plus/es')['ElTabs']
-    ElText: typeof import('element-plus/es')['ElText']
-    Header: typeof import('./src/components/Header.vue')['default']
     HeaderNav: typeof import('./src/components/HeaderNav.vue')['default']
-    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
-    IconCommunity: typeof import('./src/components/icons/IconCommunity.vue')['default']
-    IconDocumentation: typeof import('./src/components/icons/IconDocumentation.vue')['default']
-    IconEcosystem: typeof import('./src/components/icons/IconEcosystem.vue')['default']
-    IconSupport: typeof import('./src/components/icons/IconSupport.vue')['default']
-    IconTooling: typeof import('./src/components/icons/IconTooling.vue')['default']
     Menu: typeof import('./src/components/Menu.vue')['default']
     Preview: typeof import('./src/components/Preview.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SearchNav: typeof import('./src/components/SearchNav.vue')['default']
-    TheWelcome: typeof import('./src/components/TheWelcome.vue')['default']
-    WelcomeItem: typeof import('./src/components/WelcomeItem.vue')['default']
   }
 }

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "vite",
-    "build": "run-p type-check build-only",
+    "build": "run-p build-only",
     "preview": "vite preview",
     "test:unit": "vitest",
     "build-only": "vite build",

src/App.vue

@@ -10,7 +10,6 @@ import HeaderNav from './components/HeaderNav.vue'
         <HeaderNav />
       </el-header>
       <RouterView />
-      <el-footer>Footer</el-footer>
     </el-container>
   </div>
 </template>

src/assets/element-plus-override.css

@@ -1,20 +1,51 @@
+.el-main {
+  --el-main-padding: padding 0px !important;
+}
+
 .el-collapse-item__header {
   border-bottom: none !important;
+  height: 30px !important;
+  font-family: 'Roboto' !important;
+  font-size: 14px !important;
+  font-weight: 600 !important;
 }
 
 .el-collapse-item__wrap {
   border-bottom: none !important;
 }
 
-.el-main {
-  --el-main-padding: padding 0px !important;
-}
-
 .el-collapse-item__header {
   background-color: transparent !important;
+  white-space: nowrap !important;
 }
 
 .el-collapse {
+  margin-top: 5px;
+  margin-right: -8px;
+  max-height: 900px;
+  min-height: 800px;
+  overflow-y: auto !important;
+  border-top: none !important;
   border-bottom: none !important;
   --el-collapse-content-bg-color: transparent !important;
 }
+
+.el-collapse-item__content {
+  overflow-x: auto !important;
+  white-space: nowrap !important;
+  line-height: 30px !important;
+  padding-bottom: 0px !important;
+}
+
+.el-tabs--right {
+  display: inline-block !important;
+}
+
+.el-dropdown-link {
+  margin-top: -4px;
+  font-family: Roboto;
+}
+
+.el-dropdown-menu__item {
+  font-family: Roboto;
+}

src/assets/main.css

@@ -1,7 +1,4 @@
 @import './base.css';
-@import './header.css';
-@import './search-nav.css';
-@import './preview.css';
 @import './element-plus-override.css';
 
 main {

src/components/Content.vue

@@ -1,8 +1,24 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, inject, onBeforeMount } from 'vue'
+import { onBeforeRouteUpdate, useRoute } from 'vue-router'
+import { getDescription } from '../obp/resource-docs'
+
+const description = ref('')
+const docs = inject('OBP-ResourceDocs')
+
+onBeforeMount(() => {
+  const route = useRoute()
+  description.value = getDescription(docs, route.params.id)
+})
+onBeforeRouteUpdate((to) => {
+  description.value = getDescription(docs, to.params.id)
+})
+</script>
 
 <template>
   <main>
-    Content
+    Description:
     {{ $route.params.id }}
+    <div v-html="description"></div>
   </main>
 </template>

src/components/HeaderNav.vue

@@ -21,6 +21,66 @@ import { ArrowDown } from '@element-plus/icons-vue'
         <arrow-down />
       </el-icon>
     </span>
-    <RouterLink class="router-link" to="/login">Login</RouterLink>
+    <RouterLink class="login-button router-link" to="/login">Login</RouterLink>
   </nav>
 </template>
+
+<style>
+nav {
+  text-align: right;
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.logo {
+  display: table-cell;
+  vertical-align: middle;
+  transform: translateY(-50%);
+  top: 50%;
+}
+
+.header {
+  position: relative;
+  display: table;
+}
+
+.header::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 1px;
+  background-color: var(--el-border-color-light);
+  z-index: var(--el-index-normal);
+}
+
+.router-link {
+  padding: 9px;
+  color: #39455f;
+  font-family: 'Roboto';
+  font-size: 14px;
+  text-decoration: none;
+  border-radius: 8px;
+}
+
+.router-link:hover {
+  background-color: #eef0f4;
+}
+
+.logo {
+  height: 40px;
+  position: absolute;
+  cursor: pointer;
+}
+
+.login-button {
+  margin: 5px;
+  color: #ffffff;
+  background-color: #32b9ce;
+}
+
+.login-button:hover {
+  color: #39455f;
+}
+</style>

src/components/Menu.vue

@@ -1,8 +1,26 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ArrowDown } from '@element-plus/icons-vue'
+</script>
 
 <template>
   <el-row>
     <el-col :span="12" class="menu-left">Menu left</el-col>
-    <el-col :span="12" class="menu-right">Menu right</el-col>
+    <el-col :span="12" class="menu-right">
+      Menu right &nbsp;&nbsp;&nbsp;&nbsp;
+      <el-dropdown class="menu-right">
+        <span class="el-dropdown-link">
+          EN
+          <el-icon class="el-icon--right">
+            <arrow-down />
+          </el-icon>
+        </span>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item>EN</el-dropdown-item>
+            <el-dropdown-item disabled>SP</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </el-col>
   </el-row>
 </template>

src/components/SearchNav.vue

@@ -1,34 +1,65 @@
 <script setup lang="ts">
-import { reactive, ref } from 'vue'
+import { reactive, ref, onBeforeMount, inject } from 'vue'
 import { Search } from '@element-plus/icons-vue'
-//import { getResourceDocs } from "../obp/client"
 
-const activeNames = ref(['2'])
+const groups = ref({})
+const sortedKeys = ref([])
 const form = reactive({
   search: ''
 })
 
-//const resourceDocs = (async ()=>{
-//  console.log(await getResourceDocs());
-//})()
+onBeforeMount(() => {
+  groups.value = inject('OBP-GroupedResourceDocs')!
+  sortedKeys.value = Object.keys(groups.value).sort()
+})
 </script>
 
 <template>
   <el-form :model="form" label-width="120px">
     <el-input v-model="form.search" class="w-50 m-1" placeholder="Search" :prefix-icon="Search" />
   </el-form>
-  <el-collapse v-model="activeNames">
+  <el-collapse v-model="sortedKeys">
     <el-collapse-item title="My Collections" name="1"> </el-collapse-item>
-    <el-collapse-item title="API" name="2">
+    <el-collapse-item v-for="key in sortedKeys" :title="key" :key="key" :name="key">
       <div class="el-tabs--right">
-        <div class="el-tabs__nav-wrap is-right">
-          <div v-for="i in 4" :key="i">
-            <RouterLink :to="{ name: 'api', params: { id: 'API Item ' + i } }">{{
-              'API Item ' + i
-            }}</RouterLink>
-          </div>
+        <div v-for="item in groups[key]" :key="item" class="api-router-tab">
+          <RouterLink
+            class="api-router-link"
+            :to="{ name: 'api', params: { id: item.operation_id } }"
+            >{{ item.summary }}</RouterLink
+          >
         </div>
       </div>
     </el-collapse-item>
   </el-collapse>
 </template>
+
+<style>
+.search-nav {
+  background-color: #f8f9fb;
+  padding: 8px;
+  border-right: solid 1px var(--el-menu-border-color);
+}
+
+.api-router-link {
+  width: 100%;
+  margin-left: 15px;
+  font-family: 'Roboto' !important;
+  text-decoration: none;
+  color: #39455f;
+  display: inline-block;
+}
+
+.api-router-tab {
+  border-left: 2px solid var(--el-menu-border-color);
+}
+
+.api-router-tab:hover {
+  border-left: 2px solid #52b165;
+  /*cursor: pointer;*/
+}
+
+.api-router-tab:hover .api-router-link {
+  color: #52b165;
+}
+</style>