Tips for designing a navbar specific to a profile section

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?

Answer №1

To enhance the layout, include two additional divs with distinct classes and style them using CSS for a polished appearance.

    <div class="left-menu">
        <a>About Us</a>
        <a>Services</a>
        <a>Products</a>
        <a>Contact Us</a>
    </div>
    <div class="right-menu">
        <a *ngIf="isLoggedIn">
            <mat-form-field></mat-form-field>
        </a>
    </div>
</div>
<style>
    .left-menu{
        float: left;
        width:80%;
    }
    .right-menu {
        float: left;
        width: 20%;
    }
</style>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is the ID Column in the Minimal Material Table Demo not appearing as expected?

Hey there, I'm in the process of developing a simple demonstration of a material table - Take note that this is a stackblitz link and for some reason, the id column isn't showing up. Here's a snippet from my app.component.ts: import { C ...

How can we enhance intellisense to recognize instance members of an interface when using dynamic indices?

In the midst of developing an angular project, I am currently utilizing an interface to specify a configuration for a module. The design of the interface revolves around mapping names to objects and is relatively straightforward: export interface NamedRou ...

The comparison between ng-content and router-outlet in Angular 2

Can someone help me decide on the best approach for structuring my components? i. The first approach involves using ng-content in the parent component and then creating child components enclosed within the parent's selector. For example, creating a ...

Performing a dynamic animation by toggling the class of an element with "classList.toggle" in JavaScript

I have been attempting to incorporate a fade animation using CSS when altering the class of the input and label elements within a form by utilizing the classList.toggle method in JavaScript. I'm puzzled as to why my code isn't producing the desir ...

Adjust the size of the image to fit within the div container following

<div id="homePage" style="position: relative; margin: 0px; width: 320px; height: 420px;"> <img id="userImg" src="images/5.jpg" width="100%" height="100%" onclick="imageClick()" style=" z-index: -1; margin: 0 ...

Using Javascript to dynamically swap images within a div as the user scrolls

Can someone help me achieve a similar image scrolling effect like the one on the left side of this website: I am looking to change the image inside a div as I scroll and ensure that the page doesn't scroll further until all the images have been scrol ...

Replacing a predefined label in Volusion (for language translations)

I am currently working on a project using the Volusion platform, which unfortunately does not provide full interface editing capabilities. As a result, I am attempting to edit certain hardcoded labels in the HTML to display them in Spanish. After trying v ...

Steps to display a variable in JavaScript on an HTML textarea

I'm working on a JavaScript variable called 'signature' var signature; //(Data is here) document.write(signature) Within my HTML document, I have the following: <div id="siggen"> <textarea id="content" cols="80" rows="10">& ...

Dynamic row addition in Material Design Lite table causes format to break

Here's the HTML markup for creating a checkbox using material-design-lite: <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox"> <input type="checkbox" id="checkbox" class="mdl-checkbox__input" /> <span c ...

Incorporating a bottom line or border within the input field with a specified width

I have been struggling with styling an input field. I added a 1px solid #000 border around it, but now I need to include a thicker black line within the input itself. I tried using border-bottom: 5px solid #000, but that just created a border at the bottom ...

The issue of Angular 12 Bootstrap 5 ngFor accordion remaining open persists

I am currently working on implementing a ngFor dropdown accordion list using Angular 12 and bootstrap 5. However, I am facing an issue where the accordions are staying open and not closing as expected. If anyone has any insights on how to resolve this and ...

Stop horizontal overflow of content

This unique Vuetify demo on CodePen showcases a two-column layout. The first column contains a <v-list> enclosed in a green <v-alert>. By clicking the "toggle text" button, you can switch the title of the first list item between short and long ...

Generating an HTML report that includes a header and footer on every page using Firefox

I have been trying different methods, but none of them seem to work properly. My issue is with printing a html report with a header and footer on every page specifically in Firefox. A Possible Solution: <html> <head> <title></title&g ...

Tips for smoothly transitioning from a simple transform to a rotate effect

I need help with an HTML element that needs to rotate when hovered over. Here is the code I have: The issue I'm facing is that I don't want a transition for translateX, only for the rotation. What steps should I take to achieve this? .cog { ...

Enhance and soften images using CSS with smooth responsiveness across all web browsers

When an image is clicked, it should zoom in and become the background of the page with a blurred effect. I attempted to achieve this using the following code... <style type="text/css"> body{ position: absolute; margin-left: 100px; right: 0; z-inde ...

NGRX reducer avoids generating errors due to incorrect assignments

My experience with ngrx is relatively new. In my typical TypeScript work, I usually encounter an incorrect assignment error like the one below due to a missing property in the interface declaration: interface IExample { count: number; } let initialState ...

I am looking to access a public method from a different component in Angular 2

Trying to access the headerExpand property from app.component is causing an error message in the console: metadata_resolver.js:559 Uncaught Error: Invalid providers for "Page1" - only instances of Provider and Type are allowed, got: [?undefined?] page1 ...

Issue with PrimeNG overlaypanel displaying error message "Functionality of this.engine.setProperty is not available"

After importing OverlayPanelModule as @NgModule in parent.module.ts, I added the following code in child.component.html: <p-overlayPanel [dismissable]="false" #overlay> Content </p-overlayPanel> However, upon testing, I encountered the error ...

Encountering a problem with an InvalidPipeArgument in Angular 6

Here's a quick summary of the situation: I recently upgraded my application to the latest version of Angular, moving from 5 to 6. All deployments in the packages.json file were updated using the ng update command. In my application, I save a Date() ...

What steps should I take to ensure that my dropdown menu functions properly?

I am struggling to get my navigation bar with dropdown menus to function properly. I suspect there might be an issue with the CSS code. Can you take a look at it? Here is the HTML code snippet: /*---------------------NAVBAR-------------------*/ ...