Layout and style for new global menu.

src/styles/components/_dropdown.sass

@@ -24,3 +24,21 @@ ul.dropdown-menu
 nav .dropdown:hover
 	ul.dropdown-menu
 		display: block
+
+nav .dropdown.large:hover
+	.dropdown-menu
+		@extend .d-flex
+
+.dropdown.large.show
+	@extend .d-flex
+
+	.dropdown-menu.show
+		@extend .d-flex
+
+.dropdown-menu-tab
+	display: none
+	min-width: 100px
+
+
+	&.show // .dropdown-menu-tab.show
+		@extend .d-flex

src/styles/components/_navbar.sass

@@ -2,8 +2,7 @@
 .navbar
 	box-shadow: inset 0 -2px  $color-background
 
-.navbar,
+.nav
-nav.sidebar
 	border: none
 	color: $color-text-dark-secondary
 	padding: 0
@@ -19,29 +18,6 @@ nav.sidebar
 				margin: 0
 				width: 100%
 
-	.navbar-item
-		align-items: center
-		display: flex
-		user-select: none
-		color: inherit
-
-		+media-sm
-			padding-left: 10px
-			padding-right: 10px
-
-		&:hover, &:focus
-			color: $primary
-			background-color: transparent
-			box-shadow: inset 0 -3px 0 $primary
-			text-decoration: none
-
-		&:focus
-			box-shadow: inset 0 -3px 0 $primary
-
-		&.active
-			color: $primary
-			box-shadow: inset 0 -3px 0 $primary
-
 	li
 		user-select: none
 		position: relative
@@ -80,49 +56,72 @@ nav.sidebar
 			i
 				+position-center-translate
 
-	.dropdown
+.dropdown
-		min-width: 50px // navbar avatar size
+	min-width: 50px // navbar avatar size
 
-		span.fa-stack
+	.navbar-item
-			position: absolute
+		&:hover
-			top: 50%
+			box-shadow: none // Remove the blue underline usually on navbar, from dropdown items.
-			left: 50%
-			transform: translate(-50%, -50%)
 
-		ul.dropdown-menu
+	ul.dropdown-menu
-			li
+		li
-				a
+			a
-					white-space: nowrap
+				white-space: nowrap
 
-					&:hover
+			.subitem // e.g. "Not Sintel? Log out"
-						box-shadow: none // removes underline
+				font-size: .8em
+				text-transform: initial
 
-				.subitem // e.g. "Not Sintel? Log out"
+			i
-					font-size: .8em
+				width: 30px
-					text-transform: initial
 
-				i
+			&.subscription-status
-					width: 30px
+				a, a:hover
+					color: $white
 
-				&.subscription-status
+				&.none
-					a, a:hover
+					background-color: $color-danger
-						color: $white
 
-					&.none
+				&.subscriber
-						background-color: $color-danger
+					background-color: $color-success
 
-					&.subscriber
+				&.demo
-						background-color: $color-success
+					background-color: $color-info
 
-					&.demo
+				span.info
-						background-color: $color-info
+					display: block
 
-					span.info
+					span.renew
 						display: block
+						font-size: .9em
 
-						span.renew
+
-							display: block
+.nav-link
-							font-size: .9em
+	@extend .d-flex
+
+
+.navbar-item
+	align-items: center
+	display: flex
+	user-select: none
+	color: inherit
+
+	+media-sm
+		padding-left: 10px
+		padding-right: 10px
+
+	&:hover, &:focus
+		color: $primary
+		background-color: transparent
+		box-shadow: inset 0 -3px 0 $primary
+		text-decoration: none
+
+	&:focus
+		box-shadow: inset 0 -3px 0 $primary
+
+	&.active
+		color: $primary
+		box-shadow: inset 0 -3px 0 $primary
 
 
 /* Secondary navigation. */
@@ -132,19 +131,36 @@ $nav-secondary-bar-size: -2px
 	box-shadow: inset 0 $nav-secondary-bar-size 0 0 $color-background
 
 	.nav-link
-		box-shadow: inset 0 $nav-secondary-bar-size 0 0 $color-background
 		color: $color-text
 		cursor: pointer
-		transition: box-shadow 150ms ease-in-out
+		transition: color 150ms ease-in-out
+
+		&:after
+			background-color: transparent
+			bottom: 0
+			content: ''
+			height: 2px
+			position: absolute
+			right: 0
+			left: 0
+			width: 0
+			transition: width 150ms ease-in-out
 
 	.nav-link:hover,
 	.nav-link.active,
-	.nav-item.dropdown.show .nav-link
+	.nav-item.dropdown.show > .nav-link
 		// Blue bar on the bottom.
-		box-shadow: inset 0 $nav-secondary-bar-size 0 0 $primary
+		&:after
+			background-color: $primary-accent
+			background-image: linear-gradient(to right, $primary-accent 70%, $primary)
+			height: 2px
+			width: 100%
+
+		span
+			+active-gradient
 
 		i
-			color: $primary
+			color: $primary-accent
 
 	&.nav-secondary-vertical
 		align-items: flex-start
@@ -156,19 +172,24 @@ $nav-secondary-bar-size: -2px
 
 		// Blue bar on the side.
 		.nav-link
-			box-shadow: inset 0 -1px 0 0 $color-background, inset -1px 0 0 0 $color-background
-
 			&:hover,
 			&.active
-				box-shadow: inset 0 -1px 0 0 $color-background, inset ($nav-secondary-bar-size * 1.5) 0 0 0 $primary
+				color: $primary
+				@extend .bg-white
 
-	&.nav-main
+				&:after
+					background-image: linear-gradient($primary-accent 70%, $primary)
+					height: 100%
+					left: initial
+					top: 0
+					width: 3px
+
+// Big navigation dropdown.
+.nav-main
+	.nav-secondary
 		.nav-link
-			color: $color-text-dark-secondary
+			@extend .pr-5
-
+			box-shadow: none
-			&:hover
-				color: $body-color
-
 
 .navbar-overlay
 	+media-lg
@@ -188,15 +209,6 @@ $nav-secondary-bar-size: -2px
 		background-color: $color-background-nav
 		text-shadow: none
 
-.navbar-brand
-	color: inherit
-	padding: 0 0 0 3px
-	position: relative
-	top: -2px
-
-	&:hover
-		color: $primary
-
 nav.navbar
 	.navbar-collapse
 		> ul > li > .navbar-item

src/templates/menus/notifications.pug

@@ -1,10 +1,11 @@
 | {% if current_user.is_authenticated %}
 
-li.nav-notifications
+li.nav-notifications.nav-item
-	a.navbar-item#notifications-toggle.px-0(
+	a.nav-link.px-2(
-	title="Notifications",
+		id="notifications-toggle",
-	data-toggle="tooltip",
+		title="Notifications",
-	data-placement="bottom")
+		data-toggle="tooltip",
+		data-placement="bottom")
 		i.pi-notifications-none.nav-notifications-icon
 		span#notifications-count
 			span

src/templates/menus/user_base.pug

@@ -12,25 +12,6 @@ li.dropdown
 	ul.dropdown-menu.dropdown-menu-right
 		| {% if not current_user.has_role('protected') %}
 		| {% block menu_list %}
-		li
-			a.navbar-item.px-2(
-				href="{{ url_for('projects.home_project') }}"
-				title="Home")
-				| #[i.pi-home] Home
-
-		li
-			a.navbar-item.px-2(
-				href="{{ url_for('projects.index') }}"
-				title="My Projects")
-				| #[i.pi-star] My Projects
-
-		| {% if current_user.has_organizations() %}
-		li
-			a.navbar-item.px-2(
-				href="{{ url_for('pillar.web.organizations.index') }}"
-				title="My Organizations")
-				| #[i.pi-users] My Organizations
-		| {% endif %}
 
 		li
 			a.navbar-item.px-2(

src/templates/mixins/components.pug

@@ -35,8 +35,8 @@ mixin jumbotron(title, text, image, url)
 mixin nav-secondary(title)
 	ul.nav.nav-secondary&attributes(attributes)
 		if title
-			li.font-weight-bold.px-2
+			li.nav-item
-				=title
+				span.nav-link.font-weight-bold.pointer-events-none= title
 
 		if block
 			block

src/templates/projects/_macros.pug

@@ -13,18 +13,20 @@ include ../mixins/components
 | {% endif %}
 
 +nav-secondary()
+	| {% if project.url != 'blender-cloud' %}
 	li.text-capitalize
 		a.nav-link.text-muted.px-0(href="{{ category_url }}")
-			| {{ project.category }}
+			span {{ project.category }}
 	li.px-1
 		i.pi-angle-right
 
 	+nav-secondary-link(
-		class="px-0 font-weight-bold",
+		class="px-1 font-weight-bold",
 		href="{{url_for('projects.view', project_url=project.url, _external=True)}}")
-		| {{ project.name }}
+		span {{ project.name }}
+	| {% endif %}
 
-	| {% if project.nodes_featured %}
+	| {% if project.nodes_featured and (title !='project') %}
 	| {# In some cases featured_nodes might might be embedded #}
 	| {% if '_id' in project.nodes_featured[0] %}
 	| {% set featured_node_id=project.nodes_featured[0]._id %}
@@ -35,7 +37,7 @@ include ../mixins/components
 			href="{{ url_for('projects.view_node', project_url=project.url, node_id=featured_node_id) }}",
 			title="Explore {{ project.name }}",
 			class="{% if title == 'project' %}active{% endif %}")
-			| Explore
+			span Explore
 	| {% endif %}
 
 	| {% for link in navigation_links %}