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>
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%',

114
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,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;
}