rockfic/next
1
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>
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%',

30
layouts/default.vue
View File

@ -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,8 +49,7 @@
<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 class="ylayout">
<a-layout-header class="alayhead">
<div style="display: flex; align-items: center; flex-wrap: wrap">
<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>
</div>
</div>
<navbar />
<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',
@ -102,6 +108,10 @@
</template>
</a-layout-sider>
</a-layout>
<a-layout-footer style="bottom: 100%">
<cfooter />
</a-layout-footer>
</a-layout>
<!-- <div class="mlayout">
<a-skeleton/>
<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;
}