Agfdhyk

I am starting to learn coding and I was tasked with building a personal "portfolio" website that is a few pages and showcases some things about me. I am building it with Angular and have started 2 versions of the website. One I've been building with Bootstrap 4/Jquery(following a youtube video) and the other version I just started is with Angular Material.(Building in angular because the place hiring me wants me to learn angular as most of their projects involve that framework)

I'd love to get some feedback on which framework I should use to build my website and which will be more beneficial later on. One thing I've been getting frustrated at is I cannot seem to "build" what I want without running into mental blocks every 2 minutes.

I just finished watched a 6 hour playlist on youtube on angular and I immediately started on this website project but I am pulling my hair out in frustration. I know once I get the hang of how to build a website smoothly from start ---> finish my life will become a little easier.

My question is how can I make this side-nav from Material mode = "push" everytime I am setting it to push it still overlays. Also because angular is component based. How do I make a component for the main content area where the rest of the components go?

Here is the code from my "main-nav.component.html"

<mat-sidenav-container class="sidenav-container">

  <mat-sidenav #drawer class="sidenav" fixedInViewport="true"

      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"

      [mode]="(isHandset$ | async) ? 'push' : 'push'"

      [opened]="!(isHandset$ | async)">

      <mat-toolbar color="primary" >

          <div class="sidebar-logo">Menu

           <!-- <img src = "/assets/roy-creates-logo-03-1.png" id="main-logo"> -->

        </div>

      </mat-toolbar>

    <mat-nav-list>

      <a mat-list-item href="#">Link 1</a>

      <a mat-list-item href="#">Link 2</a>

      <a mat-list-item href="#">Link 3</a>

    </mat-nav-list>

  </mat-sidenav>

  <mat-sidenav-content>

    <mat-toolbar color="primary">

      <button

        type="button"

        aria-label="Toggle sidenav"

        mat-icon-button

        (click)="drawer.toggle()"

        *ngIf="isHandset$ | async">

        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>

      </button>

      <span>art-site</span>

    </mat-toolbar>

    <!-- Add Content Here -->

  </mat-sidenav-content>

</mat-sidenav-container>

and the code from the typescript class for the same component

import { Component } from '@angular/core';

import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';

import { Observable } from 'rxjs';

import { map } from 'rxjs/operators';



@Component({

  selector: 'app-main-nav',

  templateUrl: './main-nav.component.html',

  styleUrls: ['./main-nav.component.css'],

})

export class MainNavComponent {



  isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)

    .pipe(

      map(result => result.matches)

    );



  constructor(private breakpointObserver: BreakpointObserver) {}



}