Mail: Navigation styling

src/app/core/components/navigation/navigation.component.html

@@ -1,4 +1,4 @@
-<div id="main-navigation">
+<div id="main-navigation" class="nav">
     <ng-container *ngFor="let item of navigation">
 
         <fuse-nav-subheader *ngIf="item.type=='subheader'" [item]="item"></fuse-nav-subheader>

src/app/core/components/navigation/navigation.component.scss

@@ -4,91 +4,15 @@
     margin: 0;
     padding: 0;
 
-    .nav-subheader {
-        display: flex;
-        align-items: center;
-        height: 56px;
-        color: rgba(0, 0, 0, .54);
-        font-weight: 500;
-        padding-left: 24px;
-        white-space: nowrap;
-    }
-
     .nav-item {
 
         .nav-link {
-            text-decoration: none;
-            display: flex;
-            align-items: center;
-            height: 48px;
-            padding: 0 24px;
-            position: relative;
-            overflow: hidden;
             background-color: map-get($background, raised-button);
             color: map_get($foreground, text);
-            cursor: pointer;
-            user-select: none;
-
-            > span {
-                flex: 1;
-                white-space: nowrap;
-            }
 
             &:hover {
                 background-color: map-get($background, hover);
             }
-
-            .mat-ripple-element {
-                background-color: map-get($background, hover);
-            }
-
-            &.active {
-                background-color: mat-color($accent);
-
-                .mat-ripple-element {
-                    background-color: mat-color($accent, default-contrast, 0.1);
-                }
-
-                &, .nav-link-icon {
-                    color: mat-color($accent, default-contrast);
-                }
-            }
-
-            .nav-link-icon {
-                margin-right: 16px;
-            }
-
-            .nav-link-icon,
-            .collapse-arrow {
-                font-size: 16px;
-                width: 16px;
-                height: 16px;
-                line-height: 16px;
-                color: map_get($mat-light-theme-foreground, icon);;
-            }
-        }
-
-        &.nav-collapse {
-
-            > .children {
-
-                > .nav-item {
-
-                    > .nav-link {
-                        padding-left: 56px;
-                    }
-
-                    > .children {
-
-                        > .nav-item {
-
-                            > .nav-link {
-                                padding-left: 72px;
-                            }
-                        }
-                    }
-                }
-            }
         }
     }
 }

src/app/core/scss/core.scss

@@ -25,6 +25,7 @@
 @import "partials/angular-material-fix";
 @import "partials/typography";
 @import "partials/page-layouts";
+@import "partials/navigation";
 
 // Plugins
 @import "partials/plugins/plugins";

src/app/core/scss/partials/_navigation.scss

@@ -0,0 +1,89 @@
+.nav {
+
+    .nav-subheader {
+        display: flex;
+        align-items: center;
+        height: 56px;
+        color: rgba(0, 0, 0, .54);
+        font-weight: 500;
+        padding-left: 24px;
+        white-space: nowrap;
+    }
+
+    .nav-item {
+
+        .nav-link {
+            text-decoration: none;
+            display: flex;
+            align-items: center;
+            height: 48px;
+            padding: 0 24px;
+            position: relative;
+            overflow: hidden;
+            cursor: pointer;
+            user-select: none;
+            color: rgba(0, 0, 0, .87);
+
+            > span {
+                flex: 1;
+                white-space: nowrap;
+            }
+
+            &:hover {
+                background-color: map-get($background, hover);
+            }
+
+            .mat-ripple-element {
+                background-color: map-get($background, hover);
+            }
+
+            &.active {
+                background-color: mat-color($accent);
+
+                .mat-ripple-element {
+                    background-color: mat-color($accent, default-contrast, 0.1);
+                }
+
+                &, .nav-link-icon {
+                    color: mat-color($accent, default-contrast);
+                }
+            }
+
+            .nav-link-icon {
+                margin-right: 16px;
+            }
+
+            .nav-link-icon,
+            .collapse-arrow {
+                font-size: 16px;
+                width: 16px;
+                height: 16px;
+                line-height: 16px;
+                color: map_get($mat-light-theme-foreground, icon);;
+            }
+        }
+
+        &.nav-collapse {
+
+            > .children {
+
+                > .nav-item {
+
+                    > .nav-link {
+                        padding-left: 56px;
+                    }
+
+                    > .children {
+
+                        > .nav-item {
+
+                            > .nav-link {
+                                padding-left: 72px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

src/app/fuse-fake-db/mail.ts

@@ -467,43 +467,43 @@ export class MailFakeDb
             'id'    : 0,
             'handle': 'inbox',
             'title' : 'Inbox',
-            'icon'  : 'icon-inbox'
+            'icon'  : 'inbox'
         },
         {
             'id'    : 1,
             'handle': 'sent',
             'title' : 'Sent',
-            'icon'  : 'icon-send'
+            'icon'  : 'send'
         },
         {
             'id'    : 2,
             'handle': 'drafts',
             'title' : 'Drafts',
-            'icon'  : 'icon-email-open'
+            'icon'  : 'email_open'
         },
         {
             'id'    : 3,
             'handle': 'spam',
             'title' : 'Spam',
-            'icon'  : 'icon-alert-octagon'
+            'icon'  : 'error'
         },
         {
             'id'    : 4,
             'handle': 'trash',
             'title' : 'Trash',
-            'icon'  : 'icon-delete'
+            'icon'  : 'delete'
         },
         {
             'id'    : 5,
             'handle': 'starred',
             'title' : 'Starred',
-            'icon'  : 'icon-star'
+            'icon'  : 'star'
         },
         {
             'id'    : 6,
             'handle': 'important',
             'title' : 'Important',
-            'icon'  : 'icon-label'
+            'icon'  : 'label'
         }
     ];
 
@@ -512,25 +512,25 @@ export class MailFakeDb
             'id'    : 0,
             'handle': 'note',
             'title' : 'Note',
-            'color' : 'md-green-600-bg'
+            'color' : '#7cb342'
         },
         {
             'id'    : 1,
             'handle': 'paypal',
             'title' : 'Paypal',
-            'color' : 'md-orange-800-bg'
+            'color' : '#d84315'
         },
         {
             'id'    : 2,
             'handle': 'invoice',
             'title' : 'Invoice',
-            'color' : 'md-blue-grey-500-bg'
+            'color' : '#607d8b'
         },
         {
             'id'    : 3,
             'handle': 'amazon',
             'title' : 'Amazon',
-            'color' : 'md-blue-500-bg'
+            'color' : '#03a9f4'
         }
     ];
 }

src/app/main/apps/mail/sidenavs/main/main-sidenav.component.html

@@ -22,21 +22,26 @@
 <!-- SIDENAV CONTENT -->
 <div class="content" perfect-scrollbar>
 
-    <md-list>
+    <div class="nav">
-        <div md-subheader>FOLDERS</div>
-        <md-list-item *ngFor="let folder of folders">
-            <a md-line [routerLink]="'/apps/mail/' + folder.handle">
-                {{ folder.title }}
-            </a>
-        </md-list-item>
 
-        <div md-subheader>LABELS</div>
+        <div class="nav-subheader">FOLDERS</div>
-        <md-list-item *ngFor="let label of labels">
-            <a md-line [routerLink]="'/apps/mail/label/' + label.handle">
-                {{ label.title }}
-            </a>
-        </md-list-item>
-    </md-list>
 
+        <div class="nav-item" *ngFor="let item of folders">
+            <a class="nav-link" md-ripple [routerLink]="'/apps/mail/' + item.handle">
+                <md-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</md-icon>
+                <span>{{item.title}}</span>
+            </a>
+        </div>
+
+        <div class="nav-subheader">LABELS</div>
+
+        <div class="nav-item" *ngFor="let item of labels">
+            <a class="nav-link" md-ripple [routerLink]="'/apps/mail/label/' + item.handle">
+                <md-icon class="nav-link-icon" [ngStyle]="{'color':item.color}">label</md-icon>
+                <span>{{item.title}}</span>
+            </a>
+        </div>
+
+    </div>
 </div>
 <!-- / SIDENAV CONTENT -->

src/app/main/apps/mail/sidenavs/main/main-sidenav.component.scss

@@ -18,4 +18,8 @@
             }
         }
     }
+
+    .content {
+        padding: 0 !important;
+    }
 }