Jump to content
Sign in to follow this  
sergioas

Layout Jade - nodeJS - Menu aparece já aberto

Recommended Posts

Pessoal, estou usando o Jade para fazer um layout padrão, pois varias telas do meu site irão utilizar um mesmo layout (menu).

 

Peguei um layout gratuito: http://startbootstrap.com/template-categories/admin-dashboard/

 

E estou montando uma estrutura de "includes", separando por:

 

- dashboard - que vai juntar tudo (head, menus , corpo e scripts)

- head - cabecalho e css

- menus - menu padrao para as paginas

- corpo - que vai ser as paginas de acordo com o menu escolhido

- scripts - javascripts

 

Mas, quando exibe a pagina, exibe com os Menus ja expandidos (abertos), e nao sei como fazer para deixar os menus fechados.

 

Segue os arquivos:

 

-- dashboard.jade

doctype html
html(lang='en')
include head
body
include menu_
// /#page-wrapper
// /#wrapper
include scripts

-- head.jade

block head
head
meta(charset='utf-8')
meta(http-equiv='X-UA-Compatible', content='IE=edge')
meta(name='viewport', content='width=device-width, initial-scale=1')
meta(name='description', content='')
meta(name='author', content='')
title Cuidamos
// Bootstrap Core CSS
link(href='../../stylesheets/bootstrap/bootstrap.min.css', rel='stylesheet')

// MetisMenu CSS
link(href='../../stylesheets/metisMenu/metisMenu.min.css', rel='stylesheet')
// Timeline CSS
link(href='../../stylesheets/dist/timeline.css', rel='stylesheet')
// Custom CSS
link(href='../../stylesheets/dist/sb-admin-2.css', rel='stylesheet')
// Morris Charts CSS
link(href='../../stylesheets/morrisjs/morris.css', rel='stylesheet')
// Custom Fonts
link(href='../../stylesheets/font-awesome/font-awesome.min.css', rel='stylesheet')
link(href='../../stylesheets/style.css', rel='stylesheet')

 

-- menu_.jade

block menu
nav.navbar.navbar-default.navbar-static-top(role='navigation', style='margin-bottom: 0')
// INICIO CONTEM HEADER + MENU
.navbar-header
// INICIO SB ADMIN 2
button.navbar-toggle(type='button', data-toggle='collapse', data-target='.navbar-collapse')
span.sr-only Toggle navigation
span.icon-bar
span.icon-bar
span.icon-bar
a.navbar-brand(href='index.html') Dash
// FIM SB ADMIN 2
// /.navbar-header
ul.nav.navbar-top-links.navbar-right
// INICIO ICONES CANTO SUPERIOR DIREITO
li.dropdown
a.dropdown-toggle(data-toggle='dropdown', href='#')
i.fa.fa-envelope.fa-fw
i.fa.fa-caret-down
ul.dropdown-menu.dropdown-messages
li
a(href='#')
div
strong John Smith
span.pull-right.text-muted
em Yesterday
div
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...
li.divider
li
a(href='#')
div
strong John Smith
span.pull-right.text-muted
em Yesterday
div
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...
li.divider
li
a(href='#')
div
strong John Smith
span.pull-right.text-muted
em Yesterday
div
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...
li.divider
li
a.text-center(href='#')
strong Read All Messages
i.fa.fa-angle-right
// /.dropdown-messages
// /.dropdown
li.dropdown
a.dropdown-toggle(data-toggle='dropdown', href='#')
i.fa.fa-tasks.fa-fw
i.fa.fa-caret-down
ul.dropdown-menu.dropdown-tasks
li
a(href='#')
div
p
strong Task 1
span.pull-right.text-muted 40% Complete
.progress.progress-striped.active
.progress-bar.progress-bar-success(role='progressbar', aria-valuenow='40', aria-valuemin='0', aria-valuemax='100', style='width: 40%')
span.sr-only 40% Complete (success)
li.divider
li
a(href='#')
div
p
strong Task 2
span.pull-right.text-muted 20% Complete
.progress.progress-striped.active
.progress-bar.progress-bar-info(role='progressbar', aria-valuenow='20', aria-valuemin='0', aria-valuemax='100', style='width: 20%')
span.sr-only 20% Complete
li.divider
li
a(href='#')
div
p
strong Task 3
span.pull-right.text-muted 60% Complete
.progress.progress-striped.active
.progress-bar.progress-bar-warning(role='progressbar', aria-valuenow='60', aria-valuemin='0', aria-valuemax='100', style='width: 60%')
span.sr-only 60% Complete (warning)
li.divider
li
a(href='#')
div
p
strong Task 4
span.pull-right.text-muted 80% Complete
.progress.progress-striped.active
.progress-bar.progress-bar-danger(role='progressbar', aria-valuenow='80', aria-valuemin='0', aria-valuemax='100', style='width: 80%')
span.sr-only 80% Complete (danger)
li.divider
li
a.text-center(href='#')
strong See All Tasks
i.fa.fa-angle-right
// /.dropdown-tasks
// /.dropdown
li.dropdown
a.dropdown-toggle(data-toggle='dropdown', href='#')
i.fa.fa-bell.fa-fw
i.fa.fa-caret-down
ul.dropdown-menu.dropdown-alerts
li
a(href='#')
div
i.fa.fa-comment.fa-fw
| New Comment
span.pull-right.text-muted.small 4 minutes ago
li.divider
li
a(href='#')
div
i.fa.fa-twitter.fa-fw
| 3 New Followers
span.pull-right.text-muted.small 12 minutes ago
li.divider
li
a(href='#')
div
i.fa.fa-envelope.fa-fw
| Message Sent
span.pull-right.text-muted.small 4 minutes ago
li.divider
li
a(href='#')
div
i.fa.fa-tasks.fa-fw
| New Task
span.pull-right.text-muted.small 4 minutes ago
li.divider
li
a(href='#')
div
i.fa.fa-upload.fa-fw
| Server Rebooted
span.pull-right.text-muted.small 4 minutes ago
li.divider
li
a.text-center(href='#')
strong See All Alerts
i.fa.fa-angle-right
// /.dropdown-alerts
// /.dropdown
li.dropdown
a.dropdown-toggle(data-toggle='dropdown', href='#')
i.fa.fa-user.fa-fw
i.fa.fa-caret-down
ul.dropdown-menu.dropdown-user
li
a(href='cadastroPacientes.html')
i.fa.fa-user.fa-fw
| Meu Cadastro
li
a(href='#')
i.fa.fa-gear.fa-fw
| Settings
li.divider
li
a(href='login.html')
i.fa.fa-sign-out.fa-fw
| Logout
// /.dropdown-user
// /.dropdown
// FIM ICONES CANTO SUPERIOR DIREITO
// /.navbar-top-links
.navbar-default.sidebar(role='navigation')
// INICIO DO MENU
.sidebar-nav.navbar-collapse
ul#side-menu.nav
li.sidebar-search
.input-group.custom-search-form
input.form-control(type='text', placeholder='Search...')
span.input-group-btn
button.btn.btn-default(type='button')
i.fa.fa-search
// /input-group
li
a(href='index.html')
i.fa.fa-dashboard.fa-fw
| Dashboard
li
a(href='#')
i.fa.fa-bar-chart-o.fa-fw
| Charts
span.fa.arrow
ul.nav.nav-second-level
li
a(href='#') Flot Charts
li
a(href='#') Morris.js Charts
// /.nav-second-level
li
a(href='tables.html')
i.fa.fa-table.fa-fw
| Tables
li
a(href='forms.html')
i.fa.fa-edit.fa-fw
| Forms
li
a(href='#')
i.fa.fa-wrench.fa-fw
| UI Elements
span.fa.arrow
ul.nav.nav-second-level
li
a(href='panels-wells.html') Panels and Wells
li
a(href='buttons.html') Buttons
li
a(href='notifications.html') Notifications
li
a(href='typography.html') Typography
li
a(href='icons.html') Icons
li
a(href='grid.html') Grid
// /.nav-second-level
li
a(href='#')
i.fa.fa-sitemap.fa-fw
| Multi-Level Dropdown
span.fa.arrow
ul.nav.nav-second-level
li
a(href='#') Second Level Item
li
a(href='#') Second Level Item
li
a(href='#')
| Third Level
span.fa.arrow
ul.nav.nav-third-level
li
a(href='#') Third Level Item
li
a(href='#') Third Level Item
li
a(href='#') Third Level Item
li
a(href='#') Third Level Item
// /.nav-third-level
// /.nav-second-level
li
a(href='#')
i.fa.fa-files-o.fa-fw
| Sample Pages
span.fa.arrow
ul.nav.nav-second-level
li
a(href='blank.html') Blank Page
li
a(href='login.html') Login Page
// /.nav-second-level
// /.sidebar-collapse
// FIM DO MENU
// /.navbar-static-side
// FIM CONTEM HEADER + MENU
include corpo

-- corpo.jade

#page-wrapper
// INICIO CONTEM CORPO DA PAGINA
.col-lg-12
h1.page-header Cadastro
header.row
.row
.form-group
.col-md-8(role='main')
form(role='form')
.row
.form-group
.jumbotron
.container
h1 Bem Vindo !
p
.row
.col-xs-4.col-sm-4.col-md-4
.form-group
input#cpfPaciente.form-control.input-xs(name='cpfPaciente', placeholder='cpf (999.999.999-99)', required='', tabindex='1', type='text', value='')
.col-xs-4.col-sm-4.col-md-4
.form-group
input#dataNascimentoPaciente.form-control.input-xs(name='dataNascimentoPaciente', required='', type='text', placeholder='Data Nascimento (99/99/9999)', value='')
.col-xs-4.col-sm-4.col-md-4
.form-group
select.form-control.input-xs
option
option(value='', selected='') Sexo
option(value='F') Feminino
option(value='M') Masculino
.row
.col-xs-6.col-sm-6.col-md-6
.form-group
input#first_name.form-control.input-xs(type='text', name='first_name', placeholder='Nome')
.col-xs-6.col-sm-6.col-md-6
.form-group
input#last_name.form-control.input-xs(type='text', name='last_name', placeholder='Sobrenome')
.row
.col-xs-6.col-sm-6.col-md-6
.form-group
input#email.form-control.input-xs(type='email', name='email', placeholder='Email')
.col-xs-6.col-sm-6.col-md-6
.form-group
input#confirmeEmail.form-control.input-xs(type='email', name='confirmeEmail', placeholder='Confirme Email')
.row
.col-xs-4.col-sm-4.col-md-4
.form-group
input#senha.form-control.input-xs(type='password', name='senha', placeholder='Senha')
.col-xs-4.col-sm-4.col-md-4
.form-group
input#confirmeSenha.form-control.input-xs(type='password', name='confirmeSenha', placeholder='Confirme Senha')
.row
.col-xs-4.col-sm-4.col-md-4
.form-group
label Endereço:
.row
.col-xs-4.col-sm-4.col-md-4
.form-group
input#cepPaciente.form-control.input-xs(name='cepPaciente', required='', type='text', placeholder='Cep (99999-999)', value='')
.row
.col-xs-6.col-sm-6.col-md-6
.form-group
input#ruaPaciente.form-control.input-xs(name='ruaPaciente', required='', type='text', placeholder='Rua', value='')
.col-xs-2.col-sm-2.col-md-2
.form-group
input#numeroRuaPaciente.form-control.input-xs(name='numeroRuaPaciente', required='', type='text', placeholder='Numero', value='')
.col-xs-4.col-sm-4.col-md-4
.form-group
input#complementoRuaPaciente.form-control.input-xs(name='complementoRuaPaciente', required='', type='text', placeholder='Complemento', value='')
.row
.col-xs-4.col-sm-4.col-md-4
.form-group
select#estado.form-control.m-bot15(name='estado')
option(value='') Selecione Estado
option(value='1') AC-ACRE
option(value='2') AL-ALAGOAS
option(value='3') AP-AMAPÁ
option(value='4') AM-AMAZONAS
option(value='5') BA-BAHIA
option(value='6') CE-CEARÁ
option(value='7') DF-DISTRITO FEDERAL
option(value='8') ES-ESPÍRITO SANTO
option(value='9') RR-RORAIMA
option(value='10') GO-GOIÁS
option(value='11') MA-MARANHÃO
option(value='12') MT-MATO GROSSO
option(value='13') MS-MATO GROSSO DO SUL
option(value='14') MG-MINAS GERAIS
option(value='15') PA-PARÁ
option(value='16') PB-PARAÍBA
option(value='17') PR-PARANÁ
option(value='18') PE-PERNAMBUCO
option(value='19') PI-PIAUÍ
option(value='20') RJ-RIO DE JANEIRO
option(value='21') RN-RIO GRANDE DO NORTE
option(value='22') RS-RIO GRANDE DO SUL
option(value='23') RO-RONDÔNIA
option(value='24') TO-TOCANTINS
option(value='25') SC-SANTA CATARINA
option(value='26') SP-SÃO PAULO
option(value='27') SE-SERGIPE
.col-xs-4.col-sm-4.col-md-4
.form-group
input#cidade.form-control.input-xs(name='cidade', required='', type='text', placeholder='Cidade', value='')
.col-xs-4.col-sm-4.col-md-4
.form-group
input#bairro.form-control.input-xs(name='bairro', required='', type='text', placeholder='Bairro', value='')
.row
.col-xs-4.col-sm-4.col-md-4
.form-group
input#telefoneFixoPaciente.form-control.input-xs(name='telefoneFixoPaciente', required='', type='text', placeholder='Telefone (99-9999-9999)', value='')
.col-xs-4.col-sm-4.col-md-4
.form-group
input#celularPaciente.form-control.input-xs(name='celularPaciente', required='', type='text', placeholder='Celular (99-99999-9999)', value='')
.row
.col-xs-4.col-sm-4.col-md-4
.form-group
label Se possuir Convênio Médico:
.row
.col-xs-4.col-sm-4.col-md-4
.form-group
select#convenio.form-control.m-bot15(name='convenio')
option(value='') Selecione Convenio Medico
option(value='1') AC-ACRE
.col-xs-4.col-sm-4.col-md-4
.form-group
input#planoConvenioMedico.form-control.input-xs(name='planoConvenioMedico', required='', type='text', placeholder='Plano Convenio Medico', value='')
.col-xs-4.col-sm-4.col-md-4
.form-group
input#numeroCarteirinhaConvenio.form-control.input-xs(name='numeroCarteirinhaConvenio', required='', type='text', placeholder='Numero Completo Carteirinha', value='')
.row
.col-xs-4.col-sm-4.col-md-4
.form-group
label Se Menor de Idade, Informar um Responsável:
.row
.col-xs-4.col-sm-4.col-md-4
.form-group
input#nomeResponsavel.form-control(type='text', name='nomeResponsavel', value='Nome do Responsavel')
.col-xs-4.col-sm-4.col-md-4
.form-group
input#cpfResponsavel.form-control(type='text', name='cpfResponsavel', value='CPF do Responsavel')
.col-xs-4.col-sm-4.col-md-4
.form-group
input#telefoneResponsavel.form-control(name='telefoneResponsavel', type='text', value='Tel Responsavel')
.row
.col-xs-4.col-sm-4.col-md-4
.form-group
.col-xs-4.col-sm-4.col-md-4
.form-group(style='text-align:center')
input.btn.btn-success.btn-lg(type='submit', value='Cadastrar')
aside.col-md-4(role='complementary')
footer.row
// FIM CONTEM CORPO DA PAGINA

 

 

Se alguem conseguir me dar uma luz para resolver isso...

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By gugacdb
      Gostaria de uma ajuda com uma questão relacionada ao nodejs.
       
      Estou tentando salvar informações que recebo de um arquivo local json ao banco de dados.
       
      esse arquivo me traz varias objetos, e o que preciso fazer é salvar objeto por objeto exemplo:
       
      let pessoa = [ {nome : 'Fulano1' , sobrenome : 'Beltrano1', idade : 80} {nome : 'Fulano2' , sobrenome : 'Beltrano2', idade : 90} {nome : 'Fulano3' , sobrenome : 'Beltrano3', idade : 100} ]  
      Estou realizando um laço para salvar cada volta, pois preciso inferir uma data em cada objeto.

      Estou tentando salvar utilizado o:
       
      do{}while(i > contador) Código que estou tentando usar:
       
      setUm = async (req, res, next) => { fs.readFile('./public/assets/images/data_dragon/pt_br/data/set1-pt_br.json' , 'utf8' , function(err , data ){ if(err){ return console.log('erro ao ler o arquivo'); } let jsonData = JSON.parse(data); let counter = jsonData.length; let i = -1; do{ i = i + 1; let dataSave = { associatedCards : jsonData[i].assets, associatedCardRefs : jsonData[i].associatedCardRefs, assets : jsonData[i].assets, region : jsonData[i].region, egionRef : jsonData[i].regionRef, attack : jsonData[i].attack, cost : jsonData[i].cost, health : jsonData[i].health, description : jsonData[i].description, descriptionRaw : jsonData[i].descriptionRaw, levelupDescription : jsonData[i].levelupDescription, levelupDescriptionRaw : jsonData[i].levelupDescriptionRaw, flavorText : jsonData[i].flavorText, artistName : jsonData[i].artistName, name : jsonData[i].name, cardCode : jsonData[i].cardCode, keywords : jsonData[i].keywords, keywordRefs : jsonData[i].keywordRefs , spellSpeed : jsonData[i].spellSpeed, spellSpeedRef : jsonData[i].spellSpeedRef, rarity : jsonData[i].rarity, rarityRef : jsonData[i].rarityRef, subtype : jsonData[i].subtype, subtypes : jsonData[i].subtypes, supertype : jsonData[i].supertype, type : jsonData[i].type, collectible : jsonData[i].collectible, set : jsonData[i].set, } const infosave = new Infocard(dataSave); try{ infosave.save(); }catch (e) { console.error('ROLOU ALGO DE ERRADO: '+ e.message); } }while(i < counter); res.json(dataSave); }); }  Abaixo meu model:
       
      const Infocard = new mongoose.Schema( { associatedCards : [String], associatedCardRefs : [String], assets : [String], region : String, regionRef : String, attack : Number, cost : Number, health : Number, description : String, descriptionRaw : String, levelupDescription : String, levelupDescriptionRaw : String, flavorText : String, artistName : String, name : String, cardCode : String, keywords : [String], keywordRefs : [String], spellSpeed : String, spellSpeedRef : String, rarity : String, rarityRef : String, subtype : String, subtypes : [String], supertype : String, type : String, collectible : Boolean, set : String, },{ timestamps : {createdAt : 'created_at'} } );
       
      Porem não estou obtendo sucesso. Quando chamo
      res.json(jsonData) o json carrega normalmente no navegador com todas as informações, porém quando vou tentar salvar no banco de dados os itens chegam vazios

      Ideias são apreciadas.

      Obrigado!
    • By drx
      Olá Pessoal!
       
      Eu estou estudando NodeJS e estou tentando enviar email com o nodemailer.
      Porém ao declarar a constante, dá pau. Este é o erro:
       
      [nodemon] app crashed - waiting for file changes before starting...
       
      Como tenho controle total de leitura, escrita... não sei o que está ocasionando esse erro.
      Talvez possa ser alguma variável que não setei no sistema windows...
      Alguém teria uma solução?
       
      SO Windows10-Pro
    • By Good
      Boa noite,
       
      estamos utilizando visual studio numa equipe de programação. E gostaríamos de criar tipo um repositório ao vivo, onde pudéssemos ver em qual arquivo cada um está editando.
      Tipo as pessoas que estão conectadas, etc.
       
      Existe algo do tipo? Já instalei o live share, mas n é mto util, dá para ver o outro editando o código. Porém é complicado, queriamos monitorar o trabalho, ver o que está sendo feito, etc.
       
      Github já usamos também.
    • By SampaioK12
      Eai Galera iniciando na área..
       
      Alguém sabe me explicar porque a Maioria das aplicações do Node Js são feitas com o Mongo(NoSQL)?..
       
      Todas as pesquisas que fiz referencia o NodeJS com o Mongo...
    • By CoverFoxtrot
      Olá, 
       
      Eu quero fazer uma api Rest que busque músicas em vários provedores online e retorne um jason array com todas as informações das músicas, inclusive o link do áudio. Mas não faço ideia de por onde começar. Pensei em usar um web crawler, mas não sei se essa é a melhor maneira.
       
      Alguém já fez algo parecido?
       
      * Eu postei esse post na parte de JavaScript porque o pouco conhecimento web que tenho é em nodeJs.
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.