Skip to content

Commit

Permalink
refact: modifie le sidemenu pour qu'il puisse inclure des collapsibles
Browse files Browse the repository at this point in the history
  • Loading branch information
matthieuaudemard committed May 7, 2023
1 parent 6475a28 commit 09a9016
Show file tree
Hide file tree
Showing 6 changed files with 67 additions and 47 deletions.
12 changes: 12 additions & 0 deletions .run/Frontend Implicaction.run.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<component name="ProjectRunConfigurationManager">
<configuration default="false" name="Frontend Implicaction" type="js.build_tools.npm">
<package-json value="$PROJECT_DIR$/frontend-implicaction/package.json" />
<command value="run" />
<scripts>
<script value="start" />
</scripts>
<node-interpreter value="project" />
<envs />
<method v="2" />
</configuration>
</component>
16 changes: 16 additions & 0 deletions .run/RefonteImplicactionApplication.run.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<component name="ProjectRunConfigurationManager">
<configuration default="false" name="RefonteImplicactionApplication" type="SpringBootApplicationConfigurationType" factoryName="Spring Boot" nameIsGenerated="true">
<option name="ACTIVE_PROFILES" value="local" />
<module name="backend-implicaction" />
<option name="SPRING_BOOT_MAIN_CLASS" value="com.dynonuggets.refonteimplicaction.RefonteImplicactionApplication" />
<extension name="coverage">
<pattern>
<option name="PATTERN" value="com.dynonuggets.refonteimplicaction.*" />
<option name="ENABLED" value="true" />
</pattern>
</extension>
<method v="2">
<option name="Make" enabled="true" />
</method>
</configuration>
</component>
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {Component} from '@angular/core';
import {Univers} from "../../../shared/enums/univers";
import {MenuItem} from "primeng/api";
import {Univers} from '../../../shared/enums/univers';
import {MenuItem} from 'primeng/api';

@Component({
templateUrl: './admin-page.component.html',
Expand All @@ -21,31 +21,31 @@ export class AdminPageComponent {
routerLinkActiveOptions: {exact: true}
},
{
label: 'Offres',
routerLink: `/${Univers.ADMIN.url}/jobs`,
label: 'Emploi',
icon: 'fas fa-briefcase',
routerLinkActiveOptions: {queryParams: 'subset'}
},
{
label: 'Entreprises',
routerLink: `/${Univers.ADMIN.url}/companies`,
icon: 'fas fa-building',
routerLinkActiveOptions: {exact: true}
routerLinkActiveOptions: {queryParams: 'subset', exact: false},
items: [
{
label: 'Offres',
routerLink: `/${Univers.ADMIN.url}/jobs`,
routerLinkActiveOptions: {queryParams: 'subset'}
},
{
label: 'Entreprises',
routerLink: `/${Univers.ADMIN.url}/companies`,
routerLinkActiveOptions: {exact: true}
}
]
},
{
label: 'Forum',
routerLink: `/${Univers.ADMIN.url}/forum`,
icon: 'fas fa-comments',
routerLinkActiveOptions: {queryParams: 'subset', exact: false},
items: [
{
label: 'Catégories',
routerLink: `/${Univers.ADMIN.url}/forum`,
routerLinkActiveOptions: {exact: true},
},
{
label: 'Messages',
routerLink: `/${Univers.ADMIN.url}/forum`,
queryParams: {target: 'categories'},
routerLinkActiveOptions: {exact: true},
}
]
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,30 +21,25 @@
<ng-template #templateCollapsable>
<a
class="nav-link cursor-pointer"
data-bs-target="#collapsed-nav"
data-bs-toggle="collapse"
aria-expanded="false"
(click)="menuItem.expanded = !menuItem.expanded"
(click)="toggleCollapse(menuItem)"
[ngClass]="{'collapsed': !menuItem.expanded, 'expanded active': menuItem.expanded}"
>
<span>
<i *ngIf="menuItem.icon" [class]="menuItem.icon"></i> {{menuItem.label}}
</span>
</a>

<ul
id="collapsed-nav"
class="nav-content"
data-bs-parent="#sidebar-nav"
[ngClass]="{'collapse': !menuItem.expanded}"
>
<ul class="ps-5" [ngClass]="{'collapse': !menuItem.expanded}">
<ng-container *ngFor="let item of menuItem.items">
<li routerLinkActive="active">
<li [ngClass]="{'active': item.expanded}">
<a
role="button"
class="nav-link"
[routerLink]="item.routerLink"
[queryParams]="item.queryParams"
[routerLinkActive]="''"
[routerLinkActiveOptions]="menuItem.routerLinkActiveOptions"
(isActiveChange)="toggleCollapseParent(item, menuItem, $event)"
>
<span>
<i *ngIf="item.icon" [class]="item.icon"></i> {{item.label}}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,12 @@
font-size: 0.9rem;
}
}
}

li.active {
list-style-type: disc;
li {
&.active, &:hover, a:hover {
font-weight: 600;
list-style-type: disc !important;
background-color: transparent !important;
}
}
}
Original file line number Diff line number Diff line change
@@ -1,29 +1,22 @@
import {Component, Input, OnInit} from '@angular/core';
import {MenuItem} from "primeng/api";
import {NavigationEnd, Router} from "@angular/router";
import {Component, Input} from '@angular/core';
import {MenuItem} from 'primeng/api';

@Component({
selector: 'app-sidemenu',
templateUrl: './sidemenu.component.html',
styleUrls: ['./sidemenu.component.scss']
})
export class SidemenuComponent implements OnInit {
export class SidemenuComponent {

@Input() menuItems: MenuItem[];

constructor(private router: Router) {
toggleCollapseParent(child: MenuItem, parent: MenuItem, expanded: boolean) {
child.expanded = expanded;
parent.expanded = parent.items.some(item => item.expanded);
}

ngOnInit(): void {
this.router.events.subscribe(routerEvent => {
if (routerEvent instanceof NavigationEnd) {
// Get your url
console.log(routerEvent.url);
console.log(this.menuItems.find(item => !!item.items && item.items.find(i => i.url && this.router.isActive(i.url, false))));
}
});


toggleCollapse(menuItem: MenuItem) {
this.menuItems.filter(i => i !== menuItem).forEach(i => i.expanded = false);
menuItem.expanded = !menuItem.expanded;
}

}

0 comments on commit 09a9016

Please sign in to comment.