From 76d3ca3ece82ab8b3f0de6cd0d45ea12de00c5f1 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Thu, 11 May 2023 19:46:42 -0400
Subject: [PATCH] Replace classic navbar w/ new

---
 packages/client/src/ui/_common_/navbar.vue | 17 +++---
 packages/client/src/ui/classic.vue         | 61 ++++++++++++++++++----
 2 files changed, 57 insertions(+), 21 deletions(-)

diff --git a/packages/client/src/ui/_common_/navbar.vue b/packages/client/src/ui/_common_/navbar.vue
index 4ff10845f..31c4a40c3 100644
--- a/packages/client/src/ui/_common_/navbar.vue
+++ b/packages/client/src/ui/_common_/navbar.vue
@@ -1,5 +1,5 @@
 <template>
-	<header class="mvcprjjd" :class="{ iconOnly }">
+	<header class="mvcprjjd sidebar" :class="{ iconOnly }">
 		<div class="body">
 			<div class="top">
 				<div
@@ -236,16 +236,13 @@ function more(ev: MouseEvent) {
 .mvcprjjd {
 	$nav-width: 250px;
 	$nav-icon-only-width: 80px;
-
 	flex: 0 0 $nav-width;
 	width: $nav-width;
 	box-sizing: border-box;
 
 	> .body {
-		position: fixed;
+		position: sticky;
 		top: 0;
-		left: 0;
-		z-index: 1001;
 		width: $nav-icon-only-width;
 		// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
 		height: calc(var(--vh, 1vh) * 100);
@@ -260,17 +257,15 @@ function more(ev: MouseEvent) {
 
 	&:not(.iconOnly) {
 		> .body {
+			margin-left: -200px;
+			padding-left: 200px;
+			box-sizing: content-box;
 			width: $nav-width;
 
 			> .top {
-				position: sticky;
-				top: 0;
+				position: relative;
 				z-index: 1;
 				padding: 2rem 0;
-				background: var(--X14);
-				-webkit-backdrop-filter: var(--blur, blur(8px));
-				backdrop-filter: var(--blur, blur(8px));
-
 				> .banner {
 					position: absolute;
 					top: 0;
diff --git a/packages/client/src/ui/classic.vue b/packages/client/src/ui/classic.vue
index 2c7f12aca..b40632196 100644
--- a/packages/client/src/ui/classic.vue
+++ b/packages/client/src/ui/classic.vue
@@ -13,9 +13,7 @@
 			class="columns"
 			:class="{ fullView, withGlobalHeader: showMenuOnTop }"
 		>
-			<div v-if="!showMenuOnTop" class="sidebar">
-				<XSidebar />
-			</div>
+			<XSidebar v-if="!showMenuOnTop"/>
 			<div v-else ref="widgetsLeft" class="widgets left">
 				<XWidgets
 					:place="'left'"
@@ -57,7 +55,7 @@
 
 <script lang="ts" setup>
 import { defineAsyncComponent, markRaw, ref, onMounted, provide } from "vue";
-import XSidebar from "./classic.sidebar.vue";
+import XSidebar from "./_common_/navbar.vue";
 import XCommon from "./_common_/common.vue";
 import type { ComputedRef } from "vue";
 import type { PageMetadata } from "@/scripts/page-metadata";
@@ -236,6 +234,9 @@ onMounted(() => {
 	min-height: calc(var(--vh, 1vh) * 100);
 	box-sizing: border-box;
 
+	--navBg: transparent;
+	--X14: var(--acrylicBg);
+
 	&.wallpaper {
 		background: var(--wallpaperOverlay);
 		//backdrop-filter: var(--blur, blur(4px));
@@ -250,7 +251,7 @@ onMounted(() => {
 		&.fullView {
 			margin: 0;
 
-			> .sidebar {
+			> :deep(.sidebar) {
 				display: none;
 			}
 
@@ -266,6 +267,50 @@ onMounted(() => {
 			}
 		}
 
+		> :deep(.sidebar) {
+			margin-left: -200px;
+			padding-left: 200px;
+			box-sizing: content-box;
+			.banner {
+				pointer-events: none;
+				mask: radial-gradient(farthest-side at top, hsl(0, 0%, 0%) 0%,
+					hsla(0, 0%, 0%, 0.987) 0.3%,
+					hsla(0, 0%, 0%, 0.951) 1.4%,
+					hsla(0, 0%, 0%, 0.896) 3.2%,
+					hsla(0, 0%, 0%, 0.825) 5.8%,
+					hsla(0, 0%, 0%, 0.741) 9.3%,
+					hsla(0, 0%, 0%, 0.648) 13.6%,
+					hsla(0, 0%, 0%, 0.55) 18.9%,
+					hsla(0, 0%, 0%, 0.45) 25.1%,
+					hsla(0, 0%, 0%, 0.352) 32.4%,
+					hsla(0, 0%, 0%, 0.259) 40.7%,
+					hsla(0, 0%, 0%, 0.175) 50.2%,
+					hsla(0, 0%, 0%, 0.104) 60.8%,
+					hsla(0, 0%, 0%, 0.049) 72.6%,
+					hsla(0, 0%, 0%, 0.013) 85.7%,
+					hsla(0, 0%, 0%, 0) 100%) !important;
+				-webkit-mask: radial-gradient(farthest-side at top, hsl(0, 0%, 0%) 0%,
+					hsla(0, 0%, 0%, 0.987) 0.3%,
+					hsla(0, 0%, 0%, 0.951) 1.4%,
+					hsla(0, 0%, 0%, 0.896) 3.2%,
+					hsla(0, 0%, 0%, 0.825) 5.8%,
+					hsla(0, 0%, 0%, 0.741) 9.3%,
+					hsla(0, 0%, 0%, 0.648) 13.6%,
+					hsla(0, 0%, 0%, 0.55) 18.9%,
+					hsla(0, 0%, 0%, 0.45) 25.1%,
+					hsla(0, 0%, 0%, 0.352) 32.4%,
+					hsla(0, 0%, 0%, 0.259) 40.7%,
+					hsla(0, 0%, 0%, 0.175) 50.2%,
+					hsla(0, 0%, 0%, 0.104) 60.8%,
+					hsla(0, 0%, 0%, 0.049) 72.6%,
+					hsla(0, 0%, 0%, 0.013) 85.7%,
+					hsla(0, 0%, 0%, 0) 100%) !important;
+				width: 125% !important;
+				left: -12.5% !important;
+				height: 125% !important;
+			}
+		}
+
 		> .main {
 			min-width: 0;
 			width: 750px;
@@ -292,10 +337,6 @@ onMounted(() => {
 			}
 		}
 
-		> .sidebar {
-			margin-top: 16px;
-		}
-
 		&.withGlobalHeader {
 			> .main {
 				margin-top: 0;
@@ -313,7 +354,7 @@ onMounted(() => {
 		@media (max-width: 850px) {
 			margin: 0;
 
-			> .sidebar {
+			> :deep(.sidebar) {
 				border-right: solid 0.5px var(--divider);
 			}