From 7824ddc13fc86b7b574cbcd2d6b01207a4c9f3e8 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Mon, 18 Oct 2021 14:33:23 +0200
Subject: [PATCH] feat: divide most navigation.scss styles into components

- navigation.vue and topNavigation.vue
- contentAuth.vue
---
 src/components/home/contentAuth.vue   |  18 ++
 src/components/home/navigation.vue    | 288 ++++++++++++++++-
 src/components/home/topNavigation.vue | 116 +++++++
 src/styles/theme/navigation.scss      | 424 --------------------------
 src/styles/variables/variables.scss   |   6 -
 5 files changed, 421 insertions(+), 431 deletions(-)

diff --git a/src/components/home/contentAuth.vue b/src/components/home/contentAuth.vue
index e600bc17..d68cdb43 100644
--- a/src/components/home/contentAuth.vue
+++ b/src/components/home/contentAuth.vue
@@ -171,6 +171,24 @@ export default {
   }
 }
 
+.mobile-overlay {
+	display: none;
+	position: fixed;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	background: rgba(250, 250, 250, 0.8);
+	z-index: 5;
+	opacity: 0;
+	transition: all $transition;
+
+	@media screen and (max-width: $tablet) {
+		display: block;
+		opacity: 1;
+	}
+}
+
 .keyboard-shortcuts-button {
 	position: fixed;
 	bottom: calc(1rem - 4px);
diff --git a/src/components/home/navigation.vue b/src/components/home/navigation.vue
index d19b9dae..83884139 100644
--- a/src/components/home/navigation.vue
+++ b/src/components/home/navigation.vue
@@ -275,7 +275,293 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+$navbar-padding: 2rem;
+$vikunja-nav-background: $light-background;
+$vikunja-nav-color: $grey-700;
+$vikunja-nav-selected-width: 0.4rem;
+
+
+.namespace-container {
+	background: $vikunja-nav-background;
+	z-index: 6;
+	color: $vikunja-nav-color;
+	padding: 0;
+	transition: all $transition;
+	position: fixed;
+	bottom: 0;
+	top: $navbar-height;
+	overflow-x: auto;
+	width: $navbar-width;
+
+	padding: 0 0 1rem;
+	left: -147vw;
+	bottom: 0;
+
+	@media screen and (max-width: $tablet) {
+		top: 0;
+		width: 70vw;
+	}
+
+	&.is-active {
+		left: 0;
+	}
+
+	.menu {
+		.menu-label {
+			font-size: 1rem;
+			font-weight: 700;
+			font-weight: bold;
+			font-family: $vikunja-font;
+			color: $vikunja-nav-color;
+			font-weight: 500;
+			min-height: 2.5rem;
+			padding-top: 0;
+			padding-left: $navbar-padding;
+
+			overflow: hidden;
+		}
+
+		.menu-label,
+		.menu-list span.list-menu-link,
+		.menu-list a {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			cursor: pointer;
+
+			.list-menu-title {
+				overflow: hidden;
+				text-overflow: ellipsis;
+				width: 100%;
+			}
+
+			.color-bubble {
+				height: 12px;
+				flex: 0 0 12px;
+			}
+
+			.favorite {
+				margin-left: .25rem;
+				transition: opacity $transition, color $transition;
+				opacity: 0;
+
+				&:hover {
+					color: $orange;
+				}
+
+				&.is-favorite {
+					opacity: 1;
+					color: $orange;
+				}
+			}
+
+			&:hover .favorite {
+				opacity: 1;
+			}
+		}
+
+		.menu-label {
+			.color-bubble {
+				width: 14px !important;
+				height: 14px !important;
+			}
+
+			.is-archived {
+				min-width: 85px;
+			}
+		}
+
+		.namespace-title {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+			.menu-label {
+				margin-bottom: 0;
+				flex: 1 1 auto;
+
+				.name {
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+				}
+			}
+
+			a:not(.dropdown-item) {
+				color: $vikunja-nav-color;
+				padding: 0 .25rem;
+			}
+
+			::v-deep.dropdown-trigger {
+				padding: .5rem;
+				cursor: pointer;
+			}
+
+			.toggle-lists-icon {
+				svg {
+					transition: all $transition;
+					transform: rotate(90deg);
+					opacity: 1;
+				}
+
+				&.active svg {
+					transform: rotate(0deg);
+					opacity: 0;
+				}
+			}
+
+			&:hover .toggle-lists-icon svg {
+				opacity: 1;
+			}
+
+			&:not(.has-menu) .toggle-lists-icon {
+				padding-right: 1rem;
+			}
+		}
+
+		.menu-label,
+		.nsettings,
+		.menu-list span.list-menu-link,
+		.menu-list a {
+			color: $vikunja-nav-color;
+		}
+
+		.menu-list {
+			li {
+				height: 44px;
+				display: flex;
+				align-items: center;
+
+				::v-deep.dropdown-trigger {
+					opacity: 0;
+					padding: .5rem;
+					cursor: pointer;
+					transition: $transition;
+				}
+
+				&:hover {
+					background: $white;
+
+					::v-deep.dropdown-trigger {
+						opacity: 1;
+					}
+				}
+
+				&.loader-container.is-loading:after {
+					width: 1.5rem;
+					height: 1.5rem;
+					top: calc(50% - .75rem);
+					left: calc(50% - .75rem);
+					border-width: 2px;
+				}
+			}
+
+			.flip-list-move {
+				transition: transform $transition-duration;
+			}
+
+			.ghost {
+				background: $grey-200;
+
+				* {
+					opacity: 0;
+				}
+			}
+
+			a:hover {
+				background: transparent;
+			}
+
+			span.list-menu-link, li > a {
+				padding: 0.75rem .5rem 0.75rem ($navbar-padding * 1.5 - 1.75rem);
+				transition: all 0.2s ease;
+
+				border-radius: 0;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+				overflow: hidden;
+				width: 100%;
+				border-left: $vikunja-nav-selected-width solid transparent;
+
+				.icon {
+					height: 1rem;
+					vertical-align: middle;
+					padding-right: 0.5rem;
+					
+					&.handle {
+						opacity: 0;
+						transition: opacity $transition;
+						margin-right: .25rem;
+						cursor: grab;
+					}
+				}
+				
+				&:hover .icon.handle {
+					opacity: 1;
+				}
+
+				&.router-link-exact-active {
+					color: $primary;
+					border-left: $vikunja-nav-selected-width solid $primary;
+
+					.icon {
+						color: $primary;
+					}
+				}
+
+				&:hover {
+					border-left: $vikunja-nav-selected-width solid $primary;
+				}
+			}
+		}
+
+		.logo {
+			display: none;
+
+			@media screen and (max-width: $tablet) {
+				display: block;
+			}
+		}
+
+		&.namespaces-lists {
+			padding-top: math.div($navbar-padding, 2);
+		}
+
+		&.loader-container.is-loading:after {
+			width: 1.5rem;
+			height: 1.5rem;
+			top: calc(50% - .75rem);
+			left: calc(50% - .75rem);
+			border-width: 2px;
+		}
+
+		.icon {
+			color: $grey-400 !important;
+		}
+	}
+
+	.top-menu {
+		margin-top: math.div($navbar-padding, 2);
+
+		.menu-list {
+			li {
+				font-weight: 500;
+				font-family: $vikunja-font;
+			}
+
+			span.list-menu-link, li > a {
+				padding-left: 2rem;
+				display: inline-block;
+				
+				.icon {
+					padding-bottom: .25rem;
+				}
+			}
+		}
+	}
+}
+
 .list-setting-spacer {
 	width: 32px;
 	flex-shrink: 0;
diff --git a/src/components/home/topNavigation.vue b/src/components/home/topNavigation.vue
index 97b64805..a09e25b9 100644
--- a/src/components/home/topNavigation.vue
+++ b/src/components/home/topNavigation.vue
@@ -151,6 +151,122 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+$vikunja-nav-logo-full-width: 164px;
+
+.navbar {
+	z-index: 4 !important;
+
+	.navbar-brand {
+		display: flex;
+		align-items: center;
+
+		.logo img {
+			width: $vikunja-nav-logo-full-width;
+		}
+	}
+	&.is-dark .navbar-brand > .navbar-item {
+		@media screen and (max-width: $tablet) {
+			margin: 0 auto;
+		}
+	}
+}
+
+.navbar.main-theme {
+	background: $light-background;
+	z-index: 5 !important;
+	justify-content: space-between;
+	align-items: center;
+
+	@media screen and (max-width: $desktop) {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.title {
+		margin: 0;
+		font-size: 1.75rem;
+		text-overflow: ellipsis;
+		overflow: hidden;
+		white-space: nowrap;
+	}
+
+	.navbar-end {
+		margin-left: 0;
+		align-items: center;
+		display: flex;
+	}
+
+	@media screen and (max-width: $tablet) {
+		.navbar-brand {
+			display: none;
+		}
+
+		.user {
+			width: $user-dropdown-width-mobile;
+			display: flex;
+			align-items: center;
+
+			::v-deep.dropdown-trigger {
+				line-height: 1;
+
+				.button {
+					padding: 0 0.25rem;
+					height: 1rem;
+
+					.icon {
+						width: .5rem;
+					}
+				}
+			}
+
+			.username {
+				display: none;
+			}
+		}
+	}
+}
+
+.navbar {
+	// FIXME: notifications should provide a slot for the icon instead, so that we can style it as we want
+	::v-deep {
+		.trigger-button {
+			cursor: pointer;
+			color: $grey-400;
+			padding: .5rem;
+			font-size: 1.25rem;
+			position: relative;
+		}
+
+		> * > .trigger-button {
+			width: $navbar-icon-width;
+		}
+	}
+
+	.user {
+		display: flex;
+		align-items: center;
+
+		span {
+			font-family: $vikunja-font;
+		}
+
+		.avatar {
+			border-radius: 100%;
+			vertical-align: middle;
+			height: 40px;
+		}
+
+		::v-deep.dropdown-trigger .button {
+			background: none;
+
+			&:focus:not(:active), &:active {
+				outline: none !important;
+				box-shadow: none !important;
+			}
+		}
+	}
+}
+
 .list-title {
   display: flex;
   align-items: center;
diff --git a/src/styles/theme/navigation.scss b/src/styles/theme/navigation.scss
index 67f588e3..531a2b9e 100644
--- a/src/styles/theme/navigation.scss
+++ b/src/styles/theme/navigation.scss
@@ -1,405 +1,3 @@
-.navbar {
-	z-index: 4 !important;
-
-	.navbar-dropdown {
-		box-shadow: $navbar-dropdown-boxed-shadow;
-		top: 101%;
-	}
-
-	.navbar-brand {
-		display: flex;
-		align-items: center;
-
-		.logo img {
-			width: $vikunja-nav-logo-full-width;
-		}
-	}
-}
-
-.navbar.main-theme {
-	background: $light-background;
-	z-index: 5 !important;
-	justify-content: space-between;
-	align-items: center;
-
-	.title {
-		margin: 0;
-		font-size: 1.75rem;
-		text-overflow: ellipsis;
-		overflow: hidden;
-		white-space: nowrap;
-	}
-
-	.navbar-end {
-		margin-left: 0;
-		align-items: center;
-		display: flex;
-	}
-
-	@media screen and (max-width: $desktop) {
-		display: flex;
-		justify-content: space-between;
-
-		@media screen and (max-width: $tablet) {
-			.navbar-brand {
-				display: none;
-			}
-
-			.user {
-				width: $user-dropdown-width-mobile;
-				display: flex;
-				align-items: center;
-
-				.dropdown-trigger {
-					line-height: 1;
-
-					.button {
-						padding: 0 .5rem;
-						height: 1rem;
-
-						.icon {
-							width: .5rem;
-						}
-					}
-				}
-
-				.username {
-					display: none;
-				}
-			}
-		}
-	}
-}
-
-.navbar-menu .navbar-item .icon {
-	margin: 0 0.5rem;
-}
-
-.app-container {
-	.namespace-container {
-		background: $vikunja-nav-background;
-		z-index: 6;
-		color: $vikunja-nav-color;
-		padding: 0;
-		transition: all $transition;
-		position: fixed;
-		bottom: 0;
-		top: $navbar-height;
-		overflow-x: auto;
-		width: $navbar-width;
-
-		padding: 0 0 1rem;
-		left: -147vw;
-		bottom: 0;
-
-		@media screen and (max-width: $tablet) {
-			top: 0;
-			width: 70vw;
-		}
-
-		&.is-active {
-			left: 0;
-		}
-
-		.menu {
-			.menu-label {
-				font-size: 1rem;
-				font-weight: 700;
-				font-weight: bold;
-				font-family: $vikunja-font;
-				color: $vikunja-nav-color;
-				font-weight: 500;
-				min-height: 2.5rem;
-				padding-top: 0;
-				padding-left: $navbar-padding;
-
-				overflow: hidden;
-			}
-
-			.menu-label, .menu-list span.list-menu-link, .menu-list a {
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-				cursor: pointer;
-
-				.list-menu-title {
-					overflow: hidden;
-					text-overflow: ellipsis;
-					width: 100%;
-				}
-
-				.color-bubble {
-					height: 12px;
-					flex: 0 0 12px;
-				}
-
-				.favorite {
-					margin-left: .25rem;
-					transition: opacity $transition, color $transition;
-					opacity: 0;
-
-					&:hover {
-						color: $orange;
-					}
-
-					&.is-favorite {
-						opacity: 1;
-						color: $orange;
-					}
-				}
-
-				&:hover .favorite {
-					opacity: 1;
-				}
-			}
-
-			.menu-label {
-				.color-bubble {
-					width: 14px !important;
-					height: 14px !important;
-				}
-
-				.is-archived {
-					min-width: 85px;
-				}
-			}
-
-			.namespace-title {
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-
-				.menu-label {
-					margin-bottom: 0;
-					flex: 1 1 auto;
-
-					.name {
-						overflow: hidden;
-						text-overflow: ellipsis;
-						white-space: nowrap;
-					}
-				}
-
-				a:not(.dropdown-item) {
-					color: $vikunja-nav-color;
-					padding: 0 .25rem;
-				}
-
-				.dropdown-trigger {
-					padding: .5rem;
-					cursor: pointer;
-				}
-
-				.toggle-lists-icon {
-					svg {
-						transition: all $transition;
-						transform: rotate(90deg);
-						opacity: 1;
-					}
-
-					&.active svg {
-						transform: rotate(0deg);
-						opacity: 0;
-					}
-				}
-
-				&:hover .toggle-lists-icon svg {
-					opacity: 1;
-				}
-
-				&:not(.has-menu) .toggle-lists-icon {
-					padding-right: 1rem;
-				}
-			}
-
-			.menu-label, .nsettings, .menu-list span.list-menu-link, .menu-list a {
-				color: $vikunja-nav-color;
-			}
-
-			.menu-list {
-				li {
-					height: 44px;
-					display: flex;
-					align-items: center;
-
-					.dropdown-trigger {
-						opacity: 0;
-						padding: .5rem;
-						cursor: pointer;
-						transition: $transition;
-					}
-
-					&:hover {
-						background: $white;
-
-						.dropdown-trigger {
-							opacity: 1;
-						}
-					}
-
-					&.loader-container.is-loading:after {
-						width: 1.5rem;
-						height: 1.5rem;
-						top: calc(50% - .75rem);
-						left: calc(50% - .75rem);
-						border-width: 2px;
-					}
-				}
-
-				.flip-list-move {
-					transition: transform $transition-duration;
-				}
-
-				.ghost {
-					background: $grey-200;
-
-					* {
-						opacity: 0;
-					}
-				}
-
-				a:hover {
-					background: transparent;
-				}
-
-				span.list-menu-link, li > a {
-					padding: 0.75rem .5rem 0.75rem ($navbar-padding * 1.5 - 1.75rem);
-					transition: all 0.2s ease;
-
-					border-radius: 0;
-					white-space: nowrap;
-					text-overflow: ellipsis;
-					overflow: hidden;
-					width: 100%;
-					border-left: $vikunja-nav-selected-width solid transparent;
-
-					.icon {
-						height: 1rem;
-						vertical-align: middle;
-						padding-right: 0.5rem;
-						
-						&.handle {
-							opacity: 0;
-							transition: opacity $transition;
-							margin-right: .25rem;
-							cursor: grab;
-						}
-
-					}
-					
-					&:hover .icon.handle {
-						opacity: 1;
-					}
-
-					&.router-link-exact-active {
-						color: $primary;
-						border-left: $vikunja-nav-selected-width solid $primary;
-
-						.icon {
-							color: $primary;
-						}
-					}
-
-					&:hover {
-						border-left: $vikunja-nav-selected-width solid $primary;
-					}
-				}
-			}
-
-			.logo {
-				display: none;
-
-				@media screen and (max-width: $tablet) {
-					display: block;
-				}
-			}
-
-			&.namespaces-lists {
-				padding-top: math.div($navbar-padding, 2);
-			}
-
-			&.loader-container.is-loading:after {
-				width: 1.5rem;
-				height: 1.5rem;
-				top: calc(50% - .75rem);
-				left: calc(50% - .75rem);
-				border-width: 2px;
-			}
-
-			.icon {
-				color: $grey-400 !important;
-			}
-		}
-
-		.top-menu {
-			margin-top: math.div($navbar-padding, 2);
-
-			.menu-list {
-				li {
-					font-weight: 500;
-					font-family: $vikunja-font;
-				}
-
-				span.list-menu-link, li > a {
-					padding-left: 2rem;
-					display: inline-block;
-					
-					.icon {
-						padding-bottom: .25rem;
-					}
-				}
-			}
-
-		}
-	}
-}
-
-.navbar {
-	.trigger-button {
-		cursor: pointer;
-		color: $grey-400;
-		padding: .5rem;
-		font-size: 1.25rem;
-		position: relative;
-	}
-
-	> * > .trigger-button {
-		width: $navbar-icon-width;
-	}
-
-	.user {
-		display: flex;
-		align-items: center;
-
-		span {
-			font-family: $vikunja-font;
-		}
-
-		.avatar {
-			border-radius: 100%;
-			vertical-align: middle;
-			height: 40px;
-		}
-
-		.logout-icon {
-			color: $grey-900;
-
-			.icon {
-				vertical-align: middle;
-			}
-		}
-
-		.dropdown-trigger .button {
-			background: none;
-
-			&:focus:not(:active), &:active {
-				outline: none !important;
-				box-shadow: none !important;
-			}
-		}
-	}
-}
-
 .menu-hide-button, .menu-show-button {
 	display: none;
 	z-index: 31;
@@ -460,19 +58,6 @@
 	display: block;
 }
 
-.mobile-overlay {
-	display: none;
-	position: fixed;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	background: rgba(250, 250, 250, 0.8);
-	z-index: 5;
-	opacity: 0;
-	transition: all $transition;
-}
-
 @media screen and (max-width: $tablet) {
 	.menu-hide-button {
 		display: block;
@@ -485,20 +70,11 @@
 		margin-left: $hamburger-menu-icon-spacing;
 	}
 
-	.mobile-overlay {
-		display: block;
-		opacity: 1;
-	}
-
 	.navbar.is-dark .navbar-brand > .navbar-item {
 		margin: 0 auto;
 	}
 }
 
-.logout-icon {
-	margin-right: 0.85rem !important;
-}
-
 .menu-bottom-link {
 	width: 100%;
 	color: $grey-300;
diff --git a/src/styles/variables/variables.scss b/src/styles/variables/variables.scss
index f3246443..6b9f39c2 100644
--- a/src/styles/variables/variables.scss
+++ b/src/styles/variables/variables.scss
@@ -12,18 +12,12 @@ $thickness: 1px;
 $pagination-current-border: $primary;
 $navbar-item-active-color: $primary;
 $dropdown-content-shadow: none;
-$navbar-dropdown-boxed-shadow: $dropdown-content-shadow;
 $bulmaswatch-import-font: false !default;
 $light-background: $grey-100;
 $transition-duration: 100ms;
 
 $vikunja-font: 'Quicksand', sans-serif;
 
-$navbar-padding: 2rem;
-$vikunja-nav-background: $light-background;
-$vikunja-nav-color: $grey-700;
-$vikunja-nav-selected-width: 0.4rem;
-$vikunja-nav-logo-full-width: 164px;
 
 $transition-duration: 150ms;
 $transition: $transition-duration ease;