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 {
+
+}