From 480e0204f840ca77893599e4244f84b55a98182a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=98=99=E2=97=A6=20The=20Tablet=20=E2=9D=80=20GamerGirla?=
=?UTF-8?q?ndCo=20=E2=97=A6=E2=9D=A7?= <i.am.the.tablet@proton.me>
Date: Sun, 8 Dec 2024 22:20:32 -0500
Subject: [PATCH] refactor(components): improve sidebar/mobile ux
make it so the trigger isn't just an out-of-place floating button
encapsulate breakpoint-dependent values in `computed`
---
components/layouts/navbar.vue | 1 +
layouts/default.vue | 61 +++++++++++++++++++++++------------
2 files changed, 42 insertions(+), 20 deletions(-)
diff --git a/components/layouts/navbar.vue b/components/layouts/navbar.vue
index b1fbf26..52e85b5 100644
--- a/components/layouts/navbar.vue
+++ b/components/layouts/navbar.vue
@@ -89,6 +89,7 @@
display: flex;
flex-grow: 0.01;
margin-left: auto;
+ padding-right: 1em;
}
.acbut > * + * {
diff --git a/layouts/default.vue b/layouts/default.vue
index 3310a9c..f6cee79 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -6,7 +6,8 @@
import icon from "~/components/icon.vue";
const bp = Grid.useBreakpoint();
-
+ const isMed = computed(() => !!bp.value["md"]);
+ const notMed = computed(() => !isMed.value);
const { useToken } = theme;
const { token } = useToken();
@@ -15,11 +16,8 @@
const {
data: { value: totals },
} = await useApiFetch<{ stories: number; authors: number }>("/totals");
-
+ const leftCollapsed = ref<boolean>(true);
const collapsed = ref<boolean>(true);
- const nav = ref<boolean>(true);
-
- collapsed.value = true;
const sideTriggerVal = computed(() => {
let th = collapsed.value ? " collapsed" : "";
@@ -30,7 +28,6 @@
// provide("sidebar-items", rd.data)
provide("collapsed", collapsed);
- let darko = inject("dark");
</script>
<template>
<a-config-provider
@@ -60,10 +57,10 @@
<a-typography-text type="secondary"> With {{ totals?.stories || 0 }} stories by {{ totals?.authors || 0 }} authors </a-typography-text>
</div>
</div>
- <navbar v-if="!!bp['md']" :inline="false" />
+ <navbar v-if="isMed" :inline="false" />
</div>
- <a-button class="mobileTrigger" type="primary" @click="() => (nav = !nav)" v-if="!bp['md']">
- <menu-unfold-outlined v-if="nav" />
+ <a-button class="mobileTrigger" type="primary" @click="() => (leftCollapsed = !leftCollapsed)" v-if="notMed">
+ <menu-unfold-outlined v-if="leftCollapsed" />
<menu-fold-outlined v-else />
</a-button>
</a-layout-header>
@@ -73,41 +70,52 @@
:theme="darkBool ? 'dark' : 'light'"
:collapsed-width="0"
:collapsible="true"
- v-model:collapsed="collapsed"
- v-if="!bp['md']"
+ v-model:collapsed="leftCollapsed"
+ v-if="notMed"
+ :style="{
+ left: 0,
+ position: 'absolute',
+ height: '100% !important',
+ 'z-index': 100,
+ borderRight: '1.5px solid #ccc',
+ }"
>
<navbar inline />
</a-layout-sider>
- <a-layout-content style="flex-grow: 1">
+ <a-layout-content
+ :style="{
+ flexGrow: 1,
+ paddingRight: isMed ? '3em' : '1em',
+ }"
+ >
<slot />
</a-layout-content>
<a-layout-sider
:zero-width-trigger-style="{
background: '#e92662',
padding: '1.2em',
- position: 'fixed',
- right: 0,
borderRadius: '15%',
color: 'white',
border: '2.4px solid #fffFFF80',
- top: '75vh',
'z-index': 9,
}"
- :theme="darko ? 'dark' : 'light'"
- :breakpoint="'lg'"
+ :theme="darkBool ? 'dark' : 'light'"
v-model:collapsed="collapsed"
:collapsible="true"
- :collapsed-width="0"
+ :collapsed-width="60"
:style="{
color: col,
right: '-3px',
alignSelf: 'stretch',
- borderLeft: `2px solid ${darko ? '#fff' : '#ccc'}`,
+ borderLeft: `2px solid ${darkBool ? '#fff' : '#ccc'}`,
+ position: 'sticky',
+ height: '100vh',
+ top: 0,
}"
>
<sidebar-thing />
<template #trigger>
- <div class="outerst" @click="() => (collapsed = !collapsed)">
+ <div class="outerst">
<div :class="sideTriggerVal">
<icon istyle="solid" name="chevron-right" :size="30" />
</div>
@@ -171,6 +179,10 @@
width: 100%;
}
+ .mlayout {
+ position: relative;
+ }
+
.mlayout,
footer {
padding: 1.5em;
@@ -182,10 +194,12 @@
.mlayout {
padding: 3em;
+ padding-right: 0em !important;
}
.mlayout > footer {
padding: 0;
+ margin-left: 0;
/* padding-right: calc(4em + 90px); */
}
@@ -291,6 +305,13 @@
.ant-menu-light {
background: inherit !important;
}
+ .mlayout .ant-layout-sider:first-child .ant-layout-sider-children {
+ height: inherit;
+ }
+ .mlayout .ant-layout-sider:first-child .ant-layout-sider-children .some-wrapper {
+ position: sticky;
+ top: 0;
+ }
.ant-layout-sider-children {
/* display: flex; */