toolbar is really fixed now

src/app/components/home/home.component.sass

@@ -1,38 +1,6 @@
 @import '../../../styles/mixins.sass'
 @import '../../../styles/vars.sass'
 
-#content
-  position: fixed
-  width: 100%
-  height: calc(100% - 56px)
-
-#chat
-  box-sizing: content-box
-  height: 100%
-  width: 25%
-  float: left
-  overflow-y: auto
-  
-#feed
-  box-sizing: content-box
-  height: 100%
-  width: 50%
-  float: left
-  overflow-y: auto
-
-#social
-  box-sizing: content-box
-  height: 100%
-  width: 25%
-  float: left
-  overflow-y: auto
-
-.mat-toolbar.mat-primary 
-  width: 100%
-  position: sticky
-  top: 0
-  z-index: 1
-
 /deep/ .mat-tab-body-wrapper
   height: 100% 
 
@@ -45,8 +13,9 @@
   height: 100%
 
 .tab-content
-  height: 50%
+  box-sizing: content-box
   width: 100%
 
 
 
+

src/app/components/main-navigation/main-navigation.component.html

@@ -1,5 +1,7 @@
-<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
-<mat-sidenav-container class="sidenav-container" class="mat-typography">
+<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet"> <!-- getting the google material fonts-->
+<mat-sidenav-container class="mat-typography">
+
+  <!-- SIDENAV -->
   <mat-sidenav #drawer class="sidenav" 
       fxShow="true" fxHide.gt-sm="true"
       fixedInViewport="false"
@@ -21,8 +23,12 @@
       </div>
     </mat-nav-list>
   </mat-sidenav>
+
+  <!-- TOOLBAR -->
   <mat-sidenav-content>
     <mat-toolbar color="primary" class="mat-elevation-z4">
+
+      <!--content on SMALL SCREEN-->
       <button
         type="button"
         aria-label="Toggle sidenav"
@@ -32,7 +38,6 @@
         <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
       </button>
       <span>Greenvironment</span>
-        <!--The following menu items will be hidden on both SM and XS screen sizes -->
       <nav mat-tab-nav-bar backgroundColor="primary" fxShow="true" fxHide.lt-md="true">
         <div [hidden]="!loggedIn">
         <a mat-tab-link class="link"
@@ -57,15 +62,19 @@
           </a>
         </div>
       </nav>
+
+      <!--content on BIG SCREEN-->
       <div id="menu-button-box">
         <span class="mat-button" *ngIf="loggedIn" fxShow="true" fxHide.lt-md="true" routerLink={{profileUrl}}>Hello, {{user.username}}</span>
         <button mat-icon-button [matMenuTriggerFor]="requestMenu" [disabled]="!loggedIn" id="menu-button">
           <mat-icon [matBadge]="user.receivedRequests.length" [matBadgeHidden]="!(user.receivedRequests.length > 0)" matBadgeColor="accent">notifications</mat-icon>
         </button>
+
         <button mat-icon-button [matMenuTriggerFor]="menu" id="menu-button">
           <mat-icon>more_vert</mat-icon>
         </button>
       </div>
+
       <mat-menu #requestMenu="matMenu">
         <span mat-menu-item disableRipple="true" disabled="true">friend requests:</span>
         <button mat-menu-item *ngFor = "let request of user.receivedRequests" [class.selected]="request === selectedRequest" (click)="$event.stopPropagation();" disableRipple="true">
@@ -96,6 +105,7 @@
           </button> 
         </div>
       </mat-menu>
+
     </mat-toolbar>
     <router-outlet></router-outlet>
   </mat-sidenav-content>

src/app/components/main-navigation/main-navigation.component.sass

@@ -1,23 +1,19 @@
-.sidenav-container 
-  height: 100%
-
 .mat-sidenav-container 
-  height: 100%
-
-.mat-sidenav-content 
-  height: 100vh
+  margin-top: 56px
+  height: calc(100vh - 56px)
 
 .sidenav 
   width: 200px
 
 .sidenav .mat-toolbar
-  background: inherit
+  //background: inherit
 
 .mat-toolbar.mat-primary
   height: 56px
-  position: sticky
+  position: fixed
+  //position: sticky
   top: 0
-  z-index: 1000
+  z-index: 999
   .mat-tab-nav-bar
     width: 50%
     height: 56px
@@ -36,12 +32,7 @@
 /deep/ .mat-tab-link
   min-width: 5em!important
   
-#login-button
-  
 #menu-button-box
   text-align: right
   width: 100%
 
-
-
-

src/app/components/profile/profile.component.html

@@ -1,5 +1,6 @@
-<mat-toolbar color="primary">Profile</mat-toolbar>
-<div id="profile">
+<div id="profile-page">
+    <mat-toolbar color="primary">Profile</mat-toolbar>
+    <div id="profile">
         <div id="profilecontainer" [hidden]="profileNotFound">
             <div id="profile-card-container">
             <mat-card class="mat-elevation-z8">
@@ -102,4 +103,5 @@
                 <h1>Profile not found :(</h1>
         </div>
     </div>
+</div>
   

src/app/components/profile/profile.component.sass

@@ -1,6 +1,12 @@
 @import '../../../styles/mixins.sass'
 @import '../../../styles/vars.sass'
 
+#profile-page
+  position: fixed
+  width: 100%
+  height: calc(100% - 56px)
+  overflow: scroll
+
 #profile 
   padding: 2em
   max-width: 1200px

src/app/components/search/search.component.sass

@@ -1,6 +1,7 @@
 
 #search 
   width: 100%
+  overflow-x: hidden
   height: 100%
 
 #input