diff --git a/src/app.py b/src/app.py
index 2aa5c33189fe281b2c710920980eb5dca8a1b9f2..e2d137424db7a1c5c84e983364ddb427b730800e 100644
--- a/src/app.py
+++ b/src/app.py
@@ -78,15 +78,25 @@ def index():
 
         return render_template('incidencias_cliente.html', incidencias=incidencias)
 
+@app.route('/incidencias_cerradas')
+@login_required
+def incidencias_cerradas():
+    incidencias = get_incidencias_cerradas()
+    return render_template('incidencias_cliente.html', incidencias=incidencias)
+
+
 @app.route('/incidencia/<idIncidencia>', methods=['GET', 'POST'])
 @login_required
 def incidencia(idIncidencia):
-    if request.method == 'POST':
-        tecnico = request.form['tecnicoAsignado']
-        cambio_estado_incidencia(idIncidencia, 1, tecnico)
-
     incidencia = get_incidencia(idIncidencia)
     listaTecnicos = get_tecnicos()
+    if request.method == 'POST':
+        if incidencia.estado==0:
+            tecnico = request.form['tecnicoAsignado']
+            cambio_estado_incidencia(idIncidencia, 1, tecnico)
+        elif incidencia.estado==1:
+            cambio_estado(idIncidencia, 2)
+
     return render_template('info_incidencia.html', incidencia=incidencia, listaTecnicos=listaTecnicos)
 
 @app.route('/registrar_incidencia', methods=['GET', 'POST'])
@@ -152,7 +162,7 @@ class Incidencia(db.Model):
     categoria = db.Column(db.String(40))
 
 class Cambio(db.Model):
-    fecha = db.Column(db.DateTime, primary_key=True)
+    fecha = db.Column(db.String(50), primary_key=True)
     estado = db.Column(db.Integer)
     tecnico = db.Column(db.String(50))
     incidencia = db.Column(db.Integer)
@@ -193,6 +203,9 @@ def cambio_estado(id,estado):
     incidencia.estado = estado
     db.session.commit()
 
+def get_incidencias_cerradas():
+    return list(Incidencia.query.filter(Incidencia.estado in (4,5)))
+
 def get_incidencias_by_user(userNick):
     return list(Incidencia.query.filter_by(reportadaPor=userNick))
 
diff --git a/src/static/menus/menu_cliente.html b/src/static/menus/menu_cliente.html
new file mode 100644
index 0000000000000000000000000000000000000000..ebd043f792706a8297c08055befac9380db194fd
--- /dev/null
+++ b/src/static/menus/menu_cliente.html
@@ -0,0 +1,16 @@
+<div class="list-group list-group-flush w-100 side-icons">
+    <a class="list-group-item d-flex justify-content-start align-items-center bg-light" href="/index">
+        <span class="material-icons" style="color: black;"></span>
+        <span class="collapse width align-top side-options">Inicio</span>
+    </a>
+
+    <a class="list-group-item d-flex justify-content-start align-items-center bg-light" href="/registrar_incidencia">
+        <span class="material-icons" style="color: black;"></span>
+        <span class="collapse width align-top side-options">Registrar Incidencia</span>
+    </a>
+
+    <a class="list-group-item d-flex justify-content-start align-items-center bg-light" href="/logout">
+        <span class="material-icons" style="color: black;"></span>
+        <span class="collapse width align-top side-options">Cerrar Sesión</span>
+    </a>
+</div>
diff --git a/src/static/menus/menu_supervisor.html b/src/static/menus/menu_supervisor.html
new file mode 100644
index 0000000000000000000000000000000000000000..ffc8719499396bd732b38d779bb55271b911db4a
--- /dev/null
+++ b/src/static/menus/menu_supervisor.html
@@ -0,0 +1,16 @@
+<div class="list-group list-group-flush w-100 side-icons">
+    <a class="list-group-item d-flex justify-content-start align-items-center bg-light" href="/index">
+        <span class="material-icons" style="color: black;"></span>
+        <span class="collapse width align-top side-options">Inicio</span>
+    </a>
+
+    <a class="list-group-item d-flex justify-content-start align-items-center bg-light" href="/incidencias_cerradas">
+        <span class="material-icons" style="color: black;"></span>
+        <span class="collapse width align-top side-options">Incidencias Cerradas</span>
+    </a>
+
+    <a class="list-group-item d-flex justify-content-start align-items-center bg-light" href="/logout">
+        <span class="material-icons" style="color: black;"></span>
+        <span class="collapse width align-top side-options">Cerrar sesión</span>
+    </a>
+</div>
diff --git a/src/static/menus/menu_tecnico.html b/src/static/menus/menu_tecnico.html
new file mode 100644
index 0000000000000000000000000000000000000000..e898c34246ec26a493293c9cee488c39c0b8f485
--- /dev/null
+++ b/src/static/menus/menu_tecnico.html
@@ -0,0 +1,21 @@
+<div class="list-group list-group-flush w-100 side-icons">
+    <a class="list-group-item d-flex justify-content-start align-items-center bg-light" href="/index">
+        <span class="material-icons" style="color: black;"></span>
+        <span class="collapse width align-top side-options">Inicio</span>
+    </a>
+
+    <a class="list-group-item d-flex justify-content-start align-items-center bg-light" href="/incidencias_cerradas">
+        <span class="material-icons" style="color: black;"></span>
+        <span class="collapse width align-top side-options">Incidencias Cerradas</span>
+    </a>
+
+    <a class="list-group-item d-flex justify-content-start align-items-center bg-light" href="/registrar_incidencia">
+        <span class="material-icons" style="color: black;"></span>
+        <span class="collapse width align-top side-options">Registrar Incidencia</span>
+    </a>
+
+    <a class="list-group-item d-flex justify-content-start align-items-center bg-light" href="/logout">
+        <span class="material-icons" style="color: black;"></span>
+        <span class="collapse width align-top side-options">Cerrar sesión</span>
+    </a>
+</div>
diff --git a/src/static/scripts/includeHTML.js b/src/static/scripts/includeHTML.js
new file mode 100644
index 0000000000000000000000000000000000000000..cc2081f8a1d1bcdbb2bbb19dc646427b6d5d095e
--- /dev/null
+++ b/src/static/scripts/includeHTML.js
@@ -0,0 +1,27 @@
+function includeHTML() {
+    var z, i, elmnt, file, xhttp;
+    /*loop through a collection of all HTML elements:*/
+    z = document.getElementsByTagName("*");
+    for (i = 0; i < z.length; i++) {
+        elmnt = z[i];
+        /*search for elements with a certain atrribute:*/
+        file = elmnt.getAttribute("w3-include-html");
+        if (file) {
+            /*make an HTTP request using the attribute value as the file name:*/
+            xhttp = new XMLHttpRequest();
+            xhttp.onreadystatechange = function() {
+                if (this.readyState == 4) {
+                    if (this.status == 200) {elmnt.innerHTML = this.responseText;}
+                    if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
+                    /*remove the attribute, and call this function once more:*/
+                    elmnt.removeAttribute("w3-include-html");
+                    includeHTML();
+                }
+            }      
+            xhttp.open("GET", file, true);
+            xhttp.send();
+            /*exit the function:*/
+            return;
+        }
+    }
+};
diff --git a/src/templates/incidencias_cliente.html b/src/templates/incidencias_cliente.html
index 592f8c22e8743fdf329fbdae0d837816a3a2dec7..83a27605909487764cc69edaf580632297ed0f1b 100644
--- a/src/templates/incidencias_cliente.html
+++ b/src/templates/incidencias_cliente.html
@@ -14,6 +14,7 @@
         crossorigin="anonymous">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP"
         crossorigin="anonymous">
+    <script src="{{ url_for('static', filename='scripts/includeHTML.js') }}"></script>
 </head>
 
 <body class="d-flex" style="min-height: 100%;min-width: 100%;">
@@ -24,36 +25,19 @@
         </div>
     </nav>
 
-    <div id="side-nav" class="side-nav fixed-top flex-nowrap flex-column justify-content-start d-inline-flex align-items-start bg-light"
-        onmouseover="openSide('side-nav')">
+    <div id="side-nav" class="side-nav fixed-top flex-nowrap flex-column justify-content-start d-inline-flex align-items-start bg-light" onmouseover="openSide('side-nav')">
         <div class="side-title side-content d-flex ">
             <img id="user-img" class="user-icon" src="../static/img/default-gravatar.png" alt="user icon">
-            <span class="collapse width align-self-center" style="min-width: 70%;padding-left: 5%">User Name</span>
+            <span class="collapse width align-self-center" style="min-width: 70%;padding-left: 5%;max-height: 10%">{{ current_user.nick }}</span>
         </div>
-        <div class="list-group list-group-flush w-100 side-icons">
-            <a class="list-group-item d-flex justify-content-start align-items-center bg-light">
-                <span class="material-icons" style="color: black;">person_add</span>
-                <span class="collapse width align-top side-options">Add User</span>
-            </a>
-            <a class="list-group-item d-flex justify-content-start align-items-center bg-light">
-                <span class="fa fa-plus-square fa-m" style="color: black;"></span>
-                <span class="collapse width align-top side-options">Item</span>
-            </a>
-            </a>
-            <a class="list-group-item d-flex justify-content-start align-items-center bg-light" href="/registrar_incidencia">
-                <span class="fas fa-project-diagram fa-m " style="color: gray;"></span>
-                <span class="collapse width align-top side-options">Registrar nueva incidencia</span>
-            </a>
 
-            <a class="list-group-item d-flex justify-content-start align-items-center bg-light">
-                <span class="fas fa-code fa-m " style="color: green;"></span>
-                <span class="collapse width align-top side-options">Ver estadisticas</span>
-            </a>
-            <a class="list-group-item d-flex justify-content-start align-items-center bg-light">
-                <span class="fas fa-code fa-m " style="color: grey;"></span>
-                <span class="collapse width align-top side-options">Filtros de incidencias</span>
-            </a>
-        </div>
+        {% if current_user.tipo == 0 %}
+        <div w3-include-html="{{ url_for('static', filename='menus/menu_supervisor.html') }}"></div>
+        {% elif current_user.tipo == 1 %}
+        <div w3-include-html="{{ url_for('static', filename='menus/menu_tecnico.html') }}"></div>
+        {% elif current_user.tipo == 2 %}
+        <div w3-include-html="{{ url_for('static', filename='menus/menu_cliente.html') }}"></div>
+        {% endif %}
     </div>
 
     <div id="data-body" class="container-fluid flex-grow-1" onmouseover="closeSide('side-nav')" >
@@ -134,6 +118,9 @@
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
         crossorigin="anonymous"></script>
 
+<script>
+includeHTML();
+</script>
 </body>
 
 </html>
diff --git a/src/templates/incidencias_supervisor.html b/src/templates/incidencias_supervisor.html
index 9f59bdab70f19f0baaff8433518264ed77e26c80..3aac04b27c65a9be64701445eccc5be7249ac901 100644
--- a/src/templates/incidencias_supervisor.html
+++ b/src/templates/incidencias_supervisor.html
@@ -14,6 +14,7 @@
         crossorigin="anonymous">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP"
         crossorigin="anonymous">
+    <script src="{{ url_for('static', filename='scripts/includeHTML.js') }}"></script>
 </head>
 
 <body class="d-flex" style="min-height: 100%;min-width: 100%;">
@@ -24,39 +25,19 @@
         </div>
     </nav>
 
-    <div id="side-nav" class="side-nav fixed-top flex-nowrap flex-column justify-content-start d-inline-flex align-items-start bg-light"
-        onmouseover="openSide('side-nav')">
+    <div id="side-nav" class="side-nav fixed-top flex-nowrap flex-column justify-content-start d-inline-flex align-items-start bg-light" onmouseover="openSide('side-nav')">
         <div class="side-title side-content d-flex ">
             <img id="user-img" class="user-icon" src="../static/img/default-gravatar.png" alt="user icon">
-            <span class="collapse width align-self-center" style="min-width: 70%;padding-left: 5%">User Name</span>
+            <span class="collapse width align-self-center" style="min-width: 70%;padding-left: 5%;max-height: 10%">{{ current_user.nick }}</span>
         </div>
-        <div class="list-group list-group-flush w-100 side-icons">
-            <a class="list-group-item d-flex justify-content-start align-items-center bg-light">
-                <span class="material-icons" style="color: black;">person_add</span>
-                <span class="collapse width align-top side-options">Add User</span>
-            </a>
-            <a class="list-group-item d-flex justify-content-start align-items-center bg-light">
-                <span class="fa fa-plus-square fa-m" style="color: black;"></span>
-                <span class="collapse width align-top side-options">Item</span>
-            </a>
-            <a class="list-group-item d-flex justify-content-start align-items-center bg-light">
-                <span class="fas fa-envelope fa-m" style="color: black;"></span>
-                <span class="collapse width align-top side-options">E-Mail</span>
-            </a>
-            <a class="list-group-item d-flex justify-content-start align-items-center bg-light">
-                <span class="fas fa-project-diagram fa-m " style="color: gray;"></span>
-                <span class="collapse width align-top side-options">Item</span>
-            </a>
 
-            <a class="list-group-item d-flex justify-content-start align-items-center bg-light">
-                <span class="fas fa-code fa-m " style="color: green;"></span>
-                <span class="collapse width align-top side-options">Item</span>
-            </a>
-            <a class="list-group-item d-flex justify-content-start align-items-center bg-light">
-                <span class="fas fa-code fa-m " style="color: grey;"></span>
-                <span class="collapse width align-top side-options">Item</span>
-            </a>
-        </div>
+        {% if current_user.tipo == 0 %}
+        <div w3-include-html="{{ url_for('static', filename='menus/menu_supervisor.html') }}"></div>
+        {% elif current_user.tipo == 1 %}
+        <div w3-include-html="{{ url_for('static', filename='menus/menu_tecnico.html') }}"></div>
+        {% elif current_user.tipo == 2 %}
+        <div w3-include-html="{{ url_for('static', filename='menus/menu_cliente.html') }}"></div>
+        {% endif %}
     </div>
 
     <div id="data-body" class="container-fluid flex-grow-1" onmouseover="closeSide('side-nav')" >
@@ -137,6 +118,9 @@
         crossorigin="anonymous"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
         crossorigin="anonymous"></script>
+<script>
+includeHTML();
+</script>
 
 </body>
 
diff --git a/src/templates/incidencias_tecnico.html b/src/templates/incidencias_tecnico.html
index 02b72613f389722ca50d1caaa2607b9b3837a9f6..929d53d9e8898428ede4e58126df9101e3e73497 100644
--- a/src/templates/incidencias_tecnico.html
+++ b/src/templates/incidencias_tecnico.html
@@ -14,6 +14,7 @@
         crossorigin="anonymous">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP"
         crossorigin="anonymous">
+    <script src="{{ url_for('static', filename='scripts/includeHTML.js') }}"></script>
 </head>
 
 <body class="d-flex" style="min-height: 100%;min-width: 100%;">
@@ -24,39 +25,19 @@
         </div>
     </nav>
 
-    <div id="side-nav" class="side-nav fixed-top flex-nowrap flex-column justify-content-start d-inline-flex align-items-start bg-light"
-        onmouseover="openSide('side-nav')">
+    <div id="side-nav" class="side-nav fixed-top flex-nowrap flex-column justify-content-start d-inline-flex align-items-start bg-light" onmouseover="openSide('side-nav')">
         <div class="side-title side-content d-flex ">
             <img id="user-img" class="user-icon" src="../static/img/default-gravatar.png" alt="user icon">
-            <span class="collapse width align-self-center" style="min-width: 70%;padding-left: 5%">User Name</span>
+            <span class="collapse width align-self-center" style="min-width: 70%;padding-left: 5%;max-height: 10%">{{ current_user.nick }}</span>
         </div>
-        <div class="list-group list-group-flush w-100 side-icons">
-            <a class="list-group-item d-flex justify-content-start align-items-center bg-light">
-                <span class="material-icons" style="color: black;">person_add</span>
-                <span class="collapse width align-top side-options">Add User</span>
-            </a>
-            <a class="list-group-item d-flex justify-content-start align-items-center bg-light">
-                <span class="fa fa-plus-square fa-m" style="color: black;"></span>
-                <span class="collapse width align-top side-options">Item</span>
-            </a>
-            <a class="list-group-item d-flex justify-content-start align-items-center bg-light">
-                <span class="fas fa-envelope fa-m" style="color: black;"></span>
-                <span class="collapse width align-top side-options">E-Mail</span>
-            </a>
-            <a class="list-group-item d-flex justify-content-start align-items-center bg-light">
-                <span class="fas fa-project-diagram fa-m " style="color: gray;"></span>
-                <span class="collapse width align-top side-options">Item</span>
-            </a>
 
-            <a class="list-group-item d-flex justify-content-start align-items-center bg-light">
-                <span class="fas fa-code fa-m " style="color: green;"></span>
-                <span class="collapse width align-top side-options">Item</span>
-            </a>
-            <a class="list-group-item d-flex justify-content-start align-items-center bg-light">
-                <span class="fas fa-code fa-m " style="color: grey;"></span>
-                <span class="collapse width align-top side-options">Item</span>
-            </a>
-        </div>
+        {% if current_user.tipo == 0 %}
+        <div w3-include-html="{{ url_for('static', filename='menus/menu_supervisor.html') }}"></div>
+        {% elif current_user.tipo == 1 %}
+        <div w3-include-html="{{ url_for('static', filename='menus/menu_tecnico.html') }}"></div>
+        {% elif current_user.tipo == 2 %}
+        <div w3-include-html="{{ url_for('static', filename='menus/menu_cliente.html') }}"></div>
+        {% endif %}
     </div>
 
     <div id="data-body" class="container-fluid flex-grow-1" onmouseover="closeSide('side-nav')" >
@@ -158,6 +139,9 @@
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
         crossorigin="anonymous"></script>
 
+<script>
+includeHTML();
+</script>
 </body>
 
 </html>
diff --git a/src/templates/info_incidencia.html b/src/templates/info_incidencia.html
index 7cdb082aa7dae4e20e0c3e061c8ecb21abc51fb0..7419fc7bfa88c9843446813c7838f3a8095aaf01 100644
--- a/src/templates/info_incidencia.html
+++ b/src/templates/info_incidencia.html
@@ -14,6 +14,7 @@
         crossorigin="anonymous">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP"
         crossorigin="anonymous">
+    <script src="{{ url_for('static', filename='scripts/includeHTML.js') }}"></script>
 </head>
 
 <body class="d-flex" style="min-height: 100%;min-width: 100%;">
@@ -24,39 +25,19 @@
         </div>
     </nav>
 
-    <div id="side-nav" class="side-nav fixed-top flex-nowrap flex-column justify-content-start d-inline-flex align-items-start bg-light"
-        onmouseover="openSide('side-nav')">
+    <div id="side-nav" class="side-nav fixed-top flex-nowrap flex-column justify-content-start d-inline-flex align-items-start bg-light" onmouseover="openSide('side-nav')">
         <div class="side-title side-content d-flex ">
             <img id="user-img" class="user-icon" src="../static/img/default-gravatar.png" alt="user icon">
-            <span class="collapse width align-self-center" style="min-width: 70%;padding-left: 5%">User Name</span>
-        </div>
-        <div class="list-group list-group-flush w-100 side-icons">
-            <a class="list-group-item d-flex justify-content-start align-items-center bg-light">
-                <span class="material-icons" style="color: black;">person_add</span>
-                <span class="collapse width align-top side-options">Add User</span>
-            </a>
-            <a class="list-group-item d-flex justify-content-start align-items-center bg-light">
-                <span class="fa fa-plus-square fa-m" style="color: black;"></span>
-                <span class="collapse width align-top side-options">Item</span>
-            </a>
-            <a class="list-group-item d-flex justify-content-start align-items-center bg-light">
-                <span class="fas fa-envelope fa-m" style="color: black;"></span>
-                <span class="collapse width align-top side-options">E-Mail</span>
-            </a>
-            <a class="list-group-item d-flex justify-content-start align-items-center bg-light">
-                <span class="fas fa-project-diagram fa-m " style="color: gray;"></span>
-                <span class="collapse width align-top side-options">Item</span>
-            </a>
-
-            <a class="list-group-item d-flex justify-content-start align-items-center bg-light">
-                <span class="fas fa-code fa-m " style="color: green;"></span>
-                <span class="collapse width align-top side-options">Item</span>
-            </a>
-            <a class="list-group-item d-flex justify-content-start align-items-center bg-light">
-                <span class="fas fa-code fa-m " style="color: grey;"></span>
-                <span class="collapse width align-top side-options">Item</span>
-            </a>
+            <span class="collapse width align-self-center" style="min-width: 70%;padding-left: 5%;max-height: 10%">{{ current_user.nick }}</span>
         </div>
+
+        {% if current_user.tipo == 0 %}
+        <div w3-include-html="{{ url_for('static', filename='menus/menu_supervisor.html') }}"></div>
+        {% elif current_user.tipo == 1 %}
+        <div w3-include-html="{{ url_for('static', filename='menus/menu_tecnico.html') }}"></div>
+        {% elif current_user.tipo == 2 %}
+        <div w3-include-html="{{ url_for('static', filename='menus/menu_cliente.html') }}"></div>
+        {% endif %}
     </div>
 
     <div id="data-body" class="container-fluid flex-grow-1" onmouseover="closeSide('side-nav')" >
@@ -231,6 +212,9 @@
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
         crossorigin="anonymous"></script>
 
+<script>
+includeHTML();
+</script>
 </body>
 
 </html>
diff --git a/src/templates/registrar_incidencia.html b/src/templates/registrar_incidencia.html
index 1808e0d4e0854b9b3ab084eaf7084c273a73375c..aa213f247129c42fae4ec535397cd81220a1780d 100644
--- a/src/templates/registrar_incidencia.html
+++ b/src/templates/registrar_incidencia.html
@@ -15,6 +15,7 @@
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP"
         crossorigin="anonymous">
         <link rel="stylesheet" type="text/css" href="../static/css/formulario.css">
+    <script src="{{ url_for('static', filename='scripts/includeHTML.js') }}"></script>
 </head>
 
 <body class="d-flex" style="min-height: 100%;min-width: 100%;">
@@ -25,36 +26,19 @@
         </div>
     </nav>
 
-    <div id="side-nav" class="side-nav fixed-top flex-nowrap flex-column justify-content-start d-inline-flex align-items-start bg-light"
-        onmouseover="openSide('side-nav')">
+    <div id="side-nav" class="side-nav fixed-top flex-nowrap flex-column justify-content-start d-inline-flex align-items-start bg-light" onmouseover="openSide('side-nav')">
         <div class="side-title side-content d-flex ">
             <img id="user-img" class="user-icon" src="../static/img/default-gravatar.png" alt="user icon">
-            <span class="collapse width align-self-center" style="min-width: 70%;padding-left: 5%">User Name</span>
+            <span class="collapse width align-self-center" style="min-width: 70%;padding-left: 5%;max-height: 10%">{{ current_user.nick }}</span>
         </div>
-        <div class="list-group list-group-flush w-100 side-icons">
-            <a class="list-group-item d-flex justify-content-start align-items-center bg-light">
-                <span class="material-icons" style="color: black;">person_add</span>
-                <span class="collapse width align-top side-options">Add User</span>
-            </a>
-            <a class="list-group-item d-flex justify-content-start align-items-center bg-light">
-                <span class="fa fa-plus-square fa-m" style="color: black;"></span>
-                <span class="collapse width align-top side-options">Item</span>
-            </a>
-            </a>
-            <a class="list-group-item d-flex justify-content-start align-items-center bg-light" href="/registrar_nueva_incidencia">
-                <span class="fas fa-project-diagram fa-m " style="color: gray;"></span>
-                <span class="collapse width align-top side-options">Registrar nueva incidencia</span>
-            </a>
 
-            <a class="list-group-item d-flex justify-content-start align-items-center bg-light">
-                <span class="fas fa-code fa-m " style="color: green;"></span>
-                <span class="collapse width align-top side-options">Ver estadisticas</span>
-            </a>
-            <a class="list-group-item d-flex justify-content-start align-items-center bg-light">
-                <span class="fas fa-code fa-m " style="color: grey;"></span>
-                <span class="collapse width align-top side-options">Filtros de incidencias</span>
-            </a>
-        </div>
+        {% if current_user.tipo == 0 %}
+        <div w3-include-html="{{ url_for('static', filename='menus/menu_supervisor.html') }}"></div>
+        {% elif current_user.tipo == 1 %}
+        <div w3-include-html="{{ url_for('static', filename='menus/menu_tecnico.html') }}"></div>
+        {% elif current_user.tipo == 2 %}
+        <div w3-include-html="{{ url_for('static', filename='menus/menu_cliente.html') }}"></div>
+        {% endif %}
     </div>
 
     <div id="data-body" class="container-fluid flex-grow-1" onmouseover="closeSide('side-nav')" >
@@ -123,6 +107,9 @@
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
         crossorigin="anonymous"></script>
 
+<script>
+includeHTML();
+</script>
 </body>
 
 </html>