nav updates and testing

tigergraph · Feb 8, 2024 · 988d92e · 988d92e
1 parent 0d5c49b
commit 988d92e
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 18 deletions.
diff --git a/build/ui-bundle.zip b/build/ui-bundle.zip
diff --git a/src/css/header.css b/src/css/header.css
@@ -380,12 +380,21 @@ body {
 .dropdown-label {
   margin: 0.5rem 0 0 0;
   font-size: calc(16 / var(--rem-base) * 1rem);
-  color: rgb(70, 70, 70);
-  font-weight: 500;
+  color: #424242;
+  font-weight: bold;
   white-space: nowrap;
   padding-left: 0.75rem;
 }
 
+/* revamp left nav css modeled after the dropdown label */
+.home-left-nav-title {
+  font-size: calc(16 / var(--rem-base) * 1rem);
+  color: #424242;
+  font-weight: bold;
+  white-space: nowrap;
+  padding-left: 0.25rem;
+}
+
 .category-item {
   padding: 0 0.5rem;
   color: #424242;

diff --git a/src/css/nav.css b/src/css/nav.css
@@ -298,6 +298,7 @@ html.is-clipped--nav {
 }
 
 .nav-panel-explore .component .title {
+  display: none;
   font-weight: var(--body-font-weight-bold);
   color: inherit;
 }
@@ -312,7 +313,7 @@ html.is-clipped--nav {
 }
 
 .nav-panel-explore .component .version {
-  display: block;
+  display: none;
   margin: 0.375rem 0.375rem 0 0;
 }
 

diff --git a/src/partials/nav-explore.hbs b/src/partials/nav-explore.hbs
@@ -7,59 +7,55 @@
   {{/if}}
   <ul class="components">
     {{!-- Below is new nav code after revamp--}}
-    <div class="title" style="font-weight: bold;">TigerGraph DB</div>
+    <div class="home-left-nav-title" style="font-weight: bold;">TigerGraph DB</div>
     <div class="dropdown-category">
       <a class="category-item"  href="{{relativize site.components.tigergraph-server.url}}">{{site.components.tigergraph-server.title}}</a>
       <a class="category-item"  href="https://docs.tigergraph.com/tigergraph-server/current/getting-started/">Get Started</a>
     </div>
 
-    <div class="title" style="font-weight: bold;">TigerGraph Cloud</div>
+    <div class="home-left-nav-title" style="font-weight: bold;">TigerGraph Cloud</div>
     <div class="dropdown-category">
       <a class="category-item" href="{{relativize site.components.cloud.url}}">{{site.components.cloud.title}}</a>
       <a class="category-item"  href="https://docs.tigergraph.com/cloud/start/get_started">Get Started</a>
     </div>
 
-    <div class="title" style="font-weight: bold;">TigerGraph Suite</div>
+    <div class="home-left-nav-title" style="font-weight: bold;">TigerGraph Suite</div>
     <div class="dropdown-category">
       <a class="category-item" href="{{relativize site.components.gui.url}}">Admin Portal and GraphStudio</a>
       <a class="category-item" href="{{relativize site.components.insights.url}}">{{site.components.insights.title}}</a>
       <a class="category-item" href="https://docs.tigergraph.com/tigergraph-server/current/gsql-shell/web">GSQL Web Shell</a>
     </div>
 
-    <div class="title" style="font-weight: bold;">GSQL Language</div>
+    <div class="home-left-nav-title" style="font-weight: bold;">GSQL Language</div>
     <div class="dropdown-category">
       <a class="category-item" href="{{relativize site.components.gsql-ref.url}}">GSQL Language Reference</a>
       <a class="category-item"  href="https://docs.tigergraph.com/gsql-ref/current/tutorials/gsql-101/">GSQL 101</a>
     </div>
 
-    <div class="title" style="font-weight: bold;">Graph Data Science</div>
+    <div class="home-left-nav-title" style="font-weight: bold;">Graph Data Science</div>
     <div class="dropdown-category">
       <a class="category-item" href="{{relativize site.components.graph-ml.url}}">Graph Data Science Library</a>
       <a class="category-item" href="{{relativize site.components.ml-workbench.url}}">ML Workbench</a>
     </div>
 
-    <div class="title" style="font-weight: bold;">Connectors and APIs</div>
+    <div class="home-left-nav-title" style="font-weight: bold;">Connectors and APIs</div>
     <div class="dropdown-category">
       <a class="category-item" href="{{relativize site.components.pytigergraph.url}}">pyTigerGraph</a>
       <a class="category-item" href="{{relativize site.components.graphql.url}}">GraphQL Service</a>
       <a class="category-item" href="https://github.com/tigergraph/ecosys/tree/master/tools/etl/tg-jdbc-driver">JDBC Driver</a>
     </div>
-    {{!-- Below is old nav code before revamp--}}
+    {{!--Old Nav this is display: none but can still be indexed in the DOM--}}
     {{#each (rearrange site.components 'name' page.attributes.component-order)}}
-    {{!--
     <li class="component{{#if (eq this @root.page.component)}} is-current{{/if}}">
-    <a class="title" href="{{{relativize ./url}}}">{{{./title}}}</a>
-    --}}
+      <a class="title" href="{{{relativize ./url}}}">{{{./title}}}</a>
       {{#if (or ./versions.[1] (ne ./versions.[0].displayVersion 'default'))}}
         <ul class="versions">
           {{#each ./versions}}
-          {{!--
-           <li class="version
-              {{~#if (and (eq .. @root.page.component) (eq this @root.page.componentVersion))}} is-current{{/if~}}
+            <li class="version
+            {{~#if (and (eq .. @root.page.component) (eq this @root.page.componentVersion))}} is-current{{/if~}}
               {{~#if (eq this ../latest)}} is-latest{{/if}}">
-              <a href="{{{relativize ./url}}}">{{./displayVersion}}</a>>
+              <a href="{{{relativize ./url}}}">{{./displayVersion}}</a>
             </li>
-          --}}
           {{/each}}
         </ul>
       {{/if}}