Implement dropdown SDK language on left menu

Author: rakeshAlgo

src/css/component-frame.css

@@ -1,7 +1,7 @@
 .component-frame {
   /* rgba(87, 160, 255, 1) */
   background: var(--color-brand-gray6);
-  padding: 12px 30px 12px 15px;
+  padding: 12px 15px 12px 15px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -46,12 +46,10 @@
 .frame-dropdown {
   position: absolute;
   display: none;
-  background: var(--color-brand-white);
-  padding: 5px 15px;
-  left: -15px;
-  top: 50px;
-  border-radius: 4px;
+  left: 0;
+  top: 45px;
   z-index: 1;
+  padding: 17px 0 0;
 }
 
 .frame-dropdown .frame-dropdown-list {
@@ -60,14 +58,43 @@
   list-style: none;
 }
 
+.frame-dropdown ul {
+  background: var(--color-brand-white);
+  min-width: 125px;
+  border-radius: 4px;
+  box-shadow: 0 3px 10px -4px var(--color-brand-gray8);
+}
+
+.frame-dropdown ul li a {
+  padding: 4px 0.625rem;
+  display: inline-block;
+  width: 100%;
+}
+
+ul.frame-dropdown-list li {
+  border-bottom: 1px solid var(--color-brand-gray8);
+  padding-bottom: 5px;
+  margin-bottom: 5px;
+}
+
+ul.frame-dropdown-list li:last-child {
+  border-bottom: 0;
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+
 .frame-link,
 .frame-item {
-  font-size: 1rem;
+  font-size: var(--font-small);
   color: var(--color-brand-gray4);
   text-decoration: none;
 }
 
 .frame-link:hover,
-.frame-item:hover {
+.frame-item:hover,
+.frame-link:active,
+.frame-item:active,
+.frame-link:visited,
+.frame-item:visited {
   text-decoration: none;
 }

src/css/nav.css

@@ -374,6 +374,44 @@ html.is-clipped--nav {
   margin: auto;
 } */
 
+.nav-menu ul.version-related-list.nav-list {
+  margin: -1.5rem 0 1.5rem;
+}
+
+.nav-menu ul.version-related-list.nav-list ul {
+  padding: 5px 0 0;
+  list-style: none;
+}
+
+.nav-menu ul.version-related-list.nav-list li a {
+  color: var(--color-brand-gray1);
+  padding: 0;
+  text-transform: capitalize;
+}
+
+.nav-menu ul.version-related-list.nav-list li a:focus,
+.nav-menu ul.version-related-list.nav-list li a:hover {
+  color: var(--color-brand-blue-secondary);
+}
+
+/* .nav-menu ul.version-related-list.nav-list .nav-line {
+  padding-left: 1.65rem;
+} */
+.nav-menu ul.version-related-list.nav-list .nav-line .in-toggle {
+  display: block;
+  position: relative;
+  width: 0;
+  height: 0;
+  margin-right: 10px;
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  border-left: 10px solid var(--color-brand-gray5);
+}
+
+.nav-menu ul.version-related-list.nav-list .nav-line[data-depth='1'] {
+  padding-left: 1.85rem;
+}
+
 @media screen and (min-width: 769px) {
   .nav-control {
     display: none;

src/js/01-nav.js

@@ -82,8 +82,10 @@
     navMenuControl.addEventListener('click', function () {
       //   navWrap.style.display = 'none'
       for (var i = 0; i < navItems.length; i++) {
+        console.log(navItems[i], 85)
         navItems[i].classList.remove('is-active')
         navItems[i].classList.remove('is-inactive')
+        navItems[i].classList.remove('open')
       }
       this.style.display = 'none'
     })

src/partials/nav-menu.hbs

@@ -1,4 +1,29 @@
 <div class="nav-menu">
     {{> nav-version-control}}
     {{> nav-tree navigation=page.navigation level=0 crumbLevel=0 crumbAtLevel=(lookup page.breadcrumbs 0)}}
+    {{!-- append version info for SDK --}}
+    {{#if (ends-with page.component.name '-sdk')}}
+      <ul class="version-related-list nav-list">
+          <li class="nav-item open is-active" data-depth="0">
+
+             <span class="nav-line " data-depth="0">
+                <span class="in-toggle" data-depth="0"></span>
+                <span class="nav-text ">SDK</span>
+             </span>
+
+              <ul class="related nav-list">
+                {{#each (related-sdk-pages 'c,dotnet,go,java,nodejs,php,python,scala')}}
+                    <li data-depth="1">
+                           <span class="nav-line " data-depth="1">
+                                {{!-- <span class="in-toggle" data-depth="1"></span> --}}
+                                 <a class="navbar-item nav-link" data-depth="1" href="{{relativize ./url}}">{{{./title}}}</a>
+                            </span>
+                       </li>
+                {{/each}}
+            </ul>
+          </li>
+
+      </ul>
+
+    {{/if}}
 </div>

src/partials/nav-version-control.hbs

@@ -20,13 +20,13 @@
                                   {{/unless}}
                               {{/each}}
                               </ul>
-                              {{#if (ends-with page.component.name '-sdk')}}
+                              {{!-- {{#if (ends-with page.component.name '-sdk')}}
                                   <ul class="related">
                                   {{#each (related-sdk-pages 'c,dotnet,go,java,nodejs,php,python,scala')}}
                                       <li><a class="navbar-item" href="{{relativize ./url}}">{{{./title}}}</a></li>
                                   {{/each}}
                                   </ul>
-                              {{/if}}
+                              {{/if}} --}}
                           </div>
                         </div>
                     </div>