From 21dbcde7c851cfcd73939bc4143157af507f3e72 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: Sat, 30 Dec 2023 19:09:06 -0500
Subject: [PATCH] refactor(components): change layout
add collapsible version of navbar to side if screen width < medium, otherwise display the full horizontal navbar at the top
---
components/layouts/navbar.vue | 9 ++-
layouts/default.vue | 114 ++++++++++++++++++----------------
2 files changed, 68 insertions(+), 55 deletions(-)
diff --git a/components/layouts/navbar.vue b/components/layouts/navbar.vue
index f020266..80badb8 100644
--- a/components/layouts/navbar.vue
+++ b/components/layouts/navbar.vue
@@ -1,4 +1,6 @@
<script lang="ts" setup>
+ import { Grid } from "ant-design-vue";
+ const bp = Grid.useBreakpoint();
const { data, status } = useAuth();
const itemMap = ref({
home: "/",
@@ -15,6 +17,7 @@
admin: "/admin",
logout: "/auth/logout",
});
+ const propo = defineProps<{ inline: boolean }>();
let cur = ref<string>(Object.keys(itemMap.value).find((a) => itemMap.value[a] === useRoute().path) || useRoute().path);
let selected: string[] = [cur.value];
@@ -28,12 +31,12 @@
</script>
<template>
- <div class="some-wrapper">
+ <div class="some-wrapper" :style="{ flexDirection: inline ? 'column' : 'row' }">
<a-menu
- mode="horizontal"
+ :mode="inline ? 'inline' : 'horizontal'"
class="navibar"
:style="{
- height: '40px',
+ height: !inline ? '40px' : '100%',
alignSelf: 'center',
justifyContent: 'stretch',
width: '100%',
diff --git a/layouts/default.vue b/layouts/default.vue
index 79b3632..63bd7bb 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,10 +1,12 @@
<script setup lang="ts">
- import { theme } from "ant-design-vue";
+ import { theme, Grid } from "ant-design-vue";
import navbar from "~/components/layouts/navbar.vue";
import cfooter from "~/components/layouts/footer.vue";
import sidebarThing from "~/components/layouts/sidebar.vue";
import icon from "~/components/icon.vue";
+ const bp = Grid.useBreakpoint();
+
const { useToken } = theme;
const { token } = useToken();
@@ -15,6 +17,7 @@
} = await useApiFetch<{ stories: number; authors: number }>("/totals");
const collapsed = ref<boolean>(true);
+ const nav = ref<boolean>(false);
collapsed.value = true;
@@ -46,61 +49,68 @@
<a-typography-title> ¯\_(ツ)_/¯ </a-typography-title>
<i> Nothing here but crickets. </i>
</template>
- <a-layout class="ylayout" has-sider>
- <a-layout class="mlayout">
- <a-layout-header class="alayhead">
- <div style="display: flex; align-items: center; flex-wrap: wrap">
- <div class="siteTitle">Rockfic</div>
- <div class="stat-block">
- <div>
- <a-typography-text> Band fiction that rocks </a-typography-text>
- <a-typography-text type="secondary"> With {{ totals?.stories || 0 }} stories by {{ totals?.authors || 0 }} authors </a-typography-text>
- </div>
+ <a-layout class="ylayout">
+ <a-layout-header class="alayhead">
+ <div style="display: flex; align-items: center; flex-wrap: wrap">
+ <div class="siteTitle">Rockfic</div>
+ <div class="stat-block">
+ <div>
+ <a-typography-text> Band fiction that rocks </a-typography-text>
+ <a-typography-text type="secondary"> With {{ totals?.stories || 0 }} stories by {{ totals?.authors || 0 }} authors </a-typography-text>
</div>
- <navbar />
</div>
- </a-layout-header>
+ <navbar v-if="!!bp['md']" :inline="false" />
+ </div>
+ <a-button type="primary" @click="() => (nav = !nav)" v-if="!bp['md']">
+ <menu-unfold-outlined v-if="nav" />
+ <menu-fold-outlined v-else />
+ </a-button>
+ </a-layout-header>
+ <a-layout class="mlayout" has-sider>
+ <a-layout-sider :trigger="null" :collapsed-width="0" :collapsible="true" v-model:collapsed="nav" v-if="!bp['md']">
+ <navbar inline />
+ </a-layout-sider>
<a-layout-content style="flex-grow: 1">
<slot />
</a-layout-content>
- <a-layout-footer style="bottom: 100%">
- <cfooter />
- </a-layout-footer>
- </a-layout>
- <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': 99999999,
- }"
- :theme="darko ? 'dark' : 'light'"
- :breakpoint="'lg'"
- v-model:collapsed="collapsed"
- :collapsible="true"
- :collapsed-width="0"
- :style="{
- color: col,
- height: '100%',
- position: 'fixed',
- right: '0px',
- borderLeft: `2px solid ${darko ? '#fff' : '#ccc'}`,
- }"
- >
- <sidebar-thing />
- <template #trigger>
- <div class="outerst" @click="() => (collapsed = !collapsed)">
- <div :class="sideTriggerVal">
- <icon istyle="solid" name="chevron-right" :size="30" />
+ <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': 99999999,
+ }"
+ :theme="darko ? 'dark' : 'light'"
+ :breakpoint="'lg'"
+ v-model:collapsed="collapsed"
+ :collapsible="true"
+ :collapsed-width="0"
+ :style="{
+ color: col,
+ height: '100%',
+ position: 'fixed',
+ right: '0px',
+ borderLeft: `2px solid ${darko ? '#fff' : '#ccc'}`,
+ }"
+ >
+ <sidebar-thing />
+ <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>
+ </template>
+ </a-layout-sider>
+ </a-layout>
+ <a-layout-footer style="bottom: 100%">
+ <cfooter />
+ </a-layout-footer>
</a-layout>
<!-- <div class="mlayout">
<a-skeleton/>
@@ -243,8 +253,8 @@
/* background: inherit !important; */
height: unset !important;
margin-bottom: 1.5em;
- padding-left: 0.5em;
- padding-right: 0.5em;
+ padding: 0 2em;
+ padding-top: 1.4em;
width: auto;
}