Node.js / barra de navegacion responsiva

Bienvenidos sean a este post, hoy continuaremos modificando nuestra aplicacion notas.

En el post anterior agregamos los iconos para nuestra aplicacion y agregamos un icono por cada nota agregada, pero hoy nos centraremos en el header de nuestra pagina y si bien ya tenemos uno basico generado, bootstrap nos da varias formas de como mejorarlo pero antes de comenzar vamos a necesitar el codigo de nuestra aplicacion sino lo poseen les dejo un link al archivo para descargarlo:

Descarguen el archivo y extraigan el directorio notas en la pc, una vez realizado ya podemos continuar con nuestro post, nuestro primer paso sera trabajar con el archivo header.hbs en el directorio partials pero antes veamos como es su codigo actual:

partials/header.hbs

<header>
        <h1>{{ title }}</h1>
        <div class='navbar'>
                <p>
                <a href='/'>Inicio</a> |
                <a href='/notas/add'>Agregar Nota</a>
                </p>
        </div>
</header>

Como pueden ver es un encabezado muy simple donde mostramos el titulo y tenemos dos links para volver al inicio y agregar nuevas notas, nuestro siguiente paso sera modificar este archivo de la siguiente manera:

<header class="page-header">
  <h1>{{ title }}</h1>
  <nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <a class="navbar-brand" href='/'><i data-feather="home"></i></a>
    <button class="navbar-toggler" type="button"
        data-toggle="collapse" data-target="#navbarContenidoSoportado"
        aria-controls="navbarContenidoSoportado"
        aria-expanded="false" aria-label="Alternar navegacion">
        <span clas="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarContenidoSoportado">
        <div class="navbar-nav col">
        {{#if breadcrumb}}
        <a class="nav-item nav-link" href="{{breadcrumb.url}}">
        {{breadcrumb.title}}</a>
        {{/if}}
        </div>
        <a class="nav-item nav-link btn btn-light col-auto"
                href='/notas/add'>Agregar Nota</a>
    </div>
  </nav>
</header>

Basante diferente, no? Mantenemos algunas cosas basicas como el titulo, el link de inicio y el de agregar nota pero agregamos algunas cosas mas, tomemos primero a nav, en este caso le decimos que debe usar las clases de navbar, la que se expande con dispositivoss medianos, de estilo oscuro y con fondo oscuro, lo siguiente es el link para volver al inicio y en este caso implementamos un icono de home para reemplazar la palabra que tenia antes, despues tenemos un boton donde aplicaremos la clase navbar-toggle, esta se encargara de mostrar o no el boton de agregar nota y en caso de no mostrar el boton antes citado mostrara este, observen que tiene la clase collapse, le decimos que no este expandido de manera inicial, asi como le indicamos que su destino sera un div con el identificador navbarContenidoSoportado, donde estara nuestro boton para agregar notas, por ultimo le aplicaremos el icono de las tres lineas indicando que hay mas opciones, ahora veamos como es el div que usara este boton.

En este caso tendremos el boton encargado de agregar nuevas notas, primero le pasamos una clase para que sea de tipo navbar despues que tome todas las columnas dissponibles, sobre esto hablamos en este post, despues tenemos una curiosidad que se considera como una buena practica llamada breadcrumb o «migas de pan», esta es una posibilidad que nos brindan algunas frameworks para mediante estos volver a links internos tales como el inicio u otros visitados anteriormente de forma practica y aqui en caso de estar establecido generaremos un link a la url y mostraremos su titulo aunque por el momento no funcionara, despues tendremos el link para agregar nuevas notas y a este le aplicaremos varias clases entre ellas una para convertirla en boton, con esto comentado veamos como trabaja mediante el siguiente video

Como pueden ver a un gran tamaño del navegador tenemos el boton pero cuando reducimos el navegador este se cambia por el boton de alternar navegacion y nos esconde el boton de agregar notas, esto es ideal especialmente para dispositivos moviles donde nuestra pantalla es muy limitada, antes de finalizar les dejo un archivo con todos los codigos del proyecto y los trabajados en este post:

En resumen, hoy hemos visto como generar una barra de navegacion responsiva, es decir que en base al tamaño que disponemos colapse algunos elementos para poder acceder de otra forma, hemos visto como con unas simples clases que se encuentran entre nuestros modulos pudimos hacerlo de una forma simple y dinamica, espero les haya resultado de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.