kickstrap/templates/new/views/_header.jade

Framework for advanced Bootstrap web development

div(ng-controller="LoginCtrl")
	nav.navbar.navbar-default.navbar-fixed-top(role="navigation")
		.container
			.navbar-header
				button.navbar-toggle(type="button", data-toggle="collapse", data-target=".navbar-ex1-collapse")
					span.sr-only Toggle Navigation
					span.icon-bar
					span.icon-bar
					span.icon-bar
				a.navbar-brand.kickstrap-logo(href="/") #{title}
			.navbar-collapse.collapse.navbar-ex1-collapse
				// Stripped-down header. Help users to focus on their purchase.
				- if (active != 'cart')
					ul.nav.navbar-nav
						each menuItem in [{title:'Home', url: '/', slug:'home'}, {title: 'Docs', url: '/docs.html#first-steps', slug: 'docs'},  {title: 'Products', url: '/products.html', slug: 'products'}, {title: 'New Page', url: '/newpage.html#disqus_thread', slug: 'newpage'}]
							li(class=(active === menuItem.slug ? 'active' : ''))
								a(href=menuItem.url) #{menuItem.title}
					form.navbar-form.navbar-right
						.form-group
							a.btn.btn-primary#install(href="docs.html#first-steps") Install 
					ul.navbar-right.nav.navbar-nav
						each menuItem in [{url: '/cart.html', slug:'cart', icon: 'glyphicon-shopping-cart', badge: '3'}, {url: '/messages.html', slug: 'messages', icon: 'glyphicon-envelope', badge: '10'}]
							li(class=(active === menuItem.slug ? 'active' : ''))
								a(href=menuItem.url) 
									span.glyphicon(class=menuItem.icon) 
									- if (menuItem.badge)
										span  
										span.badge #{menuItem.badge}
						li
							a(href="#" data-target="#login" data-toggle="modal") 
								span(ng-hide="auth.user") Login 
								span.ks-afterload(ng-show="auth.user")
									img(ng-src="{{auth.user.thumbnailImg}}" style="width: 20px;height: 20px;")



	.modal.fade#login(tabindex="-1")
		.modal-dialog
			.modal-content
				.modal-header
					button.close(type="button" data-dismiss="modal") ×
					h4.modal-title Login
				.modal-body
					.row
						.col-sm-6(ng-show="auth.user")
							p
								img(ng-src="{{auth.user.thumbnailImg}}")
							p.lead Logged in as {{auth.user.name}}
							p
								a.btn.btn-default(href="#" ng-click="auth.$logout()") Logout
						.col-sm-6(ng-hide="auth.user")
							// Thanks http://nicolasgallagher.com/lab/css3-social-signin-buttons/
							p.lead Login using...
							p
								a(href="#" ng-click="auth.$login('facebook')").btn-auth.btn-facebook Facebook
							p
								a(href="#" ng-click="auth.$login('twitter')").btn-auth.btn-twitter Twitter
							p
								a(href="#" ng-click="auth.$login('github')").btn-auth.btn-github GitHub
							p Support Kickstrap Development
							p
								script(data-gittip-username="yourwebsitesUX" data-gittip-widget="button" src="//gttp.co/v1.js")
						.col-sm-6
							.alert.alert-info
								h4 Example
								p This screen simply demonstrates Firebase's native social login authorization.
							p When using your own Firebase account, don't forget to 
								a(href="/docs.html#social-login") setup your app keys and secrets 
								| for each social network