I am currently working on an angular application with a navigation bar composed of anchor tags. When the user logs in, I have an ngIf directive to display my profile icon with dropdown options. However, I am facing challenges in styling it correctly. I aim to have a spanner icon on the top right of the navigation bar that, when clicked, shows the available options. This is what I have implemented so far:
<div class="page-links responsive" [ngClass]="{'animate': shouldShow}">
<a [routerLink]="''"
[routerLinkActive]="'active'"
[routerLinkActiveOptions]="{exact: true}"
draggable="false"
(click)="toggleMenu()">
Home
</a>
<a [routerLink]="'/university'"
[routerLinkActive]="'active'"
draggable="false"
(click)="toggleMenu()">
University Cup
</a>
<a [routerLink]="'/rules'"
[routerLinkActive]="'active'"
draggable="false"
(click)="toggleMenu()">
The Game
</a>
<a [routerLink]="'/tournaments'"
[routerLinkActive]="'active'"
draggable="false"
(click)="toggleMenu()">
Tournaments
</a>
<a [routerLink]="'/history'"
[routerLinkActive]="'active'"
draggable="false"
(click)="toggleMenu()">
Our Legacy
</a>
<a [routerLink]="'/team'"
[routerLinkActive]="'active'"
draggable="false"
(click)="toggleMenu()">
Our Team
</a>
<a [routerLink]="'/portal'"
[routerLinkActive]="'active'"
draggable="false"
(click)="toggleMenu()">
Player Portal
</a>
<a *ngIf="isAuthed">
<mat-form-field appearance="fill">
<mat-label><mat-icon>accessibility</mat-icon></mat-label>
<mat-select>
<mat-option value="option1">My Profile</mat-option>
<mat-option value="option2">GitHub Instructions</mat-option>
<mat-option value="option3">Download CICD file</mat-option>
<mat-option value="option4">Logout</mat-option>
</mat-select>
</mat-form-field>
</a>
</div>
This is how I have styled it using CSS:
.page-links {
@media (max-width: $screen-md-max) {
position: absolute;
top: 80px;
right: 0;
left: 0;
}
a {
/* Styling for anchor tags */
}
li {
/* Styling for list items */
}
&.responsive {
@media (max-width: $screen-md-max) {
/* Responsive styles */
}
}
}
The rendered code looks like this: Rendered Code
I am encountering rendering issues. Any suggestions on how I can resolve this?