Many changes aded to system.

client/General/Home/home.html

@@ -1,6 +1,6 @@
 <template name="home">
     {{#if currentUser}}
-        <h1>This is Home.</h1>
+        <h1>Dashboard</h1>
     {{else}}
         {{#if $eq loginOrReg 'login'}}
             {{> login}}

client/General/headerbar.css

@@ -0,0 +1,62 @@
+ /* Basic styling for the navigation panel */
+.sidenav {
+    height: 100%;
+    width: 250px;
+    position: fixed;
+    z-index: 1;
+    top: 0;
+    left: -250px;
+    background-color: #333;
+    overflow-x: hidden;
+    transition: 0.5s;
+}
+
+.sidenav a {
+    padding: 16px 8px 16px 32px;
+    text-decoration: none;
+    font-size: 20px;
+    color: #f1f1f1;
+    display: block;
+    transition: 0.3s;
+}
+
+.sidenav a:hover {
+    background-color: #555;
+}
+
+/* Button to toggle the sidenav */
+.openbtn {
+    cursor: pointer;
+}
+
+.openbtn:hover {
+    background-color: #444;
+}
+
+.closeBtn {
+    position: absolute;
+    top: 10px;
+    right: 25px;
+    font-size: 24px !important;
+    margin-left: 50px;
+    cursor: pointer;
+}
+
+.closeBtn:hover {
+    background-color: #444;
+}
+
+/* Top section for title and other information */
+.top-section {
+    padding: 30px;
+    text-align: center;
+    background-color: #555;
+    color: white;
+    font-size: 24px;
+}
+
+/* On smaller screens, reduce the size of the sidenav button */
+@media screen and (max-height: 450px) {
+    .sidenav {padding-top: 15px;}
+    .sidenav a {font-size: 18px;}
+}

client/General/headerbar.html

@@ -1,24 +1,35 @@
 <template name="headerBar">
-        <nav>
-            <ul>
-                <li><h2>[Project Name]</h2></li>
-            </ul>
-            <ul>
-            {{#if currentUser}}
-                {{#if isInRole "systemadmin"}}
-                    <li><a href="#" id="manage" class="navBtn">Manage</a></li>
-                {{/if}}
-                <li class="signOut"><a href="#" class="signOut">Log Out</a></li>
-                   {{#if $eq updateExists true}}
-                    <li><a href="#!"><i class="material-icons" id='dashboard'>notifications</i></a></li>
-                    {{/if}}
-            {{else}}
-                {{#if $eq loginOrReg 'login'}}
-                    <li><a href="#!" id="reg" class="navBtn">Register</a></li>
-                {{else}}
-                    <li><a href="#!" id="login" class="navBtn">Sign In</a></li>
-                {{/if}}
+    <nav>
+        <ul>
+            <li><i class="material-icons openbtn" id="openNav">menu</i></li>
+        </ul>
+        <ul>
+            <li><h1>Open Asset</h1></li>
+        </ul>
+        <ul>
+            <li></li>
+        </ul>
+    </nav>
+
+    
+
+    <div id="mySidenav" class="sidenav">
+        <div class="top-section">Menu<i class="material-icons closeBtn" id="closeNav">close</i></div>
+        {{#if currentUser}}
+            <a href="#" class="navBtn" id="home">Home</a>
+            {{#if isInRole "systemadmin"}}
+                <a href="#" id="manage" class="navBtn">Manage</a>
             {{/if}}
-            </ul>
-        </nav>
+        
+            <a href="#">Clients</a>
+        <hr>
+        <a href="#" class="signOut">Sign Out</a>
+        {{else}}
+            {{#if $eq loginOrReg 'login'}}
+                <a href="#!" id="reg" class="navBtn">Register</a>
+            {{else}}
+                <a href="#!" id="login" class="navBtn">Sign In</a>
+            {{/if}}
+        {{/if}}
+    </div>
 </template>

client/General/headerbar.js

@@ -32,7 +32,7 @@ Template.headerBar.helpers({
 });
 
 Template.headerBar.events({
-	'click  .navBtn' (event) {
+	'click .navBtn' (event) {
         event.preventDefault();
         var clickedTarget = event.target.id;
         console.log("clicked " + clickedTarget);
@@ -56,5 +56,13 @@ Template.headerBar.events({
     'click #brandLogo' (event) {
         event.preventDefault();
         // FlowRouter.go('/dashboard');
-    }
+    },
+    'click #openNav' (event) {
+        let mySidenav = document.getElementById("mySidenav");
+        mySidenav.style.left = "0";
+    },
+    'click #closeNav' (event) {
+        let mySidenav = document.getElementById("mySidenav");
+        mySidenav.style.left = "-250px";
+    },
 });