navigation bar updated for summit

Qiskit · Nov 28, 2023 · d6845ec · d6845ec
1 parent 1b13b86
commit d6845ec
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 48 deletions.
diff --git a/components/icons/arrow-up-right.js b/components/icons/arrow-up-right.js
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) IBM, Corp. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+
+export const arrowUpRightIcon = html`
+
+<svg id="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><defs><style>.cls-1{fill:none;}</style></defs><title>arrow--up-right</title><polygon points="10 6 10 8 22.59 8 6 24.59 7.41 26 24 9.41 24 22 26 22 26 6 10 6"/><rect id="_Transparent_Rectangle_" data-name="&lt;Transparent Rectangle&gt;" class="cls-1" width="32" height="32"/></svg>
+
+`;
+
+
diff --git a/components/ui-shell/index.scss b/components/ui-shell/index.scss
@@ -91,12 +91,33 @@ $prefix: "bx";
 
 #{$prefix}-header-name {
   &::part(link) {
-    width: 8.75rem;
+    display: flex;
+    align-items: center;
+    width: 14.75rem;
     height: calc(var(--header-height) - 1px);
     fill: var(--cool-gray-80);
   }
 }
 
+.qiskit-header-brand {
+  margin-bottom: -2px;
+  margin-left: var(--cds-spacing-02);
+  color: var(--cool-gray-80);
+  font-weight: normal;
+}
+
+.arrow-icon {
+  align-self: end;
+  width: 16px;
+  margin-bottom: -2px;
+  margin-left: 4px;
+}
+
+.grid-arrow-icon {
+  display: grid;
+  grid-template-columns: auto 20px;
+}
+
 #{$prefix}-header-nav {
   height: calc(var(--header-height) - 1px);
 

diff --git a/components/ui-shell/index.ts b/components/ui-shell/index.ts
@@ -47,12 +47,13 @@ export class QiskitUIShell extends LitElement {
             }}"
           >
             ${qiskitLogoIcon}
+            <div class="qiskit-header-brand">Community</div>
           </bx-header-name>
           <bx-header-nav menu-bar-label="Qiskit">
             ${this._getHeaderItems()}
             ${this.variant === Variant.HIDE_ACCOUNT
-              ? null
-              : this._getAccountHeaderNavItem()}
+              ? this._getAccountHeaderNavItem()
+              : null}
           </bx-header-nav>
           <qiskit-header-menu-button
             button-label-active="Close menu"
@@ -105,8 +106,10 @@ export class QiskitUIShell extends LitElement {
         @click="${() => {
           this._handleClick(item);
         }}"
-      >
-        ${item?.label}
+        ><div class="grid-arrow-icon">
+          ${item?.label}
+          <div class="arrow-icon">${item?.arrowSvg}</div>
+        </div>
       </bx-header-nav-item>
     `;
   }
@@ -205,7 +208,7 @@ export class QiskitUIShell extends LitElement {
           this._handleClick(item, parentLabel);
         }}"
       >
-        ${item?.label}
+        ${item?.label} ${item?.arrowSvg}
       </bx-side-nav-menu-item>
     `;
   }

diff --git a/components/ui-shell/settings.ts b/components/ui-shell/settings.ts
@@ -7,6 +7,7 @@
 
 import type { TemplateResult } from 'lit';
 
+import { arrowUpRightIcon } from '../icons/arrow-up-right.js';
 import { mediumIcon } from '../icons/medium.js';
 import { slackIcon } from '../icons/slack.js';
 import { twitterIcon } from '../icons/twitter.js';
@@ -16,6 +17,7 @@ interface NavItem {
   label: string;
   url?: string;
   children?: NavItem[];
+  arrowSvg?: TemplateResult | undefined;
 }
 
 interface SocialLinks extends NavItem {
@@ -52,54 +54,27 @@ export const SOCIAL_LINKS: SocialLinks[] = [
 
 export const NAV_ITEMS: NavItem[] = [
   {
-    label: 'Documentation',
-    children: [
-      {
-        label: 'Home',
-        url: 'https://qiskit.org/documentation/',
-      },
-      {
-        label: 'Installation',
-        url: 'https://qiskit.org/documentation/getting_started.html',
-      },
-      {
-        label: 'Tutorials',
-        url: 'https://qiskit.org/documentation/tutorials.html',
-      },
-      {
-        label: 'API Reference',
-        url: 'https://qiskit.org/documentation/apidoc/index.html',
-      },
-      {
-        label: 'Contribute',
-        url: 'https://qiskit.org/documentation/contributing_to_qiskit.html',
-      },
-    ],
+    label: 'Events',
+    url: 'https://qiskit.org/events',
+  },
+  {
+    label: 'Advocates',
+    url: 'https://qiskit.org/advocates',
   },
   {
-    label: 'Providers',
-    url: 'https://qiskit.org/providers/',
+    label: 'Ecosystem',
+    url: 'https://qiskit.github.io/ecosystem',
+    arrowSvg: arrowUpRightIcon,
   },
   {
-    label: 'Community',
-    children: [
-      {
-        label: 'Events',
-        url: 'https://qiskit.org/events/',
-      },
-      {
-        label: 'Advocates',
-        url: 'https://qiskit.org/advocates/',
-      },
-      {
-        label: 'Ecosystem',
-        url: 'https://qiskit.org/ecosystem/',
-      },
-    ],
+    label: 'Documentation',
+    url: 'https://docs.quantum-computing.ibm.com',
+    arrowSvg: arrowUpRightIcon,
   },
   {
-    label: 'Learn',
-    url: 'https://qiskit.org/learn/',
+    label: 'Learning',
+    url: 'https://learning.quantum-computing.ibm.com',
+    arrowSvg: arrowUpRightIcon,
   },
 ];