added sidebar mobile

src/app/app.component.html

@@ -7,3 +7,4 @@
     </div>
   </main>
 </div>
+<app-sidebar-mobile></app-sidebar-mobile>

src/app/app.component.scss

@@ -7,7 +7,15 @@ app-sidebar {
   width: 232px;
   height: 100%;
   background-color: var(--bgSidebar);
-  overflow-y: none;
+}
+
+app-sidebar-mobile {
+  display: none;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  height: 80px;
+  background-color: var(--bgSidebar);
 }
 
 main {
@@ -35,10 +43,14 @@ app-header {
   .content {
     display: flex;
     justify-content: center;
-    min-width: calc(100vw);
+    width: 100vw;
+    height: calc(100vh - 210px);
     padding: 32px 0 0 0;
   }
   app-sidebar {
     display: none;
   }
+  app-sidebar-mobile {
+    display: unset;
+  }
 }

src/app/app.component.ts

@@ -3,11 +3,17 @@ import { Router, RouterOutlet } from '@angular/router';
 import { HeaderComponent } from './shared/components/header/header.component';
 import { SidebarComponent } from './shared/components/sidebar/sidebar.component';
 import { LanguageService } from './services/language.service';
+import { SidebarMobileComponent } from './shared/components/sidebar/sidebar-mobile/sidebar-mobile.component';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, HeaderComponent, SidebarComponent],
+  imports: [
+    RouterOutlet,
+    HeaderComponent,
+    SidebarComponent,
+    SidebarMobileComponent,
+  ],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
 })

src/app/components/summary/summary.component.scss

@@ -67,7 +67,7 @@
   background-color: var(--white);
   cursor: pointer;
   &:hover {
-    transform: scale(1.05);
+    transform: scale(1.02);
     transition: 500ms ease-out;
     background-color: var(--dark-blue);
     .circle {

src/app/shared/components/sidebar/sidebar-mobile/sidebar-mobile.component.html

@@ -0,0 +1 @@
+<p>sidebar-mobile works!</p>

src/app/shared/components/sidebar/sidebar-mobile/sidebar-mobile.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SidebarMobileComponent } from './sidebar-mobile.component';
+
+describe('SidebarMobileComponent', () => {
+  let component: SidebarMobileComponent;
+  let fixture: ComponentFixture<SidebarMobileComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SidebarMobileComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(SidebarMobileComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/components/sidebar/sidebar-mobile/sidebar-mobile.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-sidebar-mobile',
+  standalone: true,
+  imports: [],
+  templateUrl: './sidebar-mobile.component.html',
+  styleUrl: './sidebar-mobile.component.scss'
+})
+export class SidebarMobileComponent {
+
+}