Make side panel responsive

projects/common/src/lib/components/side-panel/side-panel.component.scss

@@ -1,10 +1,11 @@
 .side-panel {
   position: absolute;
-  top: 0px;
+  top: 50%;
   bottom: 0px;
-  width: 22rem;
+  width: 100%;
   left: 0px;
-  transition: left 0.3s;
+  height:100%;
+  transition: left 0.3s, top 0.3s;
   background-color: white;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
 }
@@ -31,7 +32,7 @@
 }
 
 .side-panel.hidden {
-  left: -24rem;
+  top:100%;
 }
 
 .content {
@@ -40,3 +41,18 @@
   overflow:hidden;
   overflow-y:auto;
 }
+
+@media screen and (min-width:44rem) {
+  .side-panel {
+    top:0px;
+    width: 22rem;
+    left:0px;
+  }
+
+  .side-panel.hidden {
+    top:0px;
+    width: 22rem;
+    left:-24rem;
+  }
+
+}

src/app/app-routing.module.ts

@@ -3,9 +3,11 @@ import { RouterModule } from '@angular/router';
 
 import { AuthGuard } from '@farmmaps/common';
 import { AppContentComponent} from './app-content.component';
+import { AppSidePanelTestComponent } from './app-side-panel-test.component';
 
 const routes = [
-  { path: '', canLoad: [AuthGuard], component: AppContentComponent}
+  { path: '', canLoad: [AuthGuard], component: AppContentComponent},
+  { path: 'sidepanel', canLoad: [AuthGuard], component: AppSidePanelTestComponent}
 ];
 
 @NgModule({

src/app/app-side-panel-test.component.ts

@@ -0,0 +1,29 @@
+import { Component ,ChangeDetectorRef } from '@angular/core';
+
+
+
+@Component({
+  selector: 'app-side-panel-test',
+  template: '<div><a (click)="handleOpen($event)" href="#">open</a> <side-panel [visible]="show"><a (click)="handleClose($event)" href="#">close</a></side-panel></div>'  
+})
+export class AppSidePanelTestComponent {
+
+  public show:boolean = false;
+
+  constructor(public cr:ChangeDetectorRef ) {
+
+  }
+
+  handleClose(event:MouseEvent) {
+    event.preventDefault();
+    this.show=false;
+    //this.cr.detectChanges();
+  }
+
+  handleOpen(event:MouseEvent)
+  {
+    event.preventDefault();
+    this.show=true;
+    //this.cr.detectChanges();
+  }
+}

src/app/app.component.html

@@ -1,9 +1,3 @@
-<div style="text-align:center">
-  <h1>
-    Welcome to {{ title }}!
-  </h1>
-</div>
-<h2>Common Test</h2>
-<router-outlet></router-outlet>
+<div style="position:absolute;display: block;width:100%;height:100%;overflow: hidden;"><router-outlet></router-outlet></div>
 
 

src/app/app.module.ts

@@ -8,6 +8,7 @@ import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent } from './app.component';
 import { AppContentComponent } from './app-content.component';
+import { AppSidePanelTestComponent } from './app-side-panel-test.component';
 import { AppCommonModule } from '@farmmaps/common';
 
 import {StoreModule, Store} from '@ngrx/store';
@@ -44,7 +45,8 @@ export function provideBootstrapEffects(effects: Type<any>[]) {
 @NgModule({
   declarations: [
     AppComponent,
-    AppContentComponent
+    AppContentComponent,
+    AppSidePanelTestComponent
   ],
   imports: [
     AppRoutingModule,