Skip to content

Commit

Permalink
remove extendable sidebar (delay to 2.0)
Browse files Browse the repository at this point in the history
  • Loading branch information
axherrm committed Jan 22, 2024
1 parent 9614081 commit 09978f3
Show file tree
Hide file tree
Showing 6 changed files with 30 additions and 22 deletions.
3 changes: 2 additions & 1 deletion src/app/app.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,8 @@ <h2 id="main-subheading" [innerHTML]="dataService.languagePack.subheading"></h2>
</div>

<div id="perspective-div" style="perspective: 10000px">
<div class="content-container" [class.rotated]="sidebar.hovered">
<!-- [class.rotated]="sidebar.hovered" -->
<div class="content-container">
<heading-card #education_card id="education-start" [heading]="dataService.languagePack.education" type="light" styleClass="alarm-clock-animated"></heading-card>
<p-timeline id="eduction-tl" [value]="dataService.education" align="alternate" [style]="{'width': '70%', 'display': 'inline-block'}">
<ng-template pTemplate="marker">
Expand Down
5 changes: 4 additions & 1 deletion src/app/app.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,10 @@
transition: all .6s ease-in-out;
&.rotated {
transition: all .4s ease-in-out;
transform: rotateY(calc(1 * var(--rotate-angle)));
//transform: rotateY(calc(1 * var(--rotate-angle)));
//transform: rotateX(70deg);
//transform: translateY(-5000px);
//transform: scale(0.6);
}
}

Expand Down
24 changes: 12 additions & 12 deletions src/app/components/navbar-dot/navbar-dot.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,30 +16,30 @@ export class NavbarDotComponent {

@Input({required: true}) section: Section;

@HostBinding('class.extended')
@Input()
extended = false;
// @HostBinding('class.extended')
// @Input()
// extended = false;

@HostBinding('class.active')
@Input()
active = false;

@Output() hover: EventEmitter<void> = new EventEmitter<void>();
// @Output() hover: EventEmitter<void> = new EventEmitter<void>();

delayTimeout: any;

@HostListener("mouseenter")
onMouseover() {
this.delayTimeout = setTimeout(() => this.hover.emit(), 300);
}
// @HostListener("mouseenter")
// onMouseover() {
// this.delayTimeout = setTimeout(() => this.hover.emit(), 300);
// }

/**
* In case the hovering stops before delay timeout is over, the hovering is not forwarded.
*/
@HostListener("mouseleave")
onMouseleave() {
clearTimeout(this.delayTimeout);
}
// @HostListener("mouseleave")
// onMouseleave() {
// clearTimeout(this.delayTimeout);
// }

@HostListener("click")
onClick() {
Expand Down
4 changes: 2 additions & 2 deletions src/app/sections/sidebar/sidebar.component.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<div class="sidebar-container" style="height: 100vh">
<div id="navbar">
<navbar-dot #navbar_dot *ngFor="let section of sections; index as i;" [section]="section"
(hover)="hovered = true" [extended]="hovered" [active]="i===sectionActive">
<!-- (hover)="hovered = true" [extended]="hovered" -->
<navbar-dot #navbar_dot *ngFor="let section of sections; index as i;" [section]="section" [active]="i===sectionActive">
</navbar-dot>
</div>
</div>
Expand Down
6 changes: 5 additions & 1 deletion src/app/sections/sidebar/sidebar.component.scss
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
:host {
position: absolute;
z-index: 1000;
}

.sidebar-container {
position: fixed;
width: auto;
min-width: 5vw;
max-width: 30vw;
top: 0;
right: 0;
z-index: 1000;

display: flex;
flex-direction: column;
Expand Down
10 changes: 5 additions & 5 deletions src/app/sections/sidebar/sidebar.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export class SidebarComponent {
@Input({required: true}) sections: Section[];
@Input({required: true}) languagesMenuItems: MenuItem[];

@Output() hovered: boolean = false;
// @Output() hovered: boolean = false;

@ViewChildren("navbar_dot", {read: NavbarDotComponent}) dots: QueryList<NavbarDotComponent>;

Expand All @@ -46,10 +46,10 @@ export class SidebarComponent {
this.addSelectedAnimation();
}

@HostListener("mouseleave")
onMouseleave() {
this.hovered = false;
}
// @HostListener("mouseleave")
// onMouseleave() {
// this.hovered = false;
// }

addSelectedAnimation() {
for (let i = 0; i < this.sections.length; i++) {
Expand Down

0 comments on commit 09978f3

Please sign in to comment.