Minimus - app.component.html

<!-- Slide Menu-->
<aside class="side-menu__container" [ngClass]="{'side-menu__container-active': showMenu}" (click)="toggleMenu()">
<nav class="slide-menu" [ngClass]="{'slide-menu-active': showMenu}" (click)="$event.stopImmediatePropagation();">
    <section class="menu-header">
        <span class="greeting__text">Welcome Back</span>
        <div class="profile-image__container">
            <img src="https://avatars3.githubusercontent.com/u/5658460?s=460&v=4" alt="profile-image"
                 class="profile__image">
        </div>
        <div class="account-details">
            <span class="name__text">Hamed Baatour</span>
            <span class="email__text">hamedbaatour@gmail.com</span>
        </div>
    </section>
    <section class="menu-body">

    </section>
    <section class="menu-footer">

    </section>
</nav>
</aside>

<div class="root__container" >
    <header [ngClass]="{'main__header-dark': darkModeActive}" class="main__header">

        <div class="left__section">
          <svg (click)="toggleMenu()" class="hamburger__icon" id="Menu_Burger_Icon">
              <!-- hamburger icon svg code goes here-->  
          </svg>

            <svg class="logo__icon">
              <!-- logo svg code goes here-->
            </svg>

        </div>

        <h3 class="date__text">Today</h3>


        <div class="mode-toggle__container">
            <span class="mode-toggle__text">Light</span>

            <label class="toggle-button__container">
                <input (click)="modeToggleSwitch()" type="checkbox" class="mode-toggle__input" />
                  <span [ngClass]="{'mode-toggle__bg-checked': darkModeActive}" class="mode-toggle__bg"></span>
                  <span [ngClass]="{'mode-toggle__circle-checked': darkModeActive}" class="mode-toggle__circle"></span>
            </label>


            <span class="mode-toggle__text">Dark</span>
        </div>

    </header>

    <!-- Main Content -->

    <!--<router-outlet></router-outlet>-->
    <main class="main__container">
        <div class="main-container__bg" [ngClass]="{'main-container__bg-dark': darkModeActive}"></div>
        <router-outlet></router-outlet>
    </main>

    <!-- Footer -->

    <footer class="main__footer">
        <small class="copyright__text">Copyright © 2018 Minimus</small>
    </footer>
</div>