psicoadmin/header.php

            <nav class="navbar navbar-expand-lg navbar-light">
                <div class="container-fluid">

                    <button type="button" id="sidebarCollapse" class="btncollapse">
                        <i class="fas fa-bars"></i>
                    </button>
                    <button type="button" id="dashboardfull" class="btncollapse" onclick="openFullscreen();">
                        <i class="fa fa-expand" aria-hidden="true"></i>
                    </button>
                    <button class="btn btn-dark d-inline-block d-lg-none ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <i class="fas fa-align-justify"></i>
                    </button>

                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="nav navbar-nav ml-auto">
                            <li class="nav-item">
                                <a class="nav-link" id="dropdownNotificaciones" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="far fa-bell"></i></a>
                                <div class="dropdown-menu dropdown-menu-right dropdown_noti" aria-labelledby="dropdownNotificaciones">
                                    <div class="body_drop_notification">
                                        <div class="row">
                                            <div class="col-md-2">
                                                <div class="rounded-pic">
                                                    <img src="images/man.png" alt="">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <h1>Fernando Vásquez</h1>
                                                <p>He cambiado el nombre de una plaza manualmente.</p>
                                            </div>
                                            <div class="col-md-4 panel_time_notification">
                                                <a href="#" data-toggle="modal" data-target="#verNotificacion"><p>Hace 20 segundos.</p></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="body_drop_notification">
                                        <div class="row">
                                            <div class="col-md-2">
                                                <div class="rounded-pic">
                                                    <img src="images/man.png" alt="">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <h1>Fernando Vásquez</h1>
                                                <p>He cambiado el nombre de una plaza manualmente.</p>
                                            </div>
                                            <div class="col-md-4 panel_time_notification">
                                                <a href="#" data-toggle="modal" data-target="#verNotificacion"><p>Hace 20 segundos.</p></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="body_drop_notification">
                                        <div class="row">
                                            <div class="col-md-2">
                                                <div class="rounded-pic">
                                                    <img src="images/man.png" alt="">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <h1>Fernando Vásquez</h1>
                                                <p>He cambiado el nombre de una plaza manualmente.</p>
                                            </div>
                                            <div class="col-md-4 panel_time_notification">
                                                <a href="#" data-toggle="modal" data-target="#verNotificacion"><p>Hace 20 segundos.</p></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="body_drop_notification">
                                        <div class="row">
                                            <div class="col-md-2">
                                                <div class="rounded-pic">
                                                    <img src="images/man.png" alt="">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <h1>Fernando Vásquez</h1>
                                                <p>He cambiado el nombre de una plaza manualmente.</p>
                                            </div>
                                            <div class="col-md-4 panel_time_notification">
                                                <a href="#" data-toggle="modal" data-target="#verNotificacion"><p>Hace 20 segundos.</p></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="body_drop_notification">
                                        <div class="row">
                                            <div class="col-md-2">
                                                <div class="rounded-pic">
                                                    <img src="images/man.png" alt="">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <h1>Fernando Vásquez</h1>
                                                <p>He cambiado el nombre de una plaza manualmente.</p>
                                            </div>
                                            <div class="col-md-4 panel_time_notification">
                                                <a href="#" data-toggle="modal" data-target="#verNotificacion"><p>Hace 20 segundos.</p></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="nav-item">
                                <a class="btn-drop" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <div class="rounded-pic">
                                        <img src="images/man.png" alt="">
                                    </div>
                                </a>
                                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
                                    <a class="dropdown-item" href="perfil.php">Perfil</a>
                                    <a class="dropdown-item" href="configuraciones.php">Configuraciones</a>
                                    <a class="dropdown-item" href="login.php">Cerrar sesión</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>

            <div class="header_mobile">
                <div class="logo-section">
                   <a href="index.php"><img src="images/logo.png"></a>
                </div>
                <div class="column">
                    <div id="dl-menu" class="dl-menuwrapper">
                        <button class="dl-trigger"></button>
                        <ul class="dl-menu">
                            <li>
                                <a href="index.php">Inicio</a>
                            </li>
                            <li>
                               <a href="puestos.php">Puestos</a>
                            </li>
                            <li>
                                <a href="contraseñas.php">Contraseñas</a>
                            </li>
                            <li>
                               <a href="expedientes.php">Expedientes</a>
                            </li>
                            <li>
                               <a href="resultados.php">Resultados</a>
                            </li>
                            <li>
                               <a href="contraseñas.php">Contraseñas</a>
                            </li>
                            <li>
                                <a href="#">Pruebas<i class="fa fa-angle-right" aria-hidden="true"></i></a>
                                <ul class="dl-submenu">
                                    <li>
                                        <a href="#">Crear prueba</a>
                                    </li>
                                    <li>
                                        <a href="#">Listado de pruebas</a>
                                    </li>
                                    <li>
                                        <a href="#">Aplicar</a>
                                    </li>
                                    <li>
                                        <a href="#">Respuestas</a>
                                    </li>
                                    <li>
                                        <a href="#">Calificaciones</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                               <a href="#">Configuraciones</a>
                            </li>
                            <li>
                               <a href="#">Historial</a>
                            </li>
                            <li>
                                <a href="#">Tutoriales<i class="fa fa-angle-right" aria-hidden="true"></i></a>
                                <ul class="dl-submenu">
                                    <li>
                                        <a href="#">Manual de Uso Básico</a>
                                    </li>
                                    <li>
                                        <a href="#">¿Qué evalúa cada test?</a>
                                    </li>
                                    <li>
                                        <a href="#">Ayuda General</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="#">Asistencia Técnica<i class="fa fa-angle-right" aria-hidden="true"></i></a>
                                <ul class="dl-submenu">
                                    <li>
                                        <a href="#">Soporte En Línea</a>
                                    </li>
                                    <li>
                                        <a href="#">Soporte Por Ticket</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                               <a href="#">Notificaciones</a>
                            </li>
                            <li>
                                <a href="#">Cuenta<i class="fa fa-angle-right" aria-hidden="true"></i></a>
                                <ul class="dl-submenu">
                                    <li>
                                        <a href="#">Perfil</a>
                                    </li>
                                    <li>
                                        <a href="#">Configuraciones</a>
                                    </li>
                                    <li>
                                        <a href="#">Cerrar sesión</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div><!-- /dl-menuwrapper -->
                </div>    
                    </ul>
                </div>
            </div>
    <div class="logo-responsive">
        <a href="index.php"><img src="images/logo.png"></a>
    </div>

  <!-- Modal ver notificaciones-->
<div class="modal fade" id="verNotificacion" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Notificaciones</h4>
        </div>
        <div class="modal-body">
            <div class="data_notification">
                <h1>Fernando Vásquez</h1>
                <p>Ha publicado una plaza</p>
            </div>
        </div>
      </div>
    </div>
</div>
        <script>
            $(function() {
                $( '#dl-menu' ).dlmenu();
            });
        </script>


        <script>
            /**
 * jquery.dlmenu.js v1.0.1
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * https://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2013, Codrops
 * http://www.codrops.com
 */
;( function( $, window, undefined ) {

    'use strict';

    // global
    var Modernizr = window.Modernizr, $body = $( 'body' );

    $.DLMenu = function( options, element ) {
        this.$el = $( element );
        this._init( options );
    };

    // the options
    $.DLMenu.defaults = {
        // classes for the animation effects
        animationClasses : { classin : 'dl-animate-in-1', classout : 'dl-animate-out-1' },
        // callback: click a link that has a sub menu
        // el is the link element (li); name is the level name
        onLevelClick : function( el, name ) { return false; },
        // callback: click a link that does not have a sub menu
        // el is the link element (li); ev is the event obj
        onLinkClick : function( el, ev ) { return false; }
    };

    $.DLMenu.prototype = {
        _init : function( options ) {

            // options
            this.options = $.extend( true, {}, $.DLMenu.defaults, options );
            // cache some elements and initialize some variables
            this._config();
            
            var animEndEventNames = {
                    'WebkitAnimation' : 'webkitAnimationEnd',
                    'OAnimation' : 'oAnimationEnd',
                    'msAnimation' : 'MSAnimationEnd',
                    'animation' : 'animationend'
                },
                transEndEventNames = {
                    'WebkitTransition' : 'webkitTransitionEnd',
                    'MozTransition' : 'transitionend',
                    'OTransition' : 'oTransitionEnd',
                    'msTransition' : 'MSTransitionEnd',
                    'transition' : 'transitionend'
                };
            // animation end event name
            this.animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ] + '.dlmenu';
            // transition end event name
            this.transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ] + '.dlmenu',
            // support for css animations and css transitions
            this.supportAnimations = Modernizr.cssanimations,
            this.supportTransitions = Modernizr.csstransitions;

            this._initEvents();

        },
        _config : function() {
            this.open = false;
            this.$trigger = this.$el.children( '.dl-trigger' );
            this.$menu = this.$el.children( 'ul.dl-menu' );
            this.$menuitems = this.$menu.find( 'li:not(.dl-back)' );
            this.$el.find( 'ul.dl-submenu' ).prepend( '<li class="dl-back"><a href="#"><i class="fa fa-angle-left" aria-hidden="true"></i>Atrás</a></li>' );
            this.$back = this.$menu.find( 'li.dl-back' );
        },
        _initEvents : function() {

            var self = this;

            this.$trigger.on( 'click.dlmenu', function() {
                
                if( self.open ) {
                    self._closeMenu();
                } 
                else {
                    self._openMenu();
                }
                return false;

            } );

            this.$menuitems.on( 'click.dlmenu', function( event ) {
                
                event.stopPropagation();

                var $item = $(this),
                    $submenu = $item.children( 'ul.dl-submenu' );

                if( $submenu.length > 0 ) {

                    var $flyin = $submenu.clone().css( 'opacity', 0 ).insertAfter( self.$menu ),
                        onAnimationEndFn = function() {
                            self.$menu.off( self.animEndEventName ).removeClass( self.options.animationClasses.classout ).addClass( 'dl-subview' );
                            $item.addClass( 'dl-subviewopen' ).parents( '.dl-subviewopen:first' ).removeClass( 'dl-subviewopen' ).addClass( 'dl-subview' );
                            $flyin.remove();
                        };

                    setTimeout( function() {
                        $flyin.addClass( self.options.animationClasses.classin );
                        self.$menu.addClass( self.options.animationClasses.classout );
                        if( self.supportAnimations ) {
                            self.$menu.on( self.animEndEventName, onAnimationEndFn );
                        }
                        else {
                            onAnimationEndFn.call();
                        }

                        self.options.onLevelClick( $item, $item.children( 'a:first' ).text() );
                    } );

                    return false;

                }
                else {
                    self.options.onLinkClick( $item, event );
                }

            } );

            this.$back.on( 'click.dlmenu', function( event ) {
                
                var $this = $( this ),
                    $submenu = $this.parents( 'ul.dl-submenu:first' ),
                    $item = $submenu.parent(),

                    $flyin = $submenu.clone().insertAfter( self.$menu );

                var onAnimationEndFn = function() {
                    self.$menu.off( self.animEndEventName ).removeClass( self.options.animationClasses.classin );
                    $flyin.remove();
                };

                setTimeout( function() {
                    $flyin.addClass( self.options.animationClasses.classout );
                    self.$menu.addClass( self.options.animationClasses.classin );
                    if( self.supportAnimations ) {
                        self.$menu.on( self.animEndEventName, onAnimationEndFn );
                    }
                    else {
                        onAnimationEndFn.call();
                    }

                    $item.removeClass( 'dl-subviewopen' );
                    
                    var $subview = $this.parents( '.dl-subview:first' );
                    if( $subview.is( 'li' ) ) {
                        $subview.addClass( 'dl-subviewopen' );
                    }
                    $subview.removeClass( 'dl-subview' );
                } );

                return false;

            } );
            
        },
        closeMenu : function() {
            if( this.open ) {
                this._closeMenu();
            }
        },
        _closeMenu : function() {
            var self = this,
                onTransitionEndFn = function() {
                    self.$menu.off( self.transEndEventName );
                    self._resetMenu();
                };
            
            this.$menu.removeClass( 'dl-menuopen' );
            this.$menu.addClass( 'dl-menu-toggle' );
            this.$trigger.removeClass( 'dl-active' );
            
            if( this.supportTransitions ) {
                this.$menu.on( this.transEndEventName, onTransitionEndFn );
            }
            else {
                onTransitionEndFn.call();
            }

            this.open = false;
        },
        openMenu : function() {
            if( !this.open ) {
                this._openMenu();
            }
        },
        _openMenu : function() {
            var self = this;
            // clicking somewhere else makes the menu close
            $body.off( 'click' ).on( 'click.dlmenu', function() {
                self._closeMenu() ;
            } );
            this.$menu.addClass( 'dl-menuopen dl-menu-toggle' ).on( this.transEndEventName, function() {
                $( this ).removeClass( 'dl-menu-toggle' );
            } );
            this.$trigger.addClass( 'dl-active' );
            this.open = true;
        },
        // resets the menu to its original state (first level of options)
        _resetMenu : function() {
            this.$menu.removeClass( 'dl-subview' );
            this.$menuitems.removeClass( 'dl-subview dl-subviewopen' );
        }
    };

    var logError = function( message ) {
        if ( window.console ) {
            window.console.error( message );
        }
    };

    $.fn.dlmenu = function( options ) {
        if ( typeof options === 'string' ) {
            var args = Array.prototype.slice.call( arguments, 1 );
            this.each(function() {
                var instance = $.data( this, 'dlmenu' );
                if ( !instance ) {
                    logError( "cannot call methods on dlmenu prior to initialization; " +
                    "attempted to call method '" + options + "'" );
                    return;
                }
                if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
                    logError( "no such method '" + options + "' for dlmenu instance" );
                    return;
                }
                instance[ options ].apply( instance, args );
            });
        } 
        else {
            this.each(function() {  
                var instance = $.data( this, 'dlmenu' );
                if ( instance ) {
                    instance._init();
                }
                else {
                    instance = $.data( this, 'dlmenu', new $.DLMenu( options, this ) );
                }
            });
        }
        return this;
    };

} )( jQuery, window );
        </script>