diff --git a/src/app/app.component.html b/src/app/app.component.html index 1194c7c..8d4b974 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -7,3 +7,4 @@ + diff --git a/src/app/app.component.scss b/src/app/app.component.scss index c4bb32a..d05a0ea 100644 --- a/src/app/app.component.scss +++ b/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; + } } diff --git a/src/app/app.component.ts b/src/app/app.component.ts index a0e5f85..dff28e2 100644 --- a/src/app/app.component.ts +++ b/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', }) diff --git a/src/app/components/summary/summary.component.scss b/src/app/components/summary/summary.component.scss index 887b405..05db6e1 100644 --- a/src/app/components/summary/summary.component.scss +++ b/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 { diff --git a/src/app/shared/components/sidebar/sidebar-mobile/sidebar-mobile.component.html b/src/app/shared/components/sidebar/sidebar-mobile/sidebar-mobile.component.html new file mode 100644 index 0000000..c90b687 --- /dev/null +++ b/src/app/shared/components/sidebar/sidebar-mobile/sidebar-mobile.component.html @@ -0,0 +1 @@ +

sidebar-mobile works!

diff --git a/src/app/shared/components/sidebar/sidebar-mobile/sidebar-mobile.component.scss b/src/app/shared/components/sidebar/sidebar-mobile/sidebar-mobile.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/shared/components/sidebar/sidebar-mobile/sidebar-mobile.component.spec.ts b/src/app/shared/components/sidebar/sidebar-mobile/sidebar-mobile.component.spec.ts new file mode 100644 index 0000000..96ada3a --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [SidebarMobileComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(SidebarMobileComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/components/sidebar/sidebar-mobile/sidebar-mobile.component.ts b/src/app/shared/components/sidebar/sidebar-mobile/sidebar-mobile.component.ts new file mode 100644 index 0000000..83553b2 --- /dev/null +++ b/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 { + +}