From 661be6ec14f2ae03064d078b55be06d6ada496ee Mon Sep 17 00:00:00 2001
From: Abhay Pratap Singh <abhaypratapninth@gmail.com>
Date: Wed, 17 Apr 2024 01:54:46 +0530
Subject: [PATCH] Implementation of Collapsible Sidebar Menu

---
 src/app/app.component.css                     | 84 ++++++++++++++++++-
 .../hindi-version.component.html              |  1 +
 .../hindi-version/hindi-version.component.ts  | 25 +++---
 .../kannada-version.component.html            |  1 +
 .../kannada-version.component.ts              |  7 ++
 .../tamil-version.component.html              |  3 +-
 .../tamil-version/tamil-version.component.ts  |  8 ++
 7 files changed, 117 insertions(+), 12 deletions(-)

diff --git a/src/app/app.component.css b/src/app/app.component.css
index 997980c..270b4e9 100644
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@@ -129,4 +129,86 @@ h5, .h5 {
     margin: 2%;
     bottom: 2%;
     color: #fff;
-} */
\ No newline at end of file
+} */
+
+/* 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;
+}
diff --git a/src/app/hindi-version/hindi-version.component.html b/src/app/hindi-version/hindi-version.component.html
index 8e58fa5..d823258 100644
--- a/src/app/hindi-version/hindi-version.component.html
+++ b/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">
diff --git a/src/app/hindi-version/hindi-version.component.ts b/src/app/hindi-version/hindi-version.component.ts
index e05e89f..9b449b6 100644
--- a/src/app/hindi-version/hindi-version.component.ts
+++ b/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;
   }
-
 }
diff --git a/src/app/kannada-version/kannada-version.component.html b/src/app/kannada-version/kannada-version.component.html
index a71a34e..e856649 100644
--- a/src/app/kannada-version/kannada-version.component.html
+++ b/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">
diff --git a/src/app/kannada-version/kannada-version.component.ts b/src/app/kannada-version/kannada-version.component.ts
index 21f7c22..ec299ce 100644
--- a/src/app/kannada-version/kannada-version.component.ts
+++ b/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");
diff --git a/src/app/tamil-version/tamil-version.component.html b/src/app/tamil-version/tamil-version.component.html
index b3bf021..63ca845 100644
--- a/src/app/tamil-version/tamil-version.component.html
+++ b/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"
diff --git a/src/app/tamil-version/tamil-version.component.ts b/src/app/tamil-version/tamil-version.component.ts
index 6e11cb8..b15cc6c 100644
--- a/src/app/tamil-version/tamil-version.component.ts
+++ b/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");