Add my library section in menu

CREDITS.md

@@ -211,4 +211,5 @@
 # Icons
 
  * [Robbie Pearce](https://robbiepearce.com/softies/)
+ * [Fork-Awesome](https://github.com/ForkAwesome/Fork-Awesome)
  * playlist add by Google

client/src/app/+my-account/my-account.component.ts

@@ -21,23 +21,28 @@ export class MyAccountComponent {
       children: [
         {
           label: this.i18n('My channels'),
-          routerLink: '/my-account/video-channels'
+          routerLink: '/my-account/video-channels',
+          iconName: 'folder'
         },
         {
           label: this.i18n('My videos'),
-          routerLink: '/my-account/videos'
+          routerLink: '/my-account/videos',
+          iconName: 'videos'
         },
         {
           label: this.i18n('My playlists'),
-          routerLink: '/my-account/video-playlists'
+          routerLink: '/my-account/video-playlists',
+          iconName: 'playlists'
         },
         {
           label: this.i18n('My subscriptions'),
-          routerLink: '/my-account/subscriptions'
+          routerLink: '/my-account/subscriptions',
+          iconName: 'subscriptions'
         },
         {
           label: this.i18n('My history'),
-          routerLink: '/my-account/history/videos'
+          routerLink: '/my-account/history/videos',
+          iconName: 'history'
         }
       ]
     }
@@ -45,7 +50,8 @@ export class MyAccountComponent {
     if (this.isVideoImportEnabled()) {
       libraryEntries.children.push({
         label: 'My imports',
-        routerLink: '/my-account/video-imports'
+        routerLink: '/my-account/video-imports',
+        iconName: 'cloud-download'
       })
     }
 
@@ -54,15 +60,18 @@ export class MyAccountComponent {
       children: [
         {
           label: this.i18n('Muted accounts'),
-          routerLink: '/my-account/blocklist/accounts'
+          routerLink: '/my-account/blocklist/accounts',
+          iconName: 'user'
         },
         {
           label: this.i18n('Muted instances'),
-          routerLink: '/my-account/blocklist/servers'
+          routerLink: '/my-account/blocklist/servers',
+          iconName: 'server'
         },
         {
           label: this.i18n('Ownership changes'),
-          routerLink: '/my-account/ownership'
+          routerLink: '/my-account/ownership',
+          iconName: 'im-with-her'
         }
       ]
     }

client/src/app/menu/menu.component.html

 <div class="menu-wrapper">
-  <menu>
+  <menu [ngClass]="{ 'logged-in': isLoggedIn }">
     <div class="top-menu">
       <div *ngIf="isLoggedIn" class="logged-in-block">
         <my-avatar-notification [user]="user"></my-avatar-notification>
@@ -13,20 +13,16 @@
           <my-global-icon iconName="more-vertical" ngbDropdownToggle role="button"></my-global-icon>
 
           <div ngbDropdownMenu>
-            <a *ngIf="user.account" i18n [routerLink]="[ '/accounts', user.account.nameWithHost ]" class="dropdown-item">
-             My public profile
+            <a *ngIf="user.account" [routerLink]="[ '/accounts', user.account.nameWithHost ]" class="dropdown-item">
+              <my-global-icon iconName="go"></my-global-icon> <ng-container i18n>My public profile</ng-container>
             </a>
 
-            <a i18n routerLink="/my-account" class="dropdown-item">
-              My account
+            <a routerLink="/my-account" class="dropdown-item">
+              <my-global-icon iconName="user"></my-global-icon> <ng-container i18n>My account</ng-container>
             </a>
 
-            <a i18n routerLink="/my-account/videos" class="dropdown-item">
-              My videos
-            </a>
-
-            <a i18n (click)="logout($event)" class="dropdown-item" href="#">
-              Log out
+            <a (click)="logout($event)" class="dropdown-item" href="#">
+              <my-global-icon iconName="sign-out"></my-global-icon> <ng-container i18n>Log out</ng-container>
             </a>
           </div>
         </div>
@@ -37,31 +33,51 @@
         <a i18n *ngIf="isRegistrationAllowed()" routerLink="/signup" class="create-account-button">Create an account</a>
       </div>
 
-      <div class="panel-block">
-        <div i18n class="block-title">Videos</div>
+      <div *ngIf="isLoggedIn" class="panel-block">
+        <div i18n class="block-title">My library</div>
+
+        <a routerLink="/my-account/videos" routerLinkActive="active">
+          <my-global-icon iconName="videos"></my-global-icon>
+          <ng-container i18n>Videos</ng-container>
+        </a>
+
+        <a routerLink="/my-account/video-playlists" routerLinkActive="active">
+          <my-global-icon iconName="playlists"></my-global-icon>
+          <ng-container i18n>Playlists</ng-container>
+        </a>
 
-        <a *ngIf="isLoggedIn" routerLink="/videos/subscriptions" routerLinkActive="active">
-          <span class="icon icon-videos-subscriptions"></span>
+        <a routerLink="/videos/subscriptions" routerLinkActive="active">
+          <my-global-icon iconName="subscriptions"></my-global-icon>
           <ng-container i18n>Subscriptions</ng-container>
         </a>
 
+        <a routerLink="/my-account/history/videos" routerLinkActive="active">
+          <my-global-icon iconName="history"></my-global-icon>
+          <ng-container i18n>History</ng-container>
+        </a>
+
+      </div>
+
+      <div class="panel-block">
+        <div i18n class="block-title">Videos</div>
+
         <a routerLink="/videos/overview" routerLinkActive="active">
-          <span class="icon icon-videos-overview"></span>
+          <my-global-icon iconName="globe"></my-global-icon>
           <ng-container i18n>Overview</ng-container>
         </a>
 
         <a routerLink="/videos/trending" routerLinkActive="active">
-          <span class="icon icon-videos-trending"></span>
+          <my-global-icon iconName="trending"></my-global-icon>
           <ng-container i18n>Trending</ng-container>
         </a>
 
         <a routerLink="/videos/recently-added" routerLinkActive="active">
-          <span class="icon icon-videos-recently-added"></span>
+          <my-global-icon iconName="recently-added"></my-global-icon>
           <ng-container i18n>Recently added</ng-container>
         </a>
 
         <a routerLink="/videos/local" routerLinkActive="active">
-          <span class="icon icon-videos-local"></span>
+          <my-global-icon iconName="home"></my-global-icon>
           <ng-container i18n>Local</ng-container>
         </a>
       </div>
@@ -70,12 +86,12 @@
         <div class="block-title" i18n>More</div>
 
         <a *ngIf="userHasAdminAccess" [routerLink]="getFirstAdminRouteAvailable()" routerLinkActive="active">
-          <span class="icon icon-administration"></span>
+          <my-global-icon iconName="administration"></my-global-icon>
           <ng-container i18n>Administration</ng-container>
         </a>
 
         <a routerLink="/about" routerLinkActive="active">
-          <span class="icon icon-about"></span>
+          <my-global-icon iconName="about"></my-global-icon>
           <ng-container i18n>About</ng-container>
         </a>
       </div>

client/src/app/menu/menu.component.scss

@@ -26,6 +26,16 @@ menu {
     overflow-y: auto;
   }
 
+  &.logged-in {
+    .panel-block {
+      margin-bottom: 25px;
+    }
+
+    .block-title {
+      margin-bottom: 15px;
+    }
+  }
+
   .top-menu {
     flex-grow: 1;
     width: $menu-width;
@@ -37,7 +47,7 @@ menu {
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-bottom: 35px;
+    margin-bottom: 20px;
 
     .logged-in-info {
       @include ellipsis;
@@ -74,6 +84,24 @@ menu {
           border: none;
         }
       }
+
+      .dropdown-item {
+        @include dropdown-with-icon-item;
+
+        my-global-icon {
+          @include apply-svg-color(var(--mainForegroundColor));
+
+          width: 22px;
+          height: 22px;
+
+          &[iconName="sign-out"] {
+            position: relative;
+            right: -1px;
+            height: 21px;
+            width: 21px;
+          }
+        }
+      }
     }
   }
 
@@ -134,57 +162,31 @@ menu {
         background-color: rgba(255, 255, 255, 0.10);
       }
 
-      .icon {
-        @include icon(22px);
+      my-global-icon {
+        @include apply-svg-color(#808080);
 
+        display: flex;
+        width: 22px;
+        height: 22px;
         margin-right: 18px;
 
-        &.icon-videos-subscriptions {
-          position: relative;
-          top: -1px;
-          background-image: url('../../assets/images/menu/subscriptions.svg');
-        }
-
-        &.icon-videos-overview {
-          position: relative;
-          background-image: url('../../assets/images/menu/globe.svg');
-        }
-
-        &.icon-videos-trending {
-          position: relative;
-          top: -1px;
-          background-image: url('../../assets/images/menu/trending.svg');
-        }
+        &[iconName="playlists"] {
+          height: 24px;
+          width: 24px;
 
-        &.icon-videos-recently-added {
-          width: 23px;
-          height: 23px;
-          background-image: url('../../assets/images/menu/recently-added.svg');
+          margin-right: 16px;
         }
 
-        &.icon-videos-local {
-          width: 23px;
-          height: 23px;
-
+        &[iconName="videos"] {
           position: relative;
-          top: -1px;
-
-          background-image: url('../../assets/images/menu/home.svg');
-        }
-
-        &.icon-administration {
-          width: 23px;
-          height: 23px;
-
-          background-image: url('../../assets/images/menu/administration.svg');
+          right: -1px;
         }
+      }
 
-        &.icon-about  {
-          width: 23px;
-          height: 23px;
+      .icon {
+        @include icon(22px);
 
-          background-image: url('../../assets/images/menu/about.svg');
-        }
+        margin-right: 18px;
       }
     }
   }

client/src/app/shared/images/global-icon.component.ts

@@ -2,6 +2,8 @@ import { Component, ElementRef, Input, OnInit } from '@angular/core'
 
 const icons = {
   'add': require('../../../assets/images/global/add.html'),
+  'user': require('../../../assets/images/global/user.html'),
+  'sign-out': require('../../../assets/images/global/sign-out.html'),
   'syndication': require('../../../assets/images/global/syndication.html'),
   'help': require('../../../assets/images/global/help.html'),
   'sparkle': require('../../../assets/images/global/sparkle.html'),
@@ -11,12 +13,15 @@ const icons = {
   'no': require('../../../assets/images/global/no.html'),
   'cloud-download': require('../../../assets/images/global/cloud-download.html'),
   'undo': require('../../../assets/images/global/undo.html'),
+  'history': require('../../../assets/images/global/history.html'),
   'circle-tick': require('../../../assets/images/global/circle-tick.html'),
   'cog': require('../../../assets/images/global/cog.html'),
   'download': require('../../../assets/images/global/download.html'),
+  'go': require('../../../assets/images/menu/go.html'),
   'edit': require('../../../assets/images/global/edit.html'),
   'im-with-her': require('../../../assets/images/global/im-with-her.html'),
   'delete': require('../../../assets/images/global/delete.html'),
+  'server': require('../../../assets/images/global/server.html'),
   'cross': require('../../../assets/images/global/cross.html'),
   'validate': require('../../../assets/images/global/validate.html'),
   'tick': require('../../../assets/images/global/tick.html'),
@@ -28,7 +33,17 @@ const icons = {
   'share': require('../../../assets/images/video/share.html'),
   'upload': require('../../../assets/images/video/upload.html'),
   'playlist-add': require('../../../assets/images/video/playlist-add.html'),
-  'play': require('../../../assets/images/global/play.html')
+  'play': require('../../../assets/images/global/play.html'),
+  'playlists': require('../../../assets/images/global/playlists.html'),
+  'about': require('../../../assets/images/menu/about.html'),
+  'globe': require('../../../assets/images/menu/globe.html'),
+  'home': require('../../../assets/images/menu/home.html'),
+  'recently-added': require('../../../assets/images/menu/recently-added.html'),
+  'trending': require('../../../assets/images/menu/trending.html'),
+  'videos': require('../../../assets/images/global/videos.html'),
+  'folder': require('../../../assets/images/global/folder.html'),
+  'administration': require('../../../assets/images/menu/administration.html'),
+  'subscriptions': require('../../../assets/images/menu/subscriptions.html')
 }
 
 export type GlobalIconName = keyof typeof icons

client/src/app/shared/menu/top-menu-dropdown.component.html

@@ -13,7 +13,11 @@
       </span>
 
       <div ngbDropdownMenu>
-        <a *ngFor="let menuChild of menuEntry.children" class="dropdown-item" [routerLink]="menuChild.routerLink">{{ menuChild.label }}</a>
+        <a *ngFor="let menuChild of menuEntry.children" class="dropdown-item" [ngClass]="{ icon: hasIcons }" [routerLink]="menuChild.routerLink">
+          <my-global-icon *ngIf="menuChild.iconName" [iconName]="menuChild.iconName"></my-global-icon>
+
+          {{ menuChild.label }}
+        </a>
       </div>
     </div>
 

client/src/app/shared/menu/top-menu-dropdown.component.scss

+@import '_variables';
+@import '_mixins';
+
 .parent-entry {
   span[role=button] {
     cursor: pointer;
@@ -16,3 +19,9 @@
 /deep/ .dropdown-menu {
   margin-top: 0 !important;
 }
+
+.icon {
+  @include dropdown-with-icon-item;
+
+  top: -1px;
+}

client/src/app/shared/menu/top-menu-dropdown.component.ts

@@ -3,6 +3,7 @@ import { filter, take } from 'rxjs/operators'
 import { NavigationEnd, Router } from '@angular/router'
 import { Subscription } from 'rxjs'
 import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
+import { GlobalIconName } from '@app/shared/images/global-icon.component'
 
 export type TopMenuDropdownParam = {
   label: string
@@ -11,6 +12,8 @@ export type TopMenuDropdownParam = {
   children?: {
     label: string
     routerLink: string
+
+    iconName?: GlobalIconName
   }[]
 }
 
@@ -23,6 +26,7 @@ export class TopMenuDropdownComponent implements OnInit, OnDestroy {
   @Input() menuEntries: TopMenuDropdownParam[] = []
 
   suffixLabels: { [ parentLabel: string ]: string }
+  hasIcons = false
 
   private openedOnHover = false
   private routeSub: Subscription
@@ -35,6 +39,10 @@ export class TopMenuDropdownComponent implements OnInit, OnDestroy {
     this.routeSub = this.router.events
                         .pipe(filter(event => event instanceof NavigationEnd))
                         .subscribe(() => this.updateChildLabels(window.location.pathname))
+
+    this.hasIcons = this.menuEntries.some(
+      e => e.children && e.children.some(c => !!c.iconName)
+    )
   }
 
   ngOnDestroy () {
@@ -48,7 +56,7 @@ export class TopMenuDropdownComponent implements OnInit, OnDestroy {
     // Menu was closed
     dropdown.openChange
             .pipe(take(1))
-            .subscribe(e => this.openedOnHover = false)
+            .subscribe(() => this.openedOnHover = false)
   }
 
   dropdownAnchorClicked (dropdown: NgbDropdown) {

client/src/assets/images/global/folder.html

+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-708.000000, -115.000000)">
+            <g id="16" transform="translate(708.000000, 115.000000)">
+                <path d="M11.5857864,17 L14.2928932,19.7071068 L14.5857864,20 L15,20 L20.009222,20 C21.1044506,20 22,19.102094 22,18.0014977 L22,6.99850233 C22,5.89626364 21.1085926,5 20.0066023,5 L3.99339768,5 C2.89217541,5 2,5.89385529 2,6.99539757 L2,15.0046024 C2,16.099013 2.89670181,17 3.99754465,17 L11.5857864,17 Z" id="Rectangle-406" stroke="#000000" stroke-width="2" stroke-linejoin="round" transform="translate(12.000000, 12.500000) scale(1, -1) translate(-12.000000, -12.500000) "/>
+                <path d="M3,5 C3,4.44771525 3.4454627,4 3.99871095,4 L12.5,4 L10.5,6 L3.99594209,6 C3.44589846,6 3,5.55613518 3,5 L3,5 Z" id="Rectangle-409" fill="#000000"/>
+            </g>
+        </g>
+    </g>
+</svg>

client/src/assets/images/global/history.html

+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-620.000000, -863.000000)" stroke="#000000" stroke-width="2">
+            <g id="354" transform="translate(620.000000, 863.000000)">
+                <path d="M6.63582585,18.3637479 C8.26452234,19.9925528 10.5146102,21 13,21 L13,21 C17.9705627,21 22,16.9705627 22,12 C22,7.02943725 17.9705627,3 13,3 C8.02943725,3 4,7.02943725 4,12" id="Oval-203"/>
+                <polygon id="Path-282" fill="#000000" points="1.5 11 7.5 11 4.5 14"/>
+                <polyline id="Path-283" points="13 7 13 12 15.5 14.5"/>
+            </g>
+        </g>
+    </g>
+</svg>

client/src/assets/images/global/playlists.html

+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-664.000000, -467.000000)" stroke="#000000">
+            <g id="175" transform="translate(664.000000, 467.000000)">
+                <path stoke="#000000" d="M7.5,7 C7.5,6.72427445 7.72568093,6.5 8.00684547,6.5 L19.9931545,6.5 C20.2754761,6.5 20.5,6.72240424 20.5,7 C20.5,7.27572555 20.2743191,7.5 19.9931545,7.5 L8.00684547,7.5 C7.72452386,7.5 7.5,7.27759576 7.5,7 Z M7.5,12 C7.5,11.7242745 7.72568093,11.5 8.00684547,11.5 L19.9931545,11.5 C20.2754761,11.5 20.5,11.7224042 20.5,12 C20.5,12.2757255 20.2743191,12.5 19.9931545,12.5 L8.00684547,12.5 C7.72452386,12.5 7.5,12.2775958 7.5,12 Z M7.5,17 C7.5,16.7242745 7.72568093,16.5 8.00684547,16.5 L19.9931545,16.5 C20.2754761,16.5 20.5,16.7224042 20.5,17 C20.5,17.2757255 20.2743191,17.5 19.9931545,17.5 L8.00684547,17.5 C7.72452386,17.5 7.5,17.2775958 7.5,17 Z M4,7.5 C3.72385763,7.5 3.5,7.27614237 3.5,7 C3.5,6.72385763 3.72385763,6.5 4,6.5 C4.27614237,6.5 4.5,6.72385763 4.5,7 C4.5,7.27614237 4.27614237,7.5 4,7.5 Z M4,12.5 C3.72385763,12.5 3.5,12.2761424 3.5,12 C3.5,11.7238576 3.72385763,11.5 4,11.5 C4.27614237,11.5 4.5,11.7238576 4.5,12 C4.5,12.2761424 4.27614237,12.5 4,12.5 Z M4,17.5 C3.72385763,17.5 3.5,17.2761424 3.5,17 C3.5,16.7238576 3.72385763,16.5 4,16.5 C4.27614237,16.5 4.5,16.7238576 4.5,17 C4.5,17.2761424 4.27614237,17.5 4,17.5 Z" id="Combined-Shape"/>
+            </g>
+        </g>
+    </g>
+</svg>

client/src/assets/images/global/server.html

+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-796.000000, -643.000000)">
+            <g id="258" transform="translate(796.000000, 643.000000)">
+                <ellipse id="Oval-140" stroke="#000000" stroke-width="2" cx="12" cy="6" rx="9" ry="3"/>
+                <path d="M3,10.5 C3,12.1568542 7.02943725,13.5 12,13.5 L12,13.5 C16.9705627,13.5 21,12.1568542 21,10.5" id="Oval-140" stroke="#000000"/>
+                <path d="M3,14.5 C3,16.1568542 7.02943725,17.5 12,17.5 C16.9705627,17.5 21,16.1568542 21,14.5" id="Oval-140" stroke="#000000"/>
+                <path d="M3,5.98958785 L3,19 C3,20.6568542 7.02943725,22 12,22 C16.9705627,22 21,20.6568542 21,19 L21,5.98958785" id="Oval-140" stroke="#000000" stroke-width="2"/>
+                <circle id="Oval-141" fill="#000000" cx="18.5" cy="10.5" r="1"/>
+                <circle id="Oval-141" fill="#000000" cx="18.5" cy="14.5" r="1"/>
+                <circle id="Oval-141" fill="#000000" cx="18.5" cy="18.5" r="1"/>
+            </g>
+        </g>
+    </g>
+</svg>

client/src/assets/images/global/sign-out.html

+<svg viewBox="0 0 1536 1536" width="1536" height="1536" xmlns="http://www.w3.org/2000/svg">
+    <path fill="#000000" d="M640 1440c0 28 13 96-32 96H288c-159 0-288-129-288-288V544c0-159 129-288 288-288h320c17 0 32 15 32 32 0 28 13 96-32 96H288c-88 0-160 72-160 160v704c0 88 72 160 160 160h288c25 0 64-5 64 32zm928-544c0 17-7 33-19 45l-544 544c-12 12-28 19-45 19-35 0-64-29-64-64v-288H448c-35 0-64-29-64-64V704c0-35 29-64 64-64h448V352c0-35 29-64 64-64 17 0 33 7 45 19l544 544c12 12 19 28 19 45z"/>
+</svg>

client/src/assets/images/global/user.html

+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-532.000000, -159.000000)" stroke="#000000" stroke-width="2">
+            <g id="32" transform="translate(532.000000, 159.000000)">
+                <path d="M2,21 C2,21 1.5,16 7,16 C12.5,16 11.512498,16 17.006249,16 C22.5,16 22.0062485,21 22.0062485,21" id="Path-41" stroke-linecap="round" stroke-linejoin="round"/>
+                <circle id="Oval-40" cx="12" cy="8" r="5"/>
+            </g>
+        </g>
+    </g>
+</svg>

client/src/assets/images/global/videos.html

+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-312.000000, -511.000000)">
+            <g id="187" transform="translate(312.000000, 511.000000)">
+                <rect id="Rectangle-124" stroke="#000000" stroke-width="2" x="3" y="6" width="18" height="16" rx="1"/>
+
+                <polygon fill="#000000" id="Triangle-1" points="10 17.5 10 10.4 15.5 13.9"/>
+
+                <rect id="Rectangle-125" fill="#000000" x="4" y="3" width="16" height="1" rx="0.5"/>
+                <rect id="Rectangle-125" fill="#000000" x="5" y="1" width="14" height="1" rx="0.5"/>
+            </g>
+        </g>
+    </g>
+</svg>

client/src/assets/images/global/videos.svg

+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-312.000000, -511.000000)">
+            <g id="187" transform="translate(312.000000, 511.000000)">
+                <rect id="Rectangle-124" stroke="#000000" stroke-width="2" x="3" y="6" width="18" height="16" rx="1"/>
+
+                <polygon fill="#000000" id="Triangle-1" points="10 17.5 10 10.4 15.5 13.9"/>
+
+                <rect id="Rectangle-125" fill="#000000" x="4" y="3" width="16" height="1" rx="0.5"/>
+                <rect id="Rectangle-125" fill="#000000" x="5" y="1" width="14" height="1" rx="0.5"/>
+            </g>
+        </g>
+    </g>
+</svg>

client/src/assets/images/menu/about.svg → client/src/assets/images/menu/about.html

 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <defs></defs>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="Artboard-4" transform="translate(-400.000000, -247.000000)">
             <g id="69" transform="translate(400.000000, 247.000000)">
-                <circle id="Oval-7" stroke="#808080" stroke-width="2" cx="12" cy="12" r="10"></circle>
-                <path d="M12.016,14.544 C12.384,14.544 12.64,14.256 12.704,13.904 L12.768,13.168 C14.544,12.864 16,11.952 16,9.936 L16,9.904 C16,7.904 14.48,6.656 12.24,6.656 C10.768,6.656 9.696,7.184 8.848,7.984 C8.624,8.176 8.528,8.432 8.528,8.672 C8.528,9.152 8.928,9.552 9.424,9.552 C9.648,9.552 9.856,9.456 10.016,9.328 C10.656,8.752 11.344,8.448 12.192,8.448 C13.344,8.448 14.032,9.072 14.032,9.968 L14.032,10 C14.032,11.008 13.2,11.584 11.696,11.728 C11.264,11.776 11.008,12.096 11.072,12.528 L11.232,13.904 C11.28,14.272 11.552,14.544 11.92,14.544 L12.016,14.544 Z M10.784,16.816 L10.784,16.976 C10.784,17.6 11.264,18.08 11.92,18.08 C12.576,18.08 13.056,17.6 13.056,16.976 L13.056,16.816 C13.056,16.192 12.576,15.712 11.92,15.712 C11.264,15.712 10.784,16.192 10.784,16.816 Z" id="?" fill="#808080"></path>
+                <circle id="Oval-7" stroke="#000000" stroke-width="2" cx="12" cy="12" r="10"></circle>
+                <path d="M12.016,14.544 C12.384,14.544 12.64,14.256 12.704,13.904 L12.768,13.168 C14.544,12.864 16,11.952 16,9.936 L16,9.904 C16,7.904 14.48,6.656 12.24,6.656 C10.768,6.656 9.696,7.184 8.848,7.984 C8.624,8.176 8.528,8.432 8.528,8.672 C8.528,9.152 8.928,9.552 9.424,9.552 C9.648,9.552 9.856,9.456 10.016,9.328 C10.656,8.752 11.344,8.448 12.192,8.448 C13.344,8.448 14.032,9.072 14.032,9.968 L14.032,10 C14.032,11.008 13.2,11.584 11.696,11.728 C11.264,11.776 11.008,12.096 11.072,12.528 L11.232,13.904 C11.28,14.272 11.552,14.544 11.92,14.544 L12.016,14.544 Z M10.784,16.816 L10.784,16.976 C10.784,17.6 11.264,18.08 11.92,18.08 C12.576,18.08 13.056,17.6 13.056,16.976 L13.056,16.816 C13.056,16.192 12.576,15.712 11.92,15.712 C11.264,15.712 10.784,16.192 10.784,16.816 Z" id="?" fill="#000000"></path>
             </g>
         </g>
     </g>

client/src/assets/images/menu/administration.svg → client/src/assets/images/menu/administration.html

 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
-    <title>filter</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Artboard-4" transform="translate(-444.000000, -247.000000)" fill="#808080">
+        <g id="Artboard-4" transform="translate(-444.000000, -247.000000)" fill="#000000">
             <g id="70" transform="translate(444.000000, 247.000000)">
                 <path d="M8.82929429,17 L20.0066023,17 C20.5552407,17 21,17.4438648 21,18 C21,18.5522847 20.5550537,19 20.0066023,19 L8.82929429,19 C8.41745788,20.1651924 7.30621883,21 6,21 C4.34314575,21 3,19.6568542 3,18 C3,16.3431458 4.34314575,15 6,15 C7.30621883,15 8.41745788,15.8348076 8.82929429,17 Z M9.17070571,13 L3.99339768,13 C3.44475929,13 3,12.5561352 3,12 C3,11.4477153 3.44494629,11 3.99339768,11 L9.17070571,11 C9.58254212,9.83480763 10.6937812,9 12,9 C13.3062188,9 14.4174579,9.83480763 14.8292943,11 L20.0066023,11 C20.5552407,11 21,11.4438648 21,12 C21,12.5522847 20.5550537,13 20.0066023,13 L14.8292943,13 C14.4174579,14.1651924 13.3062188,15 12,15 C10.6937812,15 9.58254212,14.1651924 9.17070571,13 Z M15.1659641,6.98648118 C15.1124525,6.99537358 15.05751,7 15.0014977,7 L3.99850233,7 C3.44704472,7 3,6.55613518 3,6 C3,5.44771525 3.44748943,5 3.99850233,5 L15.0014977,5 C15.0575314,5 15.1124871,5.00458274 15.1660053,5.01340035 C15.5740343,3.84121344 16.6887792,3 18,3 C19.6568542,3 21,4.34314575 21,6 C21,7.65685425 19.6568542,9 18,9 C16.688735,9 15.5739592,8.15872988 15.1659641,6.98648118 Z M18,7 C18.5522847,7 19,6.55228475 19,6 C19,5.44771525 18.5522847,5 18,5 C17.4477153,5 17,5.44771525 17,6 C17,6.55228475 17.4477153,7 18,7 Z M12,13 C12.5522847,13 13,12.5522847 13,12 C13,11.4477153 12.5522847,11 12,11 C11.4477153,11 11,11.4477153 11,12 C11,12.5522847 11.4477153,13 12,13 Z M6,19 C6.55228475,19 7,18.5522847 7,18 C7,17.4477153 6.55228475,17 6,17 C5.44771525,17 5,17.4477153 5,18 C5,18.5522847 5.44771525,19 6,19 Z" id="Combined-Shape"></path>
             </g>

client/src/assets/images/menu/globe.svg → client/src/assets/images/menu/globe.html

 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
-    <title>globe</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Artboard-4" transform="translate(-224.000000, -687.000000)" stroke="#808080" stroke-width="2">
+        <g id="Artboard-4" transform="translate(-224.000000, -687.000000)" stroke="#000000" stroke-width="2">
             <g id="265" transform="translate(224.000000, 687.000000)">
                 <circle id="Oval-148" cx="12" cy="12" r="10"></circle>
                 <path d="M12,2 L12,22.006249" id="Path-199"></path>

client/src/assets/images/menu/go.html

+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-576.000000, -1046.000000)" stroke="#000000" stroke-width="2">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="up-right" transform="translate(528.000000, 0.000000)">
+                    <path d="M18,6 L5,19" id="Path-58"/>
+                    <polyline id="Path-59" stroke-linejoin="round" transform="translate(13.000000, 11.000000) scale(-1, -1) translate(-13.000000, -11.000000) " points="7 5 7 17 19 17"/>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>