style(nav): right-align Registry/Documentation/GitHub links, logo stays left

Author: ypriverol

web/src/components/Nav.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="nav-container">
-    <Menu mode="horizontal" @on-select="go">
-      <a class="logo" @click="$router.push('/')">
-        <img src="/static/logo/biocontainers-logo.png" width="40" height="40" alt="" /> BioContainers
-      </a>
+    <a class="logo" @click="$router.push('/')">
+      <img src="/static/logo/biocontainers-logo.png" width="40" height="40" alt="" /> BioContainers
+    </a>
+    <Menu mode="horizontal" class="nav-menu" @on-select="go">
       <MenuItem name="/registry"><Icon type="ios-search" /> Registry</MenuItem>
       <MenuItem name="docs"><Icon type="ios-information-circle-outline" /> Documentation</MenuItem>
       <MenuItem name="github"><Icon type="logo-github" /> GitHub</MenuItem>
@@ -26,14 +26,29 @@ function go(name) {
 
 <style scoped>
 .nav-container {
-  border-bottom: 1px solid #e8eaec;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #dcdee2;
+  padding: 0 8px;
 }
 .logo {
   font-size: 14px;
-  padding: 0 16px;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   cursor: pointer;
+  padding: 0 8px;
+  white-space: nowrap;
+}
+/* push the menu (Registry / Documentation / GitHub) to the right */
+.nav-menu {
+  margin-left: auto;
+}
+/* the container already draws the full-width bottom line */
+.nav-menu :deep(.ivu-menu) {
+  background: transparent;
+}
+.nav-menu.ivu-menu-horizontal::after {
+  display: none;
 }
 </style>