rockfic/next
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(components): change layout

Browse Source 
add collapsible version of navbar to side if screen width < medium, otherwise display the full horizontal navbar at the top
This commit is contained in:
☙◦ The Tablet ❀ GamerGirlandCo ◦❧ 2023-12-30 19:09:06 -05:00
parent bd06f7d4b3
commit 21dbcde7c8
Signed by: tablet
GPG Key ID: 924A5F6AF051E87C
2 changed files with 68 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
components/layouts/navbar.vue
View File

@ -1,4 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import { Grid } from "ant-design-vue";
const bp = Grid.useBreakpoint();
const { data, status } = useAuth(); const { data, status } = useAuth();
const itemMap = ref({ const itemMap = ref({
home: "/", home: "/",
@ -15,6 +17,7 @@
admin: "/admin", admin: "/admin",
logout: "/auth/logout", 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 cur = ref<string>(Object.keys(itemMap.value).find((a) => itemMap.value[a] === useRoute().path) || useRoute().path);
let selected: string[] = [cur.value]; let selected: string[] = [cur.value];
@ -28,12 +31,12 @@
</script> </script>
<template> <template>
<div class="some-wrapper"> <div class="some-wrapper" :style="{ flexDirection: inline ? 'column' : 'row' }">
<a-menu <a-menu
mode="horizontal" :mode="inline ? 'inline' : 'horizontal'"
class="navibar" class="navibar"
:style="{ :style="{
height: '40px', height: !inline ? '40px' : '100%',
alignSelf: 'center', alignSelf: 'center',
justifyContent: 'stretch', justifyContent: 'stretch',
width: '100%', width: '100%',

30
layouts/default.vue
View File

@ -1,10 +1,12 @@
<script setup lang="ts"> <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 navbar from "~/components/layouts/navbar.vue";
import cfooter from "~/components/layouts/footer.vue"; import cfooter from "~/components/layouts/footer.vue";
import sidebarThing from "~/components/layouts/sidebar.vue"; import sidebarThing from "~/components/layouts/sidebar.vue";
import icon from "~/components/icon.vue"; import icon from "~/components/icon.vue";
const bp = Grid.useBreakpoint();
const { useToken } = theme; const { useToken } = theme;
const { token } = useToken(); const { token } = useToken();
@ -15,6 +17,7 @@
} = await useApiFetch<{ stories: number; authors: number }>("/totals"); } = await useApiFetch<{ stories: number; authors: number }>("/totals");
const collapsed = ref<boolean>(true); const collapsed = ref<boolean>(true);
const nav = ref<boolean>(false);
collapsed.value = true; collapsed.value = true;
@ -46,8 +49,7 @@
<a-typography-title> ¯\_(ツ)_/¯ </a-typography-title> <a-typography-title> ¯\_(ツ)_/¯ </a-typography-title>
<i> Nothing here but crickets. </i> <i> Nothing here but crickets. </i>
</template> </template>
<a-layout class="ylayout" has-sider> <a-layout class="ylayout">
<a-layout class="mlayout">
<a-layout-header class="alayhead"> <a-layout-header class="alayhead">
<div style="display: flex; align-items: center; flex-wrap: wrap"> <div style="display: flex; align-items: center; flex-wrap: wrap">
<div class="siteTitle">Rockfic</div> <div class="siteTitle">Rockfic</div>
@ -57,16 +59,20 @@
<a-typography-text type="secondary"> With {{ totals?.stories || 0 }} stories by {{ totals?.authors || 0 }} authors </a-typography-text> <a-typography-text type="secondary"> With {{ totals?.stories || 0 }} stories by {{ totals?.authors || 0 }} authors </a-typography-text>
</div> </div>
</div> </div>
<navbar /> <navbar v-if="!!bp['md']" :inline="false" />
</div> </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-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"> <a-layout-content style="flex-grow: 1">
<slot /> <slot />
</a-layout-content> </a-layout-content>
<a-layout-footer style="bottom: 100%">
<cfooter />
</a-layout-footer>
</a-layout>
<a-layout-sider <a-layout-sider
:zero-width-trigger-style="{ :zero-width-trigger-style="{
background: '#e92662', background: '#e92662',
@ -102,6 +108,10 @@
</template> </template>
</a-layout-sider> </a-layout-sider>
</a-layout> </a-layout>
<a-layout-footer style="bottom: 100%">
<cfooter />
</a-layout-footer>
</a-layout>
<!-- <div class="mlayout"> <!-- <div class="mlayout">
<a-skeleton/> <a-skeleton/>
<a-skeleton/> <a-skeleton/>
@ -243,8 +253,8 @@
/* background: inherit !important; */ /* background: inherit !important; */
height: unset !important; height: unset !important;
margin-bottom: 1.5em; margin-bottom: 1.5em;
padding-left: 0.5em; padding: 0 2em;
padding-right: 0.5em; padding-top: 1.4em;
width: auto; width: auto;
} }