refactor(components): reconfigure sidebar to be perfect(tm)

layouts/default.vue

@@ -61,21 +61,36 @@
 			</a-layout-footer>
 		</a-layout>
 		<a-layout-sider
+			:zero-width-trigger-style="{
+				background: '#e92678',
+				padding: '1.2em',
+				position: 'fixed',
+				right: 0,
+				borderRadius: '15%',
+				color: 'white',
+				border: '2.4px solid #fff',
+				top: '75vh',
+			}"
 			:theme="darko ? 'dark' : 'light'"
-			:breakpoint="'md'"
-			:trigger="null"
+			:breakpoint="'lg'"
 			v-model:collapsed="collapsed"
 			:collapsible="true"
+			:collapsed-width="0"
 			:style="{
 				color: col,
+				height: '100%',
+				position: 'fixed',
+				right: '0px',
 			}"
 		>
 			<sidebar-thing />
-			<div class="outerst" @click="() => (collapsed = !collapsed)">
-				<div :class="sideTriggerVal">
-					<icon istyle="solid" name="chevron-right" :size="30" />
+			<template #trigger>
+				<div class="outerst" @click="() => (collapsed = !collapsed)">
+					<div :class="sideTriggerVal">
+						<icon istyle="solid" name="chevron-right" :size="30" />
+					</div>
 				</div>
-			</div>
+			</template>
 		</a-layout-sider>
 	</a-layout>
 	<!-- <div class="mlayout">
@@ -93,6 +108,10 @@
 		display: inline-block;
 	}
 
+	.ylayout {
+		height: 100%;
+	}
+
 	.sideWrap {
 		height: 100vh;
 		right: -1rem;
@@ -121,16 +140,6 @@
 		width: 100%;
 	}
 
-	.outerst {
-		width: 100%;
-		justify-content: center;
-		position: fixed;
-		top: 75vh;
-		transform: translateX(15px);
-		/* height: 100vh; */
-		/* overflow-y: scroll; */
-	}
-
 	.mlayout,
 	footer {
 		padding: 1.5em;
@@ -192,13 +201,19 @@
 	}
 
 	.sider-trigger {
+		position: relative;
 		/* display: flex; */
 		/* padding-left: 4.8em;
 	padding-right: 1.8em; */
 	}
 
+	.sider-trigger.collapsed {
+		left: 0;
+	}
+
 	.sider-trigger.collapsed i {
 		/* transform: rotate3d(0, 1, 0, 180deg); */
+		position: relative;
 		transform: rotate(540deg);
 	}