old-portfolio/frontend-hideyoshi.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixes Header Bar Behavior

Browse Source
This commit is contained in:
Vitor Hideyoshi
2023-10-26 21:59:06 -03:00
parent 5c9c5db016
commit 34ae8b1818
5 changed files with 91 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/header/header-slider/header-slider.component.css
View File

@@ -2,7 +2,7 @@
background-color: #2e2e2e; background-color: #2e2e2e;
width: 50%; width: 50%;
height: 90vh; height: 90vh;
position: absolute; position: fixed;
top: 10vh; top: 10vh;
right: 0; right: 0;
overflow: hidden !important; overflow: hidden !important;

10
src/app/header/header.component.css
View File

@@ -1,8 +1,3 @@
.wrapper {
width: 100vw;
overflow: hidden;
}
.header { .header {
top: 0; top: 0;
left: 0; left: 0;
@@ -11,6 +6,7 @@
width: 100vw; width: 100vw;
background-color: #2e2e2e; background-color: #2e2e2e;
z-index: 50;
height: 10vh; height: 10vh;
min-height: 80px; min-height: 80px;
@@ -114,6 +110,10 @@ app-header-slider {
max-width: 1333px; max-width: 1333px;
} }
.slider-container {
display: none;
}
.nav-links { .nav-links {
all: unset; all: unset;
width: 50%; width: 50%;

156
src/app/header/header.component.html
View File

@@ -1,92 +1,90 @@
<div class="wrapper"> <div class="header">
<div class="header"> <div class="main" #header>
<div class="main" #header> <div class="logo">
<div class="logo"> <a routerLink="">
<a routerLink=""> <img src="assets/img/logohideyoshi-white.png" alt="" />
<img src="assets/img/logohideyoshi-white.png" alt="" /> </a>
</a> </div>
</div> <div class="nav-links">
<div class="nav-links"> <ul class="link-container">
<ul class="link-container"> <li *ngFor="let page of pages">
<li *ngFor="let page of pages"> <a [routerLink]="page.route">{{ page.name }}</a>
<a [routerLink]="page.route">{{ page.name }}</a> </li>
</li> </ul>
</ul>
</div>
<div class="profile" #profileDropdown>
<div
class="profile-btn"
(click)="toogleProfileDropdown()"
#profileBtn
>
<fa-icon
*ngIf="!loggedUser || !loggedUser.profilePictureUrl"
class="fas fa-user"
[icon]="userIcon"
></fa-icon>
<img
*ngIf="!!loggedUser && !!loggedUser.profilePictureUrl"
class="profile-picture"
[ngSrc]="loggedUser.profilePictureUrl"
width="50"
height="50"
alt="Profile Picture"
priority
/>
</div>
<app-header-dropdown
class="dropdown"
(clickOutside)="closeDropdown()"
[ignoreClickOutside]="[profileBtn]"
[state]="profileDropdownState"
(loginPopupState)="loginPopupStateChange($event)"
(signupPopupState)="signupPopupStateChange($event)"
(myProfilePopupState)="myProfilePopupStateChange($event)"
(helpPopupState)="helpPopupStateChange($event)"
>
</app-header-dropdown>
</div>
<div class="burger-container" (click)="toogleNavSlider()">
<div
class="burger-menu"
[ngClass]="{ open: navSliderStatus }"
></div>
</div>
</div> </div>
</div>
<div class="slider-container" #nav> <div class="profile" #profileDropdown>
<app-header-slider <div
[(state)]="navSliderStatus" class="profile-btn"
[clickOutsideStopWatching]="userSliderStatus" (click)="toogleProfileDropdown()"
[ignoreClickOutside]="[header, user]" #profileBtn
>
<app-nav-slider
[state]="navSliderStatus"
(profileButtonClicked)="profileButtonClicked()"
[pages]="pages"
> >
</app-nav-slider> <fa-icon
</app-header-slider> *ngIf="!loggedUser || !loggedUser.profilePictureUrl"
</div> class="fas fa-user"
[icon]="userIcon"
></fa-icon>
<img
*ngIf="!!loggedUser && !!loggedUser.profilePictureUrl"
class="profile-picture"
[ngSrc]="loggedUser.profilePictureUrl"
width="50"
height="50"
alt="Profile Picture"
priority
/>
</div>
<div class="slider-container" #user> <app-header-dropdown
<app-header-slider class="dropdown"
[(state)]="userSliderStatus" (clickOutside)="closeDropdown()"
[ignoreClickOutside]="[header, nav]" [ignoreClickOutside]="[profileBtn]"
> [state]="profileDropdownState"
<app-user-slider
[state]="userSliderStatus"
(loginPopupState)="loginPopupStateChange($event)" (loginPopupState)="loginPopupStateChange($event)"
(signupPopupState)="signupPopupStateChange($event)" (signupPopupState)="signupPopupStateChange($event)"
(myProfilePopupState)="myProfilePopupStateChange($event)" (myProfilePopupState)="myProfilePopupStateChange($event)"
(helpPopupState)="helpPopupStateChange($event)" (helpPopupState)="helpPopupStateChange($event)"
> >
</app-user-slider> </app-header-dropdown>
</app-header-slider> </div>
<div class="burger-container" (click)="toogleNavSlider()">
<div
class="burger-menu"
[ngClass]="{ open: navSliderStatus }"
></div>
</div>
</div> </div>
</div> </div>
<div class="slider-container" #nav>
<app-header-slider
[(state)]="navSliderStatus"
[clickOutsideStopWatching]="userSliderStatus"
[ignoreClickOutside]="[header, user]"
>
<app-nav-slider
[state]="navSliderStatus"
(profileButtonClicked)="profileButtonClicked()"
[pages]="pages"
>
</app-nav-slider>
</app-header-slider>
</div>
<div class="slider-container" #user>
<app-header-slider
[(state)]="userSliderStatus"
[ignoreClickOutside]="[header, nav]"
>
<app-user-slider
[state]="userSliderStatus"
(loginPopupState)="loginPopupStateChange($event)"
(signupPopupState)="signupPopupStateChange($event)"
(myProfilePopupState)="myProfilePopupStateChange($event)"
(helpPopupState)="helpPopupStateChange($event)"
>
</app-user-slider>
</app-header-slider>
</div>
<div class="header-spacer"></div> <div class="header-spacer"></div>

2
src/app/header/header.component.ts
View File

@@ -5,7 +5,7 @@ import {
OnDestroy, OnDestroy,
OnInit, OnInit,
ViewChild, ViewChild,
ViewContainerRef, ViewContainerRef, ViewEncapsulation,
} from '@angular/core'; } from '@angular/core';
import { faUser } from '@fortawesome/free-solid-svg-icons'; import { faUser } from '@fortawesome/free-solid-svg-icons';
import { LoginComponent } from './header-popup/login/login.component'; import { LoginComponent } from './header-popup/login/login.component';

7
src/styles.css
View File

@@ -6,6 +6,13 @@
margin: 0 auto; margin: 0 auto;
} }
html, body {
width: 100vw;
overflow-y: scroll;
overflow-x: hidden;
position: absolute;
}
h1, h1,
h2, h2,
h3, h3,