Fix for Implementation of Collapsible Sidebar Menu #30

src/app/app.component.css

@@ -129,4 +129,86 @@ h5, .h5 {
     margin: 2%;
     bottom: 2%;
     color: #fff;
-} */
+} */
+
+/* Toggle sidebar */
+
+.ham {
+  position: absolute;
+  width: 30px;
+  height: 30px;
+  right: 5%;
+  top: calc(50% - 15px);
+}
+
+.ham::before,
+.ham::after,
+.ham .dash {
+  content: "";
+  position: absolute;
+  top: 30%;
+  height: 2px;
+  background-color: white;
+  width: 100%;
+  transform-origin: center;
+  transition: all 0.5s ease-in-out;
+}
+
+.ham::after {
+  top: 70%;
+}
+
+.ham .dash {
+  top: 50%;
+}
+
+.ham.open::before {
+  top: 50%;
+  transform: rotate(45deg);
+}
+
+.ham.open::after {
+  top: 50%;
+  transform: rotate(-45deg);
+}
+
+.ham.open .dash {
+  opacity: 0;
+}
+
+.row {
+  flex-wrap: nowrap;
+  max-width: 100%;
+  overflow-x: hidden;
+}
+
+nav {
+  position: relative;
+}
+
+.sidebar {
+  text-align: center;
+}
+
+.row div:nth-child(1) {
+  flex-grow: 3;
+  flex-shrink: 1;
+}
+.row div:nth-child(2) {
+  flex-grow: 1;
+  min-width: 200px;
+  flex-shrink: 3;
+  transition: all 0.5s linear;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  /* transition-delay: 0ms; */
+  width: max-content;
+}
+
+.hide {
+  max-width: 0 !important;
+  min-width: 0 !important;
+  flex-grow: 0 !important;
+  padding: 0;
+}

src/app/hindi-version/hindi-version.component.html

@@ -1,5 +1,6 @@
 <header>
     <nav class="level-nav">
+      <div class="ham"><div class="dash"></div></div>
     </nav>
  </header>
  <section class="mt-3">

src/app/hindi-version/hindi-version.component.ts

@@ -1,17 +1,16 @@
-import { Component, OnInit } from '@angular/core';
-import $ from 'jquery'
+import { Component, OnInit } from "@angular/core";
+import $ from "jquery";
 
 @Component({
-  selector: 'app-hindi-version',
-  templateUrl: './hindi-version.component.html',
+  selector: "app-hindi-version",
+  templateUrl: "./hindi-version.component.html",
   // styleUrls: ['./hindi-version.component.css']
-  styleUrls: ['../app.component.css']
+  styleUrls: ["../app.component.css"],
 })
 export class HindiVersionComponent implements OnInit {
+  constructor() {}
 
-  constructor() { }
-
-  title = 'speak-with-me';
+  title = "speak-with-me";
   exploreandlearn = true;
   learnandplay = false;
   playgame = false;
@@ -23,11 +22,18 @@ export class HindiVersionComponent implements OnInit {
     //     $('.active').next('.nav-link').trigger('click');
     //     });
     // });
+
+    $(document).ready(function () {
+      $(".ham").click(function () {
+        $(".ham").toggleClass("open");
+        $(".sidebar").toggleClass("hide");
+      });
+    });
   }
   public getFingerPrintJsId = () => {
     const fpDetails_v2 = localStorage.getItem("did");
     return fpDetails_v2;
-  }
+  };
 
   showExploreandLearn() {
     this.exploreandlearn = true;
@@ -56,5 +62,4 @@ export class HindiVersionComponent implements OnInit {
     this.playgame = false;
     this.videohelp = true;
   }
-
 }

src/app/kannada-version/kannada-version.component.html

@@ -1,5 +1,6 @@
 <header>
     <nav class="level-nav">
+      <div class="ham"><div class="dash"></div></div>
     </nav>
  </header>
  <section class="mt-3">

src/app/kannada-version/kannada-version.component.ts

@@ -23,6 +23,13 @@ export class KannadaVersionComponent implements OnInit {
     //     $('.active').next('.nav-link').trigger('click');
     //     });
     // });
+
+    $(document).ready(function() {
+      $('.ham').click(function(){
+        $('.ham').toggleClass('open');
+        $('.sidebar').toggleClass('hide')
+        });
+    });
   }
   public getFingerPrintJsId = () => {
     const fpDetails_v2 = localStorage.getItem("did");

src/app/tamil-version/tamil-version.component.html

@@ -1,5 +1,6 @@
 <header>
     <nav class="level-nav">
+      <div class="ham"><div class="dash"></div></div>
     </nav>
  </header>
  <section class="mt-3">
@@ -36,7 +37,7 @@
                             </div>
                          </div>
                       </div>
-                      <div class="col-md-3">
+                      <div class="col-md-3 sidebar hide">
                          <h2 class="accordion-header">
                             <button class="accordion-button cl fw-700 ml-2" type="button" data-bs-toggle="collapse"
                                data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true"

src/app/tamil-version/tamil-version.component.ts

@@ -23,6 +23,14 @@ export class TamilVersionComponent implements OnInit {
     //     $('.active').next('.nav-link').trigger('click');
     //     });
     // });
+
+    $(document).ready(function() {
+      $('.ham').click(function(){
+        $('.ham').toggleClass('open');
+        $('.sidebar').toggleClass('hide')
+        });
+    });
+
   }
   public getFingerPrintJsId = () => {
     const fpDetails_v2 = localStorage.getItem("did");