Add basic dashboard functionality

dvw16101 · Dec 6, 2020 · 75ef90b · 75ef90b
1 parent 84b477b
commit 75ef90b
Show file tree

Hide file tree

Showing 2 changed files with 96 additions and 4 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -10345,4 +10345,69 @@ body {
 
 .footer {
   padding: 5rem 0;
+}
+
+/* The sidebar menu */
+.sidebar {
+  height: 100%; /* 100% Full-height */
+  width: 0; /* 0 width - change this with JavaScript */
+  position: fixed; /* Stay in place */
+  z-index: 1; /* Stay on top */
+  top: 0;
+  left: 0;
+  background-color: #111; /* Black*/
+  opacity:0.5;
+  overflow-x: hidden; /* Disable horizontal scroll */
+  padding-top: 60px; /* Place content 60px from the top */
+  transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
+}
+
+/* The sidebar links */
+.sidebar a {
+  padding: 8px 8px 8px 32px;
+  text-decoration: none;
+  font-size: 25px;
+  color: #818181;
+  display: block;
+  transition: 0.3s;
+}
+
+/* When you mouse over the navigation links, change their color */
+.sidebar a:hover {
+  color: #f1f1f1;
+}
+
+/* Position and style the close button (top right corner) */
+.sidebar .closebtn {
+  position: absolute;
+  top: 0;
+  right: 25px;
+  font-size: 36px;
+  margin-left: 50px;
+}
+
+/* The button used to open the sidebar */
+.openbtn {
+  font-size: 20px;
+  cursor: pointer;
+  background-color: #111;
+  color: white;
+  padding: 10px 15px;
+  border: none;
+}
+
+.openbtn:hover {
+  background-color: #444;
+}
+
+/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
+#main {
+  transition: margin-left .5s; /* If you want a transition effect */
+  padding: 20px;
+}
+
+/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
+@media screen and (max-height: 450px) {
+  .sidebar {padding-top: 15px;}
+  .sidebar a {font-size: 18px;}
 }
diff --git a/index.html b/index.html
@@ -23,6 +23,7 @@
     </head>
     <body id="page-top">
         <!-- Navigation-->
+        <!--
         <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
             <div class="container">
                 <a class="navbar-brand js-scroll-trigger" href="#page-top">Network Simulation</a>
@@ -39,6 +40,7 @@
                 </div>
             </div>
         </nav>
+    -->
         <!-- Masthead-->
         <header class="masthead">
             <div class="container d-flex h-100 align-items-center">
@@ -50,8 +52,10 @@ <h2 class="text-white-50 mx-auto mt-2 mb-5">DDD Filter applications in the Netwo
                     <a class="btn btn-primary js-scroll-trigger" href="#projects">Get Started</a>
                 </div>
             </div>
+
         </header>
         <!-- About-->
+        <!--
         <section class="about-section text-center" id="about">
             <div class="container">
                 <div class="row">
@@ -64,11 +68,15 @@ <h2 class="text-white mb-4">DDD Filter applications in the Network</h2>
                 </div>
                 <img class="img-fluid" src="assets/img/ipad.png" alt="" />
             </div>
-        </section>
+        </section> -->
         <!-- Projects-->
         <section class="projects-section bg-light" id="projects">
                   <center>
-                  <form>
+
+                  <!--THIS IS THE SIDEBAR. I ALSO ADDED THE BUTTONS TO IT AS WELL-->
+                  <div id="mySidebar" class="sidebar">
+                    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
+                <form>
                       <label>Number of Packets:</label><br>
                       <input type="number" id="npackets" name="npackets" value=3><br>
 
@@ -82,13 +90,32 @@ <h2 class="text-white mb-4">DDD Filter applications in the Network</h2>
                   <div class="slidecontainer">
                     <input type="range" min="1" max="5" value="1" class="slider" id="myRange">
                   </div>
-
-
                   <p><button onclick="startSimulation()">Start Simulation</button></p>
                   <p><button onclick="pauseSimulation()">Pause Simulation</button></p>
                   <p><button onclick="resumeSimulation()">Resume Simulation</button></p>
                   <p><button onclick="stopSimulation()">Stop Simulation</button></p>
+                  </div>
+
+                  <div id="main">
+                    <button class="openbtn" onclick="openNav()">☰ Dashboard</button>  
+                  </div>
+
+                  <script>
+                    function openNav() {
+                      document.getElementById("mySidebar").style.width = "450px";
+                      document.getElementById("main").style.marginLeft = "250px";
+                    }
+
+                    function closeNav() {
+                      document.getElementById("mySidebar").style.width = "0";
+                      document.getElementById("main").style.marginLeft= "0";
+                    }
+                    </script>
+
+                <!--END OF THE SIDEBAR LOGIC-->
+
                   <canvas id="canvas"></canvas>
+
                   <script type="module" src="js/canvas.js">
 
                   </script>