Split dropdown of versions

Author: simonredfern

src-svelte/Dropdown.svelte

@@ -122,12 +122,16 @@
     <div class="dropdown-menu">
       <div class="dropdown-content">
         {#each items as item}
-          <button
-            class="dropdown-item"
-            onclick={() => handleSelect(item)}
-          >
-            {item}
-          </button>
+          {#if item === '---'}
+            <div class="dropdown-divider"></div>
+          {:else}
+            <button
+              class="dropdown-item"
+              onclick={() => handleSelect(item)}
+            >
+              {item}
+            </button>
+          {/if}
         {/each}
       </div>
     </div>
@@ -231,6 +235,12 @@
     opacity: 0.8;
   }
 
+  .dropdown-divider {
+    height: 1px;
+    margin: 6px 0;
+    background-color: #e4e7ed;
+  }
+
   /* Custom scrollbar styling */
   .dropdown-content::-webkit-scrollbar {
     width: 6px;

src/components/HeaderNav.vue

@@ -51,6 +51,27 @@ const loginUsername = ref('')
 const logoffurl = ref('')
 const obpApiVersions = ref(inject(obpApiActiveVersionsKey)!)
 const obpMessageDocs = ref(Object.keys(inject(obpGroupedMessageDocsKey)!))
+
+// Split versions into main and other
+const mainVersions = ['BGv1.3', 'OBPv5.1.0', 'OBPv6.0.0', 'UKv3.1', 'dynamic-endpoints', 'dynamic-entities', 'OBPdynamic-endpoint', 'OBPdynamic-entity']
+const sortedVersions = computed(() => {
+  const all = obpApiVersions.value || []
+  console.log('All available versions:', all)
+  const main = mainVersions.filter(v => all.includes(v))
+  console.log('Main versions found:', main)
+  const others = all.filter(v => !mainVersions.includes(v)).sort()
+  console.log('Other versions:', others)
+
+  // Only add divider if we have both main and other versions
+  if (main.length > 0 && others.length > 0) {
+    return [...main, '---', ...others]
+  } else if (main.length > 0) {
+    return main
+  } else {
+    return others
+  }
+})
+
 const isShowLoginButton = ref(true)
 const isShowLogOffButton = ref(false)
 const logo = ref(logoSource)
@@ -78,6 +99,12 @@ const setActive = (target: HTMLElement | null) => {
 
 const handleMore = (command: string) => {
   console.log('handleMore called with command:', command)
+
+  // Ignore divider
+  if (command === '---') {
+    return
+  }
+
   let element = document.getElementById("selected-api-version")
   if (element !== null) {
     element.textContent = command;
@@ -153,7 +180,7 @@ const getCurrentPath = () => {
         class="menu-right"
         id="header-nav-versions"
         label="Versions"
-        :items="obpApiVersions"
+        :items="sortedVersions"
         :hover-color="headerLinksHoverColor"
         :background-color="headerLinksBackgroundColor"
         @select="handleMore"

src/views/MessageDocsView.vue

@@ -77,12 +77,13 @@ function showDependentEndpoints(value: any) {
     <el-main class="message-docs-content">
       <el-scrollbar>
         <el-backtop :right="100" :bottom="100" />
+        <div class="message-docs-header">
+          <h1>{{ connector }}</h1>
+          <p class="connector-subtitle">Message Docs</p>
+        </div>
         <div v-for="(group, key) of messageDocs" :key="key">
           <div v-for="(value, key) of group" :key="value">
             <el-divider></el-divider>
-            <header>
-
-            </header>
             <a v-bind:href="`#${value.process}`" :id="value.process">
               <h2>{{ value.process }}</h2>
             </a>
@@ -251,4 +252,25 @@ div {
 .content :deep(a):hover {
   background-color: #39455f;
 }
+
+.message-docs-header {
+  padding: 20px 0;
+  border-bottom: 2px solid #e4e7ed;
+  margin-bottom: 20px;
+}
+
+.message-docs-header h1 {
+  font-size: 1.75rem;
+  font-weight: 600;
+  color: #303133;
+  margin: 0 0 0.5rem 0;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.connector-subtitle {
+  font-size: 1rem;
+  color: #909399;
+  margin: 0;
+}
 </style>