Make layout-responsive

FawzyMokhtar · FawzyMokhtar · commit e7e7c129cbdd · 2019-08-08T01:51:35.000+02:00
diff --git a/angular.json b/angular.json
@@ -51,9 +51,11 @@
             "aot": false,
             "assets": [
               "src/favicon.ico",
+              "src/favicon.svg",
               "src/assets"
             ],
             "styles": [
+              "node_modules/font-awesome/scss/font-awesome.scss",
               "src/styles/styles.scss"
             ],
             "scripts": []
@@ -116,9 +118,11 @@
             "karmaConfig": "karma.conf.js",
             "assets": [
               "src/favicon.ico",
+              "src/favicon.svg",
               "src/assets"
             ],
             "styles": [
+              "node_modules/font-awesome/scss/font-awesome.scss",
               "src/styles/styles.scss"
             ],
             "scripts": []
@@ -153,4 +157,4 @@
     }
   },
   "defaultProject": "documentation-website"
-}
+}
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "@angular/platform-browser-dynamic": "~8.2.0",
     "@angular/router": "^8.2.0",
     "bootstrap": "^4.3.1",
+    "font-awesome": "^4.7.0",
     "rxjs": "~6.4.0",
     "tslib": "^1.10.0",
     "zone.js": "~0.9.1"
diff --git a/src/app/main/components/footer/footer.component.html b/src/app/main/components/footer/footer.component.html
@@ -3,15 +3,28 @@
         <nav class="navbar">
             <div class="nav-item">
                 <span class="nav-link section-title">Docs</span>
-                <a routerLink="/" class="nav-link">Getting Started</a>
+                <a routerLink="/" class="nav-link">
+                    <i class="fa fa-play-circle-o"></i>
+                    Getting Started
+                </a>
             </div>
             <div class="nav-item">
                 <span class="nav-link section-title">Community</span>
-                <a routerLink="/" class="nav-link">Stack Overflow</a>
+                <a routerLink="/" class="nav-link">
+                    <i class="fa fa-stack-overflow"></i>
+                    Stack Overflow
+                </a>
             </div>
             <div class="nav-item">
                 <span class="nav-link section-title">More</span>
-                <a routerLink="/" class="nav-link">GitHub</a>
+                <a routerLink="/" class="nav-link">
+                    <i class="fa fa-github"></i>
+                    GitHub
+                </a>
+                <a routerLink="/" class="nav-link">
+                    <i class="fa fa-download"></i>
+                    Nuget
+                </a>
             </div>
         </nav>
     </div>
diff --git a/src/app/main/components/post/post.component.html b/src/app/main/components/post/post.component.html
@@ -1,7 +1,10 @@
 <div class="post">
     <header class="post-header">
         <h1 class="post-header-text">Section 1</h1>
-        <a class="edit-button button" routerLink="/">Edit</a>
+        <a class="edit-button button" routerLink="/">
+            <i class="fa fa-pencil"></i>
+            Edit
+        </a>
     </header>
     <article>
         <h1 id="section1">Section 1 anchor.......</h1>
diff --git a/src/app/main/components/side-nav/side-nav.component.html b/src/app/main/components/side-nav/side-nav.component.html
@@ -1,49 +1,73 @@
-<div class="side-nav">
+<div class="side-nav collapsed" id="side-nav">
     <nav class="navbar">
         <div class="nav-item">
-            <h3 class="section-title">Section 1</h3>
+            <h3 class="section-title">
+                <i class="fa fa-leanpub"></i>
+                Section 1
+            </h3>
             <a class="nav-link" routerLink="/" routerLinkActive="active">Link 1</a>
             <a class="nav-link" routerLink="/link1" routerLinkActive="active">Link 2</a>
             <a class="nav-link" routerLink="/link1" routerLinkActive="active">Link 3</a>
         </div>
         <div class="nav-item">
-            <h3 class="section-title">Section 2</h3>
+            <h3 class="section-title">
+                <i class="fa fa-leanpub"></i>
+                Section 2
+            </h3>
             <a class="nav-link" routerLink="/link1" routerLinkActive="active">Link 1</a>
             <a class="nav-link" routerLink="/link1" routerLinkActive="active">Link 2</a>
             <a class="nav-link" routerLink="/link1" routerLinkActive="active">Link 3</a>
         </div>
         <div class="nav-item">
-            <h3 class="section-title">Section 2</h3>
+            <h3 class="section-title">
+                <i class="fa fa-leanpub"></i>
+                Section 3
+            </h3>
             <a class="nav-link" routerLink="/link1" routerLinkActive="active">Link 1</a>
             <a class="nav-link" routerLink="/link1" routerLinkActive="active">Link 2</a>
             <a class="nav-link" routerLink="/link1" routerLinkActive="active">Link 3</a>
         </div>
         <div class="nav-item">
-            <h3 class="section-title">Section 2</h3>
+            <h3 class="section-title">
+                <i class="fa fa-leanpub"></i>
+                Section 4
+            </h3>
             <a class="nav-link" routerLink="/link1" routerLinkActive="active">Link 1</a>
             <a class="nav-link" routerLink="/link1" routerLinkActive="active">Link 2</a>
             <a class="nav-link" routerLink="/link1" routerLinkActive="active">Link 3</a>
         </div>
         <div class="nav-item">
-            <h3 class="section-title">Section 2</h3>
+            <h3 class="section-title">
+                <i class="fa fa-leanpub"></i>
+                Section 5
+            </h3>
             <a class="nav-link" routerLink="/link1" routerLinkActive="active">Link 1</a>
             <a class="nav-link" routerLink="/link1" routerLinkActive="active">Link 2</a>
             <a class="nav-link" routerLink="/link1" routerLinkActive="active">Link 3</a>
         </div>
         <div class="nav-item">
-            <h3 class="section-title">Section 2</h3>
+            <h3 class="section-title">
+                <i class="fa fa-leanpub"></i>
+                Section 6
+            </h3>
             <a class="nav-link" routerLink="/link1" routerLinkActive="active">Link 1</a>
             <a class="nav-link" routerLink="/link1" routerLinkActive="active">Link 2</a>
             <a class="nav-link" routerLink="/link1" routerLinkActive="active">Link 3</a>
         </div>
         <div class="nav-item">
-            <h3 class="section-title">Section 2</h3>
+            <h3 class="section-title">
+                <i class="fa fa-leanpub"></i>
+                Section 7
+            </h3>
             <a class="nav-link" routerLink="/link1" routerLinkActive="active">Link 1</a>
             <a class="nav-link" routerLink="/link1" routerLinkActive="active">Link 2</a>
             <a class="nav-link" routerLink="/link1" routerLinkActive="active">Link 3</a>
         </div>
         <div class="nav-item">
-            <h3 class="section-title">Section 2</h3>
+            <h3 class="section-title">
+                <i class="fa fa-leanpub"></i>
+                Section 8
+            </h3>
             <a class="nav-link" routerLink="/link1" routerLinkActive="active">Link 1</a>
             <a class="nav-link" routerLink="/link1" routerLinkActive="active">Link 2</a>
             <a class="nav-link" routerLink="/link1" routerLinkActive="active">Link 3</a>
diff --git a/src/app/main/components/top-nav/top-nav.component.html b/src/app/main/components/top-nav/top-nav.component.html
@@ -1,16 +1,24 @@
 <div class="top-nav fixed-top">
-    <nav>
-        <div class="navbar">
-            <a class="logo" routerLink="/">
-                <img src="favicon.ico" alt="">
-                <span class="logo-text">DotNet Validator</span>
+    <nav class="navbar">
+        <div class="navbar-brand">
+            <a routerLink="">
+                <img src="favicon.svg" alt="">
+                <span class="brand-text">DotNet Validator</span>
             </a>
-        </div>
-        <div class="navbar version-wrapper">
             <a routerLink="/versions" class="version">1.0.0</a>
         </div>
-        <div class="navbar navbar-right">
-            <a routerLink="">GitHub</a>
+        <div class="navbar-nav">
+            <a routerLink="" class="nav-link">
+                <i class="fa fa-github"></i>
+                GitHub
+            </a>
+            <a routerLink="" class="nav-link">
+                <i class="fa fa-download"></i>
+                Download
+            </a>
+            <button class="navbar-toggler" type="button" (click)="onSideNavCollapse()">
+                <i class="fa fa-bars"></i>
+            </button>
         </div>
     </nav>
 </div>
diff --git a/src/app/main/components/top-nav/top-nav.component.ts b/src/app/main/components/top-nav/top-nav.component.ts
@@ -1,9 +1,14 @@
-import { Component, OnInit } from "@angular/core";
+import {Component} from "@angular/core";
 
 @Component({
   selector: "app-top-nav",
   templateUrl: "./top-nav.component.html",
   styleUrls: ["./top-nav.component.sass"]
 })
 export class TopNavComponent {
+
+  onSideNavCollapse() {
+    // Toggle collapsed class to side-nav
+    document.getElementById("side-nav").classList.toggle("collapsed");
+  }
 }
diff --git a/src/app/main/containers/layout/layout.component.html b/src/app/main/containers/layout/layout.component.html
@@ -5,7 +5,7 @@
         <app-top-nav></app-top-nav>
         <!-- End Top Nav -->
 
-        <div class="main d-flex flex-direction-row">
+        <div class="main-content d-flex flex-direction-row" id="main-content">
             <!-- Side Nav -->
             <app-side-nav></app-side-nav>
             <!-- EndSide Nav -->
diff --git a/src/app/main/containers/layout/layout.component.ts b/src/app/main/containers/layout/layout.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from "@angular/core";
+import {Component} from "@angular/core";
 
 @Component({
   selector: "app-layout",
diff --git a/src/app/main/main-routing.module.ts b/src/app/main/main-routing.module.ts
@@ -1,5 +1,5 @@
-import { NgModule } from "@angular/core";
-import { RouterModule, Routes } from "@angular/router";
+import {NgModule} from "@angular/core";
+import {RouterModule, Routes} from "@angular/router";
 
 import * as fromContainers from "./containers";
 import * as fromComponents from "./components";
@@ -18,10 +18,10 @@ const routes: Routes = [
             // Automatic scrolling
             anchorScrolling: "enabled",
             // Use this value to scroll to the html element with a suitable view
-            scrollOffset: [0, 50]
+            scrollOffset: [0, 60]
         }
     )
     ],
     exports: [RouterModule]
 })
-export class MainRoutingModule { }
+export class MainRoutingModule {}
diff --git a/src/favicon.ico b/src/favicon.ico
diff --git a/src/favicon.svg b/src/favicon.svg
@@ -0,0 +1,20 @@
+<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg" style="vector-effect: non-scaling-stroke;" stroke="null">
+
+ <g stroke="null">
+  <title stroke="null">background</title>
+  <rect stroke="null" fill="none" id="canvas_background" height="502" width="502" y="-1" x="-1"/>
+ </g>
+ <g stroke="null">
+  <title stroke="null">Layer 1</title>
+  <path stroke="null" id="svg_3" fill="#ff007f" d="m22.490035,335.349471c-4.829756,0 -9.472795,-1.881397 -12.843796,-5.193556c-3.460079,-3.408397 -5.372417,-7.976315 -5.372417,-12.727927c0,-4.747311 1.912338,-9.315139 5.372417,-12.631689c6.742094,-6.720556 18.852141,-6.720556 25.683221,0c3.46445,3.31655 5.376789,7.971924 5.376789,12.631689c0,4.751613 -1.912338,9.31953 -5.28343,12.63608c-3.459988,3.404007 -8.107399,5.285404 -12.932783,5.285404z"/>
+  <path stroke="null" id="svg_11" fill="#ff007f" d="m480.168059,498.817514l-300.981275,0c-10.477995,0 -18.973455,-8.493346 -18.973455,-18.968737s8.49546,-18.968733 18.973455,-18.968733l282.007824,0l0,-420.516924l-420.626066,0l0,223.9941c0,10.475392 -8.495456,18.968737 -18.973451,18.968737s-18.973452,-8.493345 -18.973452,-18.968737l0,-242.962837c0,-10.475387 8.495456,-18.968733 18.973452,-18.968733l458.572967,0c10.477995,0 18.973455,8.493346 18.973455,18.968733l0,458.454394c0,10.475391 -8.49546,18.968737 -18.973455,18.968737z"/>
+  <text stroke="null" style="vector-effect: non-scaling-stroke;" transform="matrix(1,0,0,0.28639864921569824,0,41.40002836659551) " xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_12" y="52.76599" x="56.638609" stroke-opacity="null" stroke-width="0" fill="#000000"/>
+  <text stroke="null" transform="matrix(1.3750543249109877,0,0,0.914101621899265,-50.212796319241214,20.66347009232345) " xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="120" id="svg_13" y="202.892303" x="78.016102" stroke-opacity="null" stroke-width="0" fill="#ffffff">.NET</text>
+  <text font-weight="bold" stroke="null" transform="matrix(1.0665554293930228,0,0,1.8171750088647447,-36.21389373044204,-218.85830015139896) " xml:space="preserve" text-anchor="start" font-family="Oswald, sans-serif" font-size="80" id="svg_28" y="322.776002" x="93.556005" stroke-opacity="null" stroke-width="0" fill="#ffffff">Validator</text>
+  <path stroke="null" id="svg_29" fill="#ff007f" d="m23.030576,389.403519c-4.829755,0 -9.472795,-1.881397 -12.843796,-5.193556c-3.460079,-3.408398 -5.372417,-7.976315 -5.372417,-12.727928c0,-4.747311 1.912338,-9.315139 5.372417,-12.631689c6.742094,-6.720556 18.852141,-6.720556 25.683221,0c3.464451,3.31655 5.376789,7.971924 5.376789,12.631689c0,4.751613 -1.912338,9.31953 -5.283431,12.63608c-3.459987,3.404007 -8.107399,5.285404 -12.932783,5.285404z"/>
+  <path stroke="null" id="svg_30" fill="#ff007f" d="m22.219765,444.538648c-4.829755,0 -9.472795,-1.881397 -12.843796,-5.193556c-3.460079,-3.408398 -5.372417,-7.976315 -5.372417,-12.727928c0,-4.747311 1.912338,-9.315139 5.372417,-12.631689c6.742094,-6.720556 18.852141,-6.720556 25.683221,0c3.464451,3.31655 5.376789,7.971924 5.376789,12.631689c0,4.751613 -1.912338,9.31953 -5.283431,12.63608c-3.459987,3.404007 -8.107399,5.285404 -12.932783,5.285404z"/>
+  <path stroke="null" id="svg_31" fill="#ff007f" d="m22.490035,498.052152c-4.829755,0 -9.472795,-1.881397 -12.843796,-5.193556c-3.460079,-3.408398 -5.372417,-7.976315 -5.372417,-12.727928c0,-4.747311 1.912338,-9.315139 5.372417,-12.631689c6.742094,-6.720556 18.852141,-6.720556 25.683221,0c3.464451,3.31655 5.376789,7.971924 5.376789,12.631689c0,4.751613 -1.912338,9.31953 -5.283431,12.63608c-3.459987,3.404007 -8.107399,5.285404 -12.932783,5.285404z"/>
+  <path stroke="null" id="svg_32" fill="#ff007f" d="m72.352346,498.862963c-4.829755,0 -9.472795,-1.881397 -12.843796,-5.193556c-3.460079,-3.408398 -5.372417,-7.976315 -5.372417,-12.727928c0,-4.747311 1.912338,-9.315139 5.372417,-12.631689c6.742094,-6.720556 18.852141,-6.720556 25.683221,0c3.464451,3.31655 5.376789,7.971924 5.376789,12.631689c0,4.751613 -1.912338,9.31953 -5.283431,12.63608c-3.459987,3.404007 -8.107399,5.285404 -12.932783,5.285404z"/>
+  <path stroke="null" id="svg_33" fill="#ff007f" d="m125.055037,499.133233c-4.829755,0 -9.472795,-1.881397 -12.843796,-5.193556c-3.460079,-3.408398 -5.372417,-7.976315 -5.372417,-12.727928c0,-4.747311 1.912338,-9.315139 5.372417,-12.631689c6.742094,-6.720556 18.852141,-6.720556 25.683221,0c3.464451,3.31655 5.376789,7.971924 5.376789,12.631689c0,4.751613 -1.912338,9.31953 -5.283431,12.63608c-3.459987,3.404007 -8.107399,5.285404 -12.932783,5.285404z"/>
+ </g>
+</svg>
diff --git a/src/index.html b/src/index.html
@@ -14,4 +14,4 @@
   <app-root></app-root>
 </body>
 
-</html>
+</html>
diff --git a/src/styles/abstracts/_variables.scss b/src/styles/abstracts/_variables.scss
@@ -1,21 +1,26 @@
 /* Theme */
 $theme-color: #6b00b1 !default;
-$logo-text-font-size: 1.25rem !default;
+$brand-text-font-size: 1.25rem !default;
 $anchor-color: #ffffff !default;
 $anchor-hover-color: $theme-color !default;
 $anchor-inactive-color: #717378 !default;
 
 /* Top Navbar */
-$top-navbar-height: 3rem !default;
-$top-navbar-logo-img-width: 50px !default;
-$top-navbar-logo-img-height: 50px !default;
+$top-navbar-height: 4rem !default;
+$top-navbar-brand-img-width: 30px !default;
+$top-navbar-brand-img-height: 30px !default;
 $top-navbar-color: #ffffff !default;
 
+/* Main Content */
+$main-content-top-spacing: 2rem !default;
+
 /* Side Nav */
-$side-nav-width: 260px;
+$side-nav-width: 260px !default;
+$side-nav-expanded-bg: #ffffff !default;
+$side-nav-section-title-text-color: map-get($theme-colors, "primary") !default;
 
 /* Section Nav */
-$section-nav-width: 200px;
+$section-nav-width: 200px !default;
 
 /* Footer */
 $footer-bg: #20232a !default;
diff --git a/src/styles/components/_section-nav.scss b/src/styles/components/_section-nav.scss
@@ -1,6 +1,6 @@
 .section-nav {
   position: sticky;
-  top: 6rem;
+  top: calc(#{$top-navbar-height} + #{$main-content-top-spacing});
   right: 0;
   left: auto;
   max-height: calc(100vh - 3rem);
@@ -23,3 +23,9 @@
     }
   }
 }
+
+@include screen-max-md {
+  .section-nav {
+    display: none;
+  }
+}
diff --git a/src/styles/fonts/index.scss b/src/styles/fonts/index.scss
diff --git a/src/styles/layout/_content-wrapper.scss b/src/styles/layout/_content-wrapper.scss
@@ -1,5 +1,5 @@
 .content-wrapper {
-  padding: 2rem;
-  margin-top: 1rem;
+  padding: 0 2rem 2rem 2rem;
+  margin-top: calc(#{$top-navbar-height} - #{$main-content-top-spacing});
   width: 100%;
 }
diff --git a/src/styles/layout/_index.scss b/src/styles/layout/_index.scss
@@ -2,5 +2,6 @@
 @import "top-nav";
 @import "side-nav";
 @import "side-nav";
+@import "main-content";
 @import "content-wrapper";
 @import "footer";
diff --git a/src/styles/layout/_main-content.scss b/src/styles/layout/_main-content.scss
diff --git a/src/styles/layout/_side-nav.scss b/src/styles/layout/_side-nav.scss
@@ -1,17 +1,19 @@
 .side-nav {
   position: sticky;
   top: $top-navbar-height;
+  display: block;
   max-height: calc(100vh - #{$top-navbar-height});
-  padding-top: 3rem;
   max-width: $side-nav-width;
   min-width: $side-nav-width;
+  padding-top: calc(#{$top-navbar-height} - #{$main-content-top-spacing});
   overflow-y: auto;
+
   .navbar {
     display: block;
-    overflow-y: auto;
 
     .section-title {
       font-size: 1rem;
+      color: $side-nav-section-title-text-color;
     }
 
     a {
@@ -27,3 +29,17 @@
     }
   }
 }
+
+@include screen-max-md {
+  .side-nav {
+    position: fixed;
+    left: 0;
+    min-width: 100%;
+    min-height: 100vh;
+    background-color: $side-nav-expanded-bg;
+    z-index: 100;
+    &.collapsed {
+      display: none;
+    }
+  }
+}
diff --git a/src/styles/layout/_top-nav.scss b/src/styles/layout/_top-nav.scss
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { Component, OnInit } from "@angular/core";`
	`1`	`+import {Component} from "@angular/core";`
`2`	`2`
`3`	`3`	`@Component({`
`4`	`4`	`selector: "app-layout",`