From 2952feec0b7c93ad338d437063f38f01b620d73c Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Mon, 27 Mar 2023 10:26:34 +0200
Subject: [PATCH] fix(navigation): make the styles work again

---
 src/components/home/ProjectsNavigation.vue |   9 +-
 src/components/home/navigation.vue         | 230 ++++-----------------
 src/styles/common-imports.scss             |   4 +
 src/styles/theme/_index.scss               |   3 +-
 src/styles/theme/navigation.scss           | 116 +++++++++++
 5 files changed, 165 insertions(+), 197 deletions(-)
 create mode 100644 src/styles/theme/navigation.scss

diff --git a/src/components/home/ProjectsNavigation.vue b/src/components/home/ProjectsNavigation.vue
index 6c27a6580..193f6b387 100644
--- a/src/components/home/ProjectsNavigation.vue
+++ b/src/components/home/ProjectsNavigation.vue
@@ -152,4 +152,11 @@ async function saveProjectPosition(e: SortableEvent) {
 		projectUpdating.value[project.id] = false
 	}
 }
-</script>
\ No newline at end of file
+</script>
+
+<style lang="scss" scoped>
+.list-setting-spacer {
+	width: 2.5rem;
+	flex-shrink: 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/home/navigation.vue b/src/components/home/navigation.vue
index 2318cfc76..df4b7f1e1 100644
--- a/src/components/home/navigation.vue
+++ b/src/components/home/navigation.vue
@@ -47,44 +47,44 @@
 				</li>
 			</ul>
 		</nav>
-		
-		<nav>
+
+		<nav class="menu namespaces-lists">
 			<ProjectsNavigation :projects="projects"/>
 		</nav>
 
-<!--		<nav class="menu namespaces-lists loader-container is-loading-small" :class="{'is-loading': loading}">-->
-<!--			<template v-for="(n, nk) in namespaces" :key="n.id">-->
-<!--				<div class="namespace-title" :class="{'has-menu': n.id > 0}">-->
-<!--					<BaseButton-->
-<!--						@click="toggleProjects(n.id)"-->
-<!--						class="menu-label"-->
-<!--						v-tooltip="namespaceTitles[nk]"-->
-<!--					>-->
-<!--						<ColorBubble-->
-<!--								v-if="n.hexColor !== ''"-->
-<!--								:color="n.hexColor"-->
-<!--								class="mr-1"-->
-<!--						/>-->
-<!--						<span class="name">{{ namespaceTitles[nk] }}</span>-->
-<!--						<div-->
-<!--								class="icon menu-item-icon is-small toggle-lists-icon pl-2"-->
-<!--								:class="{'active': typeof projectsVisible[n.id] !== 'undefined' ? projectsVisible[n.id] : true}"-->
-<!--						>-->
-<!--							<icon icon="chevron-down"/>-->
-<!--						</div>-->
-<!--						<span class="count" :class="{'ml-2 mr-0': n.id > 0}">-->
-<!--							({{ namespaceProjectsCount[nk] }})-->
-<!--						</span>-->
-<!--					</BaseButton>-->
-<!--					<namespace-settings-dropdown class="menu-list-dropdown" :namespace="n" v-if="n.id > 0"/>-->
-<!--				</div>-->
-<!--				&lt;!&ndash;-->
-<!--					NOTE: a v-model / computed setter is not possible, since the updateActiveProjects function-->
-<!--					triggered by the change needs to have access to the current namespace-->
-<!--				&ndash;&gt;-->
+		<!--		<nav class="menu namespaces-lists loader-container is-loading-small" :class="{'is-loading': loading}">-->
+		<!--			<template v-for="(n, nk) in namespaces" :key="n.id">-->
+		<!--				<div class="namespace-title" :class="{'has-menu': n.id > 0}">-->
+		<!--					<BaseButton-->
+		<!--						@click="toggleProjects(n.id)"-->
+		<!--						class="menu-label"-->
+		<!--						v-tooltip="namespaceTitles[nk]"-->
+		<!--					>-->
+		<!--						<ColorBubble-->
+		<!--								v-if="n.hexColor !== ''"-->
+		<!--								:color="n.hexColor"-->
+		<!--								class="mr-1"-->
+		<!--						/>-->
+		<!--						<span class="name">{{ namespaceTitles[nk] }}</span>-->
+		<!--						<div-->
+		<!--								class="icon menu-item-icon is-small toggle-lists-icon pl-2"-->
+		<!--								:class="{'active': typeof projectsVisible[n.id] !== 'undefined' ? projectsVisible[n.id] : true}"-->
+		<!--						>-->
+		<!--							<icon icon="chevron-down"/>-->
+		<!--						</div>-->
+		<!--						<span class="count" :class="{'ml-2 mr-0': n.id > 0}">-->
+		<!--							({{ namespaceProjectsCount[nk] }})-->
+		<!--						</span>-->
+		<!--					</BaseButton>-->
+		<!--					<namespace-settings-dropdown class="menu-list-dropdown" :namespace="n" v-if="n.id > 0"/>-->
+		<!--				</div>-->
+		<!--				&lt;!&ndash;-->
+		<!--					NOTE: a v-model / computed setter is not possible, since the updateActiveProjects function-->
+		<!--					triggered by the change needs to have access to the current namespace-->
+		<!--				&ndash;&gt;-->
 
-<!--			</template>-->
-<!--		</nav>-->
+		<!--			</template>-->
+		<!--		</nav>-->
 		<PoweredByLink/>
 	</aside>
 </template>
@@ -169,11 +169,6 @@ function updateActiveProjects(namespace: INamespace, activeProjects: IProject[])
 </script>
 
 <style lang="scss" scoped>
-$navbar-padding: 2rem;
-$vikunja-nav-background: var(--site-background);
-$vikunja-nav-color: var(--grey-700);
-$vikunja-nav-selected-width: 0.4rem;
-
 .logo {
 	display: block;
 
@@ -187,7 +182,7 @@ $vikunja-nav-selected-width: 0.4rem;
 }
 
 .namespace-container {
-	background: $vikunja-nav-background;
+	background: var(--site-background);
 	color: $vikunja-nav-color;
 	padding: 0 0 1rem;
 	transition: transform $transition-duration ease-in;
@@ -211,123 +206,6 @@ $vikunja-nav-selected-width: 0.4rem;
 	}
 }
 
-// these are general menu styles
-// should be in own components
-.menu {
-	.menu-label,
-	.menu-list .list-menu-link,
-	.menu-list a {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		cursor: pointer;
-
-		.color-bubble {
-			height: 12px;
-			flex: 0 0 12px;
-		}
-	}
-
-	.menu-list {
-		li {
-			height: 44px;
-			display: flex;
-			align-items: center;
-
-			&:hover {
-				background: var(--white);
-			}
-
-			.menu-list-dropdown {
-				opacity: 1;
-				transition: $transition;
-			}
-
-			@media(hover: hover) and (pointer: fine) {
-				.menu-list-dropdown {
-					opacity: 0;
-				}
-
-				&:hover .menu-list-dropdown {
-					opacity: 1;
-				}
-			}
-
-		}
-
-		.menu-item-icon {
-			color: var(--grey-400);
-		}
-
-		.menu-list-dropdown-trigger {
-			display: flex;
-			padding: 0.5rem;
-		}
-
-		.flip-list-move {
-			transition: transform $transition-duration;
-		}
-
-		.ghost {
-			background: var(--grey-200);
-
-			* {
-				opacity: 0;
-			}
-		}
-
-		a:hover {
-			background: transparent;
-		}
-
-		.list-menu-link,
-		li > a {
-			color: $vikunja-nav-color;
-			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;
-
-			&:hover {
-				border-left: $vikunja-nav-selected-width solid var(--primary);
-			}
-
-			&.router-link-exact-active {
-				color: var(--primary);
-				border-left: $vikunja-nav-selected-width solid var(--primary);
-			}
-
-			.icon {
-				height: 1rem;
-				vertical-align: middle;
-				padding-right: 0.5rem;
-			}
-
-			&.router-link-exact-active .icon:not(.handle) {
-				color: var(--primary);
-			}
-
-			.handle {
-				opacity: 0;
-				transition: opacity $transition;
-				margin-right: .25rem;
-			}
-
-			&:hover .handle {
-				opacity: 1;
-			}
-		}
-		&:not(.dragging-disabled) .handle {
-			cursor: grab;
-		}
-	}
-}
-
 .top-menu {
 	margin-top: math.div($navbar-padding, 2);
 
@@ -421,42 +299,4 @@ $vikunja-nav-selected-width: 0.4rem;
 		min-width: 85px;
 	}
 }
-
-.namespace-title {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	color: $vikunja-nav-color;
-	padding: 0 .25rem;
-
-	.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;
-	}
-}
-
-.list-setting-spacer {
-	width: 2.5rem;
-	flex-shrink: 0;
-}
-
-.namespaces-list.loader-container.is-loading {
-	min-height: calc(100vh - #{$navbar-height + 1.5rem + 1rem + 1.5rem});
-}
 </style>
diff --git a/src/styles/common-imports.scss b/src/styles/common-imports.scss
index a383c2c8a..82e596f69 100644
--- a/src/styles/common-imports.scss
+++ b/src/styles/common-imports.scss
@@ -33,3 +33,7 @@ $switch-view-height: 2.69rem;
 
 $navbar-height: 4rem;
 $navbar-width: 300px;
+$navbar-padding: 2rem;
+
+$vikunja-nav-color: var(--grey-700);
+$vikunja-nav-selected-width: 0.4rem;
diff --git a/src/styles/theme/_index.scss b/src/styles/theme/_index.scss
index bc86c7bfe..5ce534bbd 100644
--- a/src/styles/theme/_index.scss
+++ b/src/styles/theme/_index.scss
@@ -8,4 +8,5 @@
 @import "link-share";
 @import "loading";
 @import "flatpickr";
-@import 'helpers';
\ No newline at end of file
+@import 'helpers';
+@import 'navigation';
\ No newline at end of file
diff --git a/src/styles/theme/navigation.scss b/src/styles/theme/navigation.scss
new file mode 100644
index 000000000..0caf6aa47
--- /dev/null
+++ b/src/styles/theme/navigation.scss
@@ -0,0 +1,116 @@
+// these are general menu styles
+// should be in own components
+.menu {
+  .menu-label,
+  .menu-list .list-menu-link,
+  .menu-list a {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    .color-bubble {
+      height: 12px;
+      flex: 0 0 12px;
+    }
+  }
+
+  .menu-list {
+    li {
+      height: 44px;
+      display: flex;
+      align-items: center;
+
+      &:hover {
+        background: var(--white);
+      }
+
+      .menu-list-dropdown {
+        opacity: 1;
+        transition: $transition;
+      }
+
+      @media(hover: hover) and (pointer: fine) {
+        .menu-list-dropdown {
+          opacity: 0;
+        }
+
+        &:hover .menu-list-dropdown {
+          opacity: 1;
+        }
+      }
+
+    }
+
+    .menu-item-icon {
+      color: var(--grey-400);
+    }
+
+    .menu-list-dropdown-trigger {
+      display: flex;
+      padding: 0.5rem;
+    }
+
+    .flip-list-move {
+      transition: transform $transition-duration;
+    }
+
+    .ghost {
+      background: var(--grey-200);
+
+      * {
+        opacity: 0;
+      }
+    }
+
+    a:hover {
+      background: transparent;
+    }
+
+    .list-menu-link,
+    li > a {
+      color: $vikunja-nav-color;
+      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;
+
+      &:hover {
+        border-left: $vikunja-nav-selected-width solid var(--primary);
+      }
+
+      &.router-link-exact-active {
+        color: var(--primary);
+        border-left: $vikunja-nav-selected-width solid var(--primary);
+      }
+
+      .icon {
+        height: 1rem;
+        vertical-align: middle;
+        padding-right: 0.5rem;
+      }
+
+      &.router-link-exact-active .icon:not(.handle) {
+        color: var(--primary);
+      }
+
+      .handle {
+        opacity: 0;
+        transition: opacity $transition;
+        margin-right: .25rem;
+      }
+
+      &:hover .handle {
+        opacity: 1;
+      }
+    }
+
+    &:not(.dragging-disabled) .handle {
+      cursor: grab;
+    }
+  }
+}