(File Manager App) finished for now.

src/app/main/apps/file-manager/sidenavs/details/details.component.html

@@ -17,10 +17,10 @@
     </div>
 
     <div>
-        <div class="title">{{selected.name}}</div>
+        <div class="title mb-8">{{selected.name}}</div>
         <div class="subtitle secondary-text">
             <span>Edited</span>
-            : {{selected.modified}}
+            <span>: {{selected.modified}}</span>
         </div>
     </div>
 </div>
@@ -30,15 +30,14 @@
 <div class="content p-24" perfect-scrollbar>
 
     <div class="file-details">
+
         <div class="preview file-icon" fxLayout="row" fxLayoutAlign="center center">
-            <md-icon class="{{selected.type}} s-48"></md-icon>
+            <md-icon class="type-icon s-48" [class]="selected.type"></md-icon>
         </div>
 
-        <md-list class="offline-switch">
+        <div class="offline-switch">
-            <md-list-item>
+            <md-slide-toggle ([ngModel])="selected.offline" labelPosition="before">Available Offline</md-slide-toggle>
-                <md-slide-toggle ([ngModel])="selected.offline">Available Offline</md-slide-toggle>
+        </div>
-            </md-list-item>
-        </md-list>
 
         <div class="title">Info</div>
 

src/app/main/apps/file-manager/sidenavs/details/details.component.scss

@@ -5,12 +5,69 @@
     height: 100%;
 
     > .header {
-        flex: 0 1 200px;
+        flex: 0 1 auto;
-
+        height: 200px;
+        min-height: 200px;
+        max-height: 200px;
     }
 
     > .content {
         flex: 1 0 auto;
 
+        .file-details {
+
+            .preview {
+                height: 240px;
+            }
+
+            .offline-switch {
+                padding-bottom: 16px;
+                font-weight: 500;
+            }
+
+            .title {
+                padding: 16px 0;
+            }
+
+            table {
+                width: 100%;
+                text-align: left;
+
+                tr {
+
+                    th, td {
+                        padding: 16px 0;
+                    }
+
+                    th {
+
+                    }
+
+                    td {
+
+                    }
+
+                    &.type {
+                        text-transform: capitalize;
+                    }
+
+                    &.size {
+                    }
+
+                    &.location {
+                    }
+
+                    &.owner {
+                        text-transform: capitalize;
+                    }
+
+                    &.opened {
+                    }
+
+                    &.created {
+                    }
+                }
+            }
+        }
     }
 }

src/app/main/apps/file-manager/sidenavs/main/main.component.html

@@ -1,3 +1,54 @@
-<p>
+<!-- SIDENAV HEADER -->
-    main works!
+<div class="header p-24" fxLayout="column" fxLayoutAlign="space-between">
-</p>
+
+    <div class="logo" fxLayout="row" fxLayoutAlign="start center">
+        <md-icon class="logo-icon mr-16">folder</md-icon>
+        <span class="logo-text h1">File Manager</span>
+    </div>
+
+</div>
+<!-- / SIDENAV HEADER -->
+
+<!-- SIDENAV CONTENT -->
+<div class="content py-16" perfect-scrollbar>
+
+    <div class="nav">
+
+        <div class="nav-item" aria-label="inbox">
+            <a class="nav-link" md-ripple>
+                <md-icon class="nav-link-icon">folder</md-icon>
+                <span class="title">My Files</span>
+            </a>
+        </div>
+
+        <div class="nav-item" aria-label="starred">
+            <a class="nav-link" md-ripple>
+                <md-icon class="nav-link-icon">star</md-icon>
+                <div class="title">Starred</div>
+            </a>
+        </div>
+
+        <div class="nav-item" aria-label="starred">
+            <a class="nav-link" md-ripple>
+                <md-icon class="nav-link-icon">folder_shared</md-icon>
+                <div class="title">Sharred with me</div>
+            </a>
+        </div>
+
+        <div class="nav-item" aria-label="starred">
+            <a class="nav-link" md-ripple>
+                <md-icon class="nav-link-icon">access_time</md-icon>
+                <div class="title">Recent</div>
+            </a>
+        </div>
+
+        <div class="nav-item" aria-label="starred">
+            <a class="nav-link" md-ripple>
+                <md-icon class="nav-link-icon">not_interested</md-icon>
+                <div class="title">Offline</div>
+            </a>
+        </div>
+    </div>
+
+</div>
+<!-- / SIDENAV CONTENT -->

src/app/main/apps/file-manager/sidenavs/main/main.component.scss

@@ -0,0 +1,11 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    flex: 1 0 auto;
+    height: 100%;
+
+    > .header {
+        flex: 0 1 auto;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    }
+}