From 7f5d52dce51f58dda61c0b41d5770f0c380f06f4 Mon Sep 17 00:00:00 2001 From: Florian THIERRY Date: Mon, 22 Apr 2024 15:57:22 +0200 Subject: [PATCH] Add side menu for header. --- .../components/header/header.component.html | 5 +- .../components/header/header.component.scss | 4 + .../app/components/header/header.component.ts | 3 +- .../categories-menu.component.html | 11 +++ .../categories-menu.component.scss | 57 +++++++++++ .../categories-menu.component.ts | 52 ++++++++++ .../side-menu/side-menu.component.html | 27 +++-- .../side-menu/side-menu.component.scss | 99 ++++++++++++------- .../side-menu/side-menu.component.ts | 48 ++------- .../src/app/pages/home/home.component.html | 1 - frontend/src/app/pages/home/home.component.ts | 3 +- 11 files changed, 218 insertions(+), 92 deletions(-) create mode 100644 frontend/src/app/components/side-menu/categories-menu/categories-menu.component.html create mode 100644 frontend/src/app/components/side-menu/categories-menu/categories-menu.component.scss create mode 100644 frontend/src/app/components/side-menu/categories-menu/categories-menu.component.ts diff --git a/frontend/src/app/components/header/header.component.html b/frontend/src/app/components/header/header.component.html index 7de179d..ff60834 100644 --- a/frontend/src/app/components/header/header.component.html +++ b/frontend/src/app/components/header/header.component.html @@ -1,5 +1,5 @@
- @@ -20,4 +20,5 @@ Login -
\ No newline at end of file + + \ No newline at end of file diff --git a/frontend/src/app/components/header/header.component.scss b/frontend/src/app/components/header/header.component.scss index 84db464..ab80355 100644 --- a/frontend/src/app/components/header/header.component.scss +++ b/frontend/src/app/components/header/header.component.scss @@ -90,4 +90,8 @@ $headerHeight: 3.5em; } } } +} + +app-side-menu { + height: 100%; } \ No newline at end of file diff --git a/frontend/src/app/components/header/header.component.ts b/frontend/src/app/components/header/header.component.ts index 3522c24..b4bef20 100644 --- a/frontend/src/app/components/header/header.component.ts +++ b/frontend/src/app/components/header/header.component.ts @@ -4,11 +4,12 @@ import { MatButtonModule } from '@angular/material/button'; import { RouterModule } from '@angular/router'; import { AuthenticationService } from '../../core/service/authentication.service'; import { CommonModule } from '@angular/common'; +import { SideMenuComponent } from '../side-menu/side-menu.component'; @Component({ selector: 'app-header', standalone: true, - imports: [CommonModule, MatButtonModule, MatIconModule, RouterModule], + imports: [CommonModule, MatButtonModule, MatIconModule, RouterModule, SideMenuComponent], templateUrl: './header.component.html', styleUrl: './header.component.scss', }) diff --git a/frontend/src/app/components/side-menu/categories-menu/categories-menu.component.html b/frontend/src/app/components/side-menu/categories-menu/categories-menu.component.html new file mode 100644 index 0000000..d32e9b0 --- /dev/null +++ b/frontend/src/app/components/side-menu/categories-menu/categories-menu.component.html @@ -0,0 +1,11 @@ +
+
+ {{category.name}} + chevron_right +
+
+ + {{subCategory.name}} + +
+
\ No newline at end of file diff --git a/frontend/src/app/components/side-menu/categories-menu/categories-menu.component.scss b/frontend/src/app/components/side-menu/categories-menu/categories-menu.component.scss new file mode 100644 index 0000000..bcd6a8f --- /dev/null +++ b/frontend/src/app/components/side-menu/categories-menu/categories-menu.component.scss @@ -0,0 +1,57 @@ +:host { + display: flex; + flex-direction: column; + + .category { + transition: background-color .2s ease-in-out; + + &:hover { + cursor: pointer; + background-color: #5c6bc0; + } + + .category-header { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + padding: .5em 1em; + + mat-icon { + transition: transform .2s ease-in-out; + } + } + + &.openned { + .category-header { + mat-icon { + transform: rotate(90deg); + } + } + + .sub-category-container { + max-height: none; + } + } + + .sub-category-container { + display: flex; + flex-direction: column; + overflow: hidden; + max-height: 0; + transition: max-height .2s ease-in-out; + background-color: #303f9f; + + .sub-category { + padding: .5em 1em .5em 2em; + text-decoration: none; + color: inherit; + transition: background-color .2s ease-in-out; + + &:hover { + background-color: #5c6bc0; + } + } + } + } +} diff --git a/frontend/src/app/components/side-menu/categories-menu/categories-menu.component.ts b/frontend/src/app/components/side-menu/categories-menu/categories-menu.component.ts new file mode 100644 index 0000000..618543d --- /dev/null +++ b/frontend/src/app/components/side-menu/categories-menu/categories-menu.component.ts @@ -0,0 +1,52 @@ +import { CommonModule } from "@angular/common"; +import { Component, inject } from "@angular/core"; +import { MatIconModule } from "@angular/material/icon"; +import { DisplayableCategory, SideMenuService } from "../side-menu.service"; +import { Observable } from "rxjs"; +import { RouterModule } from "@angular/router"; + +@Component({ + selector: 'app-categories-menu', + standalone: true, + imports: [CommonModule, RouterModule, MatIconModule], + templateUrl: './categories-menu.component.html', + styleUrl: './categories-menu.component.scss' +}) +export class CategoriesMenuComponent { + private sideMenuService = inject(SideMenuService); + + get categories$(): Observable { + return this.sideMenuService.categories$; + } + + setOpenned(category: DisplayableCategory): void { + if (category.isOpenned) { + const categoryDiv = document.getElementById(`category-${category.id}`); + if (categoryDiv) { + this.closeAccordion(categoryDiv); + } + } else { + const categoriesDivs = document.getElementsByClassName('category-header'); + Array.from(categoriesDivs) + .map(category => category as HTMLElement) + .forEach(categoryDiv => this.closeAccordion(categoryDiv)); + + const categoryDiv = document.getElementById(`category-${category.id}`); + if (categoryDiv) { + this.openAccordion(categoryDiv); + } + } + + this.sideMenuService.setOpenned(category); + } + + private closeAccordion(categoryDiv: HTMLElement): void { + const divContent = categoryDiv?.nextElementSibling as HTMLElement; + divContent.style.maxHeight = '0'; + } + + private openAccordion(categoryDiv: HTMLElement): void { + const divContent = categoryDiv?.nextElementSibling as HTMLElement; + divContent.style.maxHeight = `${divContent.scrollHeight}px`; + } +} \ No newline at end of file diff --git a/frontend/src/app/components/side-menu/side-menu.component.html b/frontend/src/app/components/side-menu/side-menu.component.html index 464a407..a7e7a5e 100644 --- a/frontend/src/app/components/side-menu/side-menu.component.html +++ b/frontend/src/app/components/side-menu/side-menu.component.html @@ -1,15 +1,14 @@ -

Codiki

-

Catégories

-
-
-
- {{category.name}} - chevron_right -
-
-
- {{subCategory.name}} -
-
-
+
+

+ + logo + Codiki + + +

+

Catégories

+
+
diff --git a/frontend/src/app/components/side-menu/side-menu.component.scss b/frontend/src/app/components/side-menu/side-menu.component.scss index e713008..9641141 100644 --- a/frontend/src/app/components/side-menu/side-menu.component.scss +++ b/frontend/src/app/components/side-menu/side-menu.component.scss @@ -1,52 +1,83 @@ :host { - display: flex; - flex-direction: column; - - .categories-container { + .menu { display: flex; flex-direction: column; + background-color: #3f51b5; + color: white; - .category { - border: 1px solid blue; + $categoriesMenuWidth: 20em; + position: fixed; + top: 0; + left: -$categoriesMenuWidth - 1em - 1; + bottom: 0; + transition: left .2s ease-in-out; + width: $categoriesMenuWidth; + z-index: 2; + padding: 1em 0; - &:hover { - cursor: pointer; - } + &.displayed { + left: 0; + } - .category-header { + h1 { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + padding: 0 1em; + + span { display: flex; flex-direction: row; - justify-content: space-between; + justify-content: start; align-items: center; - padding: .5em 1em; + gap: .5em; - mat-icon { - transition: transform .2s ease-in-out; + img { + $imageSize: 1.2em; + width: $imageSize; + height: $imageSize; } } - &.openned { - .category-header { - mat-icon { - transform: rotate(90deg); - } - } + button { + border-radius: 10em; + border: none; + display: flex; + justify-content: center; + align-items: center; + width: 2.5em; + height: 2.5em; + color: white; + background-color: #3f51b5; + transition: background-color .2s ease-in-out; - .sub-category-container { - max-height: none; - } - } - - .sub-category-container { - border: 1px solid red; - overflow: hidden; - max-height: 0; - transition: max-height .2s ease-in-out; - - .sub-category { - padding: .5em 1em .5em 2em; + &:hover { + cursor: pointer; + background-color: #5c6bc0; } } } + + h2 { + padding: 0 1em; + } } -} \ No newline at end of file + + .overlay { + display: none; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + background-color: #000; + opacity: .2; + + &.displayed { + display: block; + } + } +} diff --git a/frontend/src/app/components/side-menu/side-menu.component.ts b/frontend/src/app/components/side-menu/side-menu.component.ts index fb283c1..7e710c9 100644 --- a/frontend/src/app/components/side-menu/side-menu.component.ts +++ b/frontend/src/app/components/side-menu/side-menu.component.ts @@ -1,51 +1,23 @@ -import { CommonModule } from '@angular/common'; -import { Component, inject } from '@angular/core'; -import { MatIconModule } from '@angular/material/icon'; -import { DisplayableCategory, SideMenuService } from './side-menu.service'; -import { Observable } from 'rxjs'; +import {Component} from '@angular/core'; +import {MatIconModule} from '@angular/material/icon'; +import {CategoriesMenuComponent} from './categories-menu/categories-menu.component'; +import {MatTooltipModule} from '@angular/material/tooltip'; @Component({ selector: 'app-side-menu', standalone: true, - imports: [CommonModule, MatIconModule], + imports: [CategoriesMenuComponent, MatIconModule, MatTooltipModule], templateUrl: './side-menu.component.html', styleUrl: './side-menu.component.scss' }) export class SideMenuComponent { - private sideMenuService = inject(SideMenuService); + isOpenned: boolean = false; - get categories$(): Observable { - return this.sideMenuService.categories$; + open(): void { + this.isOpenned = true; } - setOpenned(category: DisplayableCategory): void { - if (category.isOpenned) { - const categoryDiv = document.getElementById(`category-${category.id}`); - if (categoryDiv) { - this.closeAccordion(categoryDiv); - } - } else { - const categoriesDivs = document.getElementsByClassName('category-header'); - Array.from(categoriesDivs) - .map(category => category as HTMLElement) - .forEach(categoryDiv => this.closeAccordion(categoryDiv)); - - const categoryDiv = document.getElementById(`category-${category.id}`); - if (categoryDiv) { - this.openAccordion(categoryDiv); - } - } - - this.sideMenuService.setOpenned(category); - } - - private closeAccordion(categoryDiv: HTMLElement): void { - const divContent = categoryDiv?.nextElementSibling as HTMLElement; - divContent.style.maxHeight = '0'; - } - - private openAccordion(categoryDiv: HTMLElement): void { - const divContent = categoryDiv?.nextElementSibling as HTMLElement; - divContent.style.maxHeight = `${divContent.scrollHeight}px`; + close(): void { + this.isOpenned = false; } } diff --git a/frontend/src/app/pages/home/home.component.html b/frontend/src/app/pages/home/home.component.html index cdaa426..26e0443 100644 --- a/frontend/src/app/pages/home/home.component.html +++ b/frontend/src/app/pages/home/home.component.html @@ -1,2 +1 @@

Welcome to Codiki application!

- \ No newline at end of file diff --git a/frontend/src/app/pages/home/home.component.ts b/frontend/src/app/pages/home/home.component.ts index 46417d8..deb69c4 100644 --- a/frontend/src/app/pages/home/home.component.ts +++ b/frontend/src/app/pages/home/home.component.ts @@ -1,10 +1,9 @@ import { Component } from '@angular/core'; -import { SideMenuComponent } from '../../components/side-menu/side-menu.component'; @Component({ selector: 'app-home', standalone: true, - imports: [SideMenuComponent], + imports: [], templateUrl: './home.component.html', styleUrl: './home.component.scss' })