Hamburguer menu, actualizacion

diff --git a/partials/head.ejs b/partials/head.ejs
index 9d76f1eb9a656b71bf97d90c9d8eb7e29bb3fb63..9a12a0d327daa5a6eff7a4dd04f55c71eb8f6b6f 100644 (file)
--- a/partials/head.ejs
+++ b/partials/head.ejs
@@ -5,5 +5,138 @@
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
 <style>
-    body    { padding-bottom:50px; }
+  body {
+    padding-bottom: 50px;
+  }
+ /* de aca para abajo es para el hamburguer*/
+  a {
+    text-decoration: none;
+    color: #232323;
+
+    transition: color 0.3s ease;
+  }
+
+  a:hover {
+    color: tomato;
+  }
+
+  #menuToggle {
+    display: block;
+    position: relative;
+    top: 5px;
+    left: 15px;
+
+    z-index: 1;
+
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  #menuToggle input {
+    display: block;
+    width: 40px;
+    height: 32px;
+    position: absolute;
+    top: -7px;
+    left: -5px;
+
+    cursor: pointer;
+
+    opacity: 0;
+    /* hide this */
+    z-index: 2;
+    /* and place it over the hamburger */
+
+    -webkit-touch-callout: none;
+  }
+
+  /*
+ * Just a quick hamburger
+ */
+  #menuToggle span {
+    display: block;
+    width: 33px;
+    height: 4px;
+    margin-bottom: 5px;
+    position: relative;
+
+    background: #cdcdcd;
+    border-radius: 3px;
+
+    z-index: 1;
+
+    transform-origin: 4px 0px;
+
+    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
+      background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
+      opacity 0.55s ease;
+  }
+
+  #menuToggle span:first-child {
+    transform-origin: 0% 0%;
+  }
+
+  #menuToggle span:nth-last-child(2) {
+    transform-origin: 0% 100%;
+  }
+
+  /*
+ * Transform all the slices of hamburger
+ * into a crossmark.
+ */
+  #menuToggle input:checked~span:nth-last-child(4) {
+    transform: translate(-7px, 8px) rotate(-45deg) scale(0.5, 0.8);
+    background: #ffcdcd;
+  }
+
+  /*
+ * But let's hide the middle one.
+ */
+  #menuToggle input:checked~span:nth-last-child(3) {
+    transform: translate(-5px, 0px) rotate(0deg) scale(0.7, 0.7);
+    background: #ffcdcd;
+  }
+
+  /*
+ * Ohyeah and the last one should go the other direction
+ */
+   #menuToggle input:checked~span:nth-last-child(2) {
+    transform: translate(-5px, -10px) rotate(45deg) scale(0.5, 0.8);
+    background: #ffcdcd;
+  }
+
+  /*
+ * Make this absolute positioned
+ * at the top left of the screen
+ */
+  #menu {
+    position: absolute;
+    width: 300px;
+    margin: -100px 0 0 -50px;
+    padding: 50px;
+    padding-top: 125px;
+    height:120vh;
+    background: #343a40;
+    list-style-type: none;
+    -webkit-font-smoothing: antialiased;
+    /* to stop flickering of text in safari */
+
+    transform-origin: 0% 0%;
+    transform: translate(-100%, 0);
+
+    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
+  }
+
+  #menu li {
+    padding: 10px 0;
+    font-size: 22px;
+    color: white;
+  }
+
+  /*
+ * And let's slide it in from the left
+ */
+  #menuToggle input:checked~ul {
+    transform: none;
+  }
 </style>

diff --git a/partials/header.ejs b/partials/header.ejs
index c85150427b0b1653406a043bd66be91d4c89d7c7..8f180d9060fcd1fd310da821f33c18d4231ad21f 100644 (file)
--- a/partials/header.ejs
+++ b/partials/header.ejs
@@ -1,7 +1,36 @@
+<nav role="navigation" class="navbar navbar-dark bg-dark">
+<div id="menuToggle">
+  <!--
+  A fake / hidden checkbox is used as click reciever,
+  so you can use the :checked selector on it.
+  -->
+  <input type="checkbox" />
 
+  <!--
+  Some spans to act as a hamburger.
 
-<nav class="navbar navbar-dark bg-dark">
-  <form class="form-inline">
-    <button class="btn btn-outline-success" type="button" onclick="location.href = '/';">VSoRC</button>
-  </form>
+  They are acting like a real hamburger,
+  not that McDonalds stuff.
+  -->
+  <span></span>
+  <span></span>
+  <span></span>
+
+  <!--
+  Too bad the menu has to be inside of the button
+  but hey, it's pure CSS magic.
+  -->
+  <ul id="menu">
+    <a href="/index"><li>Salud</li></a>
+    <a href="/visualize"><li>Visualizador</li></a>
+    <a href="/stats"><li>Estadisticas</li></a>
+    <a href="/starter"><li>Inicializador</li></a>
+    <a href="/Access"><li>Acceso</li></a>
+    <a href="/Topology"><li>Crear topologia</li></a>
+    <a href="https://localhost:8080/" target="_blank"><li>Pagina local</li></a>
+  </ul>
+</div>
+<form class="form-inline">
+  <button class="btn btn-outline-success" type="button" onclick="location.href = '/';">VSoRC</button>
+</form>
 </nav>