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

refactor(pages, components): rearrange layout

Browse Source 
sidebars now open beside the actual page content instead of beside the body
This commit is contained in:
✑ ☙◦❀ The Tablet ☯ GamerGirlandCo ❀◦❧ 2024-04-20 20:59:30 -04:00
parent 05a20ff94e
commit 1a3135c6c4
Signed by: tablet
GPG Key ID: 924A5F6AF051E87C
1 changed files with 68 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
layouts/default.vue
View File

@ -50,7 +50,8 @@
<i> Nothing here but crickets. </i> <i> Nothing here but crickets. </i>
</template> </template>
<a-layout class="ylayout"> <a-layout class="ylayout">
<a-layout-header class="alayhead"> <a-layout>
<a-layout-header class="alayhead" :style="{ backgroundColor: darkBool ? '#141414' : '#f5f5f5' }">
<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>
<div class="stat-block"> <div class="stat-block">
@ -61,13 +62,21 @@
</div> </div>
<navbar v-if="!!bp['md']" :inline="false" /> <navbar v-if="!!bp['md']" :inline="false" />
</div> </div>
<a-button class="mobileTrigger" type="primary" @click="() => (collapsed = !collapsed)" v-if="!bp['md']"> <a-button class="mobileTrigger" type="primary" @click="() => (nav = !nav)" v-if="!bp['md']">
<menu-unfold-outlined v-if="nav" /> <menu-unfold-outlined v-if="nav" />
<menu-fold-outlined v-else /> <menu-fold-outlined v-else />
</a-button> </a-button>
</a-layout-header> </a-layout-header>
<a-layout class="mlayout" has-sider style="padding-top: 1em"> <a-layout class="mlayout" has-sider style="padding-top: 1em">
<a-layout-sider :trigger="null" :collapsed="true" :collapsed-width="0" :collapsible="true" v-model:collapsed="collapsed" v-if="!bp['md']"> <a-layout-sider
:trigger="null"
:theme="darkBool ? 'dark' : 'light'"
:collapsed="nav"
:collapsed-width="0"
:collapsible="true"
v-model:collapsed="collapsed"
v-if="!bp['md']"
>
<navbar inline /> <navbar inline />
</a-layout-sider> </a-layout-sider>
<a-layout-content style="flex-grow: 1"> <a-layout-content style="flex-grow: 1">
@ -92,9 +101,8 @@
:collapsed-width="0" :collapsed-width="0"
:style="{ :style="{
color: col, color: col,
height: '100%', right: '-3px',
position: 'fixed', alignSelf: 'stretch',
right: '0px',
borderLeft: `2px solid ${darko ? '#fff' : '#ccc'}`, borderLeft: `2px solid ${darko ? '#fff' : '#ccc'}`,
}" }"
> >
@ -112,6 +120,7 @@
<cfooter /> <cfooter />
</a-layout-footer> </a-layout-footer>
</a-layout> </a-layout>
</a-layout>
<!-- <div class="mlayout"> <!-- <div class="mlayout">
<a-skeleton/> <a-skeleton/>
<a-skeleton/> <a-skeleton/>
@ -137,7 +146,7 @@
.sideWrap { .sideWrap {
height: 100vh; height: 100vh;
right: -1rem; right: -3rem;
width: inherit; width: inherit;
/* display: flex; /* display: flex;
flex-direction: column; flex-direction: column;