title: How to style navbar for profile section
body: <p>I currently have an angular app that has a nav bar made up of a tags, now when the player logs in i have an <code>ngIf</code> for a my profile icon to show with dropdowns but I cant get it styled correctly, I just want sort of that spanner icon on the top right of the nav bar and when clicked it shows options. This is what I have so far:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;page-links responsive&quot; [ngClass]=&quot;{'animate': shouldShow}&quot;&gt;
    &lt;a [routerLink]=&quot;''&quot;
       [routerLinkActive]=&quot;'active'&quot;
       [routerLinkActiveOptions]=&quot;{exact: true}&quot;
       draggable=&quot;false&quot;
       (click)=&quot;toggleMenu()&quot;&gt;
      Home
    &lt;/a&gt;
    &lt;a [routerLink]=&quot;'/university'&quot;
       [routerLinkActive]=&quot;'active'&quot;
       draggable=&quot;false&quot;
       (click)=&quot;toggleMenu()&quot;&gt;
      University Cup
    &lt;/a&gt;
    &lt;a [routerLink]=&quot;'/rules'&quot;
       [routerLinkActive]=&quot;'active'&quot;
       draggable=&quot;false&quot;
       (click)=&quot;toggleMenu()&quot;&gt;
      The Game
    &lt;/a&gt;
    &lt;a [routerLink]=&quot;'/tournaments'&quot;
       [routerLinkActive]=&quot;'active'&quot;
       draggable=&quot;false&quot;
       (click)=&quot;toggleMenu()&quot;&gt;
      Tournaments
    &lt;/a&gt;
    &lt;a [routerLink]=&quot;'/history'&quot;
       [routerLinkActive]=&quot;'active'&quot;
       draggable=&quot;false&quot;
       (click)=&quot;toggleMenu()&quot;&gt;
      Our Legacy
    &lt;/a&gt;
    &lt;a [routerLink]=&quot;'/team'&quot;
       [routerLinkActive]=&quot;'active'&quot;
       draggable=&quot;false&quot;
       (click)=&quot;toggleMenu()&quot;&gt;
      Our Team
    &lt;/a&gt;
    &lt;a [routerLink]=&quot;'/portal'&quot;
       [routerLinkActive]=&quot;'active'&quot;
       draggable=&quot;false&quot;
       (click)=&quot;toggleMenu()&quot;&gt;
      Player Portal
  &lt;/a&gt;
    &lt;a *ngIf=&quot;isAuthed&quot;&gt;
      &lt;mat-form-field appearance=&quot;fill&quot;&gt;
        &lt;mat-label&gt;&lt;mat-icon&gt;accessibility&lt;/mat-icon&gt;&lt;/mat-label&gt;
        &lt;mat-select&gt;
          &lt;mat-option value=&quot;option1&quot;&gt;My Profile&lt;/mat-option&gt;
          &lt;mat-option value=&quot;option2&quot;&gt;GitHub Instructions&lt;/mat-option&gt;
          &lt;mat-option value=&quot;option3&quot;&gt;Download CICD file&lt;/mat-option&gt;
          &lt;mat-option value=&quot;option4&quot;&gt;Logout&lt;/mat-option&gt;
        &lt;/mat-select&gt;
      &lt;/mat-form-field&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  <p>My css:</p>
  <pre class="lang-css prettyprint-override"><code>    .page-links {
    @media (max-width: $screen-md-max) {
      position: absolute;
      top: 80px;
      right: 0;
      left: 0;
    }
  
    a {
      display: inline-block;
      height: 80px;
      line-height: 80px;
      padding: 0 8px;
      margin: 0 8px;
      overflow: hidden;
      transition-property: height, border-width, underline, background-color, color;
      transition: ease-in-out 350ms;
      font-weight: bold;
  
      &amp;, &amp;:active, &amp;:focus, &amp;:visited {
        text-decoration: none;
        color: white;
      }
  
      &amp;:hover {
        color: $title;
        background-color: rgba(255, 255, 255, 0.1);
      }
  
      &amp;.active {
        color: $title;
      }
    }
  
    li {
      display: inline-block;
      height: 80px;
      line-height: 80px;
      padding: 0 8px;
      margin: 0 8px;
      overflow: hidden;
      transition-property: height, border-width, underline, background-color, color;
      transition: ease-in-out 350ms;
      font-weight: bold;
  
      &amp;, &amp;:active, &amp;:focus, &amp;:visited {
        text-decoration: none;
        color: grey;
      }
  
    }
  
    &amp;.responsive {
      @media (max-width: $screen-md-max) {
        display: inline-block;
        width: 100%;
        background: $primary-darker;
  
        a {
          position: relative;
          float: none;
          display: block;
          text-align: left;
          height: 0;
          line-height: 50px;
          padding: 0 16px;
          margin: 0;
          border-top: 0 solid white;
        }
  
        li {
          position: relative;
          float: none;
          display: block;
          text-align: left;
          height: 0;
          line-height: 50px;
          padding: 0 16px;
          margin: 0;
          border-top: 0 solid white;
        }
  
        &amp;.animate {
          a {
            height: 50px;
            border-width: 1px;
          }
        }
      }
    }
  }
  </code></pre>
  <p>But my code renders like this:
  <a href="https://i.stack.imgur.com/EBYe8.png" rel="nofollow noreferrer">Rendered Code</a></p>
  <p>What can i do to fix this?</p>