fix nav bar scroll styling and item id generation

Author: mrin9

src/styles/nav-styles.js

@@ -27,14 +27,6 @@ export default html`
 .nav-scroll::-webkit-scrollbar-track {
   background:transparent;
 }
-.nav-scroll::-webkit-scrollbar {
-  display:none;
-  width: 12px;
-  background-color: transparent;
-}
-.nav-scroll:hover::-webkit-scrollbar {
-  display:block;
-}
 .nav-scroll::-webkit-scrollbar-thumb {
   border: 3px solid var(--nav-bg-color);
   border-width: 0 3px;

src/templates/expanded-endpoint-template.js

@@ -78,7 +78,7 @@ export function expandedEndpointBodyTemplate(path) {
 export default function expandedEndpointTemplate() {
   return html`
   ${this.resolvedSpec.tags.map((tag) => html`
-    <div id="${tag.name.replace(invalidCharsRegEx, '-')}" class='regular-font section-gap--read-mode observe-me' style="border-top:1px solid var(--primary-color);">
+    <div id="tag--${tag.name.replace(invalidCharsRegEx, '-')}" class='regular-font section-gap--read-mode observe-me' style="border-top:1px solid var(--primary-color);">
       <div class="title tag">${tag.name}</div>
       <div class="regular-font-size">
         ${unsafeHTML(`<div class='m-markdown regular-font'>${marked(tag.description ? tag.description : '')}</div>`)}

src/templates/focused-endpoint-template.js

@@ -8,7 +8,7 @@ import '@/components/api-response';
 /* eslint-disable indent */
 function focusedTagBodyTemplate(tag) {
   return html`
-    <h1 id="tag-${tag.name}">${tag.name}</h1>
+    <h1 id="tag--${tag.name}">${tag.name}</h1>
     ${tag.description ? html`<div class="m-markdown"> ${unsafeHTML(marked(tag.description || ''))}</div>` : ''}
   `;
 }
@@ -26,8 +26,8 @@ export default function focusedEndpointTemplate() {
   if (itemToFocus === 'overview' || itemToFocus === 'authentication' || itemToFocus === 'api-servers') {
     selectedPathObj = {};
     selectedTagObj = {};
-  } else if (itemToFocus.startsWith('tag-')) {
-    const tag = itemToFocus.replace('tag-', '');
+  } else if (itemToFocus.startsWith('tag--')) {
+    const tag = itemToFocus.replace('tag--', '');
     selectedTagObj = this.resolvedSpec.tags.find((v) => v.name === tag);
   } else {
     for (i = 0; i < this.resolvedSpec.tags.length; i += 1) {
@@ -46,7 +46,7 @@ export default function focusedEndpointTemplate() {
   return html`
     ${itemToFocus === 'overview' || itemToFocus === 'authentication' || itemToFocus === 'api-servers'
       ? html``
-      : itemToFocus.startsWith('tag-')
+      : itemToFocus.startsWith('tag--')
         ? html`
           <div class='regular-font section-gap--focused-mode'>
             ${focusedTagBodyTemplate.call(this, selectedTagObj)}

src/templates/navbar-template.js

@@ -61,7 +61,7 @@ export default function navbarTemplate() {
     <span id='link-paths' class='nav-bar-section'>Operations</span>
     ${this.resolvedSpec.tags.map((tag) => html`
       <!-- Tag -->
-      <div class='nav-bar-tag' id="link-${tag.name.replace(invalidCharsRegEx, '-')}" data-content-id='tag-${tag.name}' @click='${(e) => this.scrollToEl(e)}'>
+      <div class='nav-bar-tag' id="link-tag--${tag.name.replace(invalidCharsRegEx, '-')}" data-content-id='tag--${tag.name}' @click='${(e) => this.scrollToEl(e)}'>
         ${tag.name}
       </div>