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

refactor(components): reconfigure sidebar to be perfect(tm)

Browse Source
This commit is contained in:
☙◦ The Tablet ❀ GamerGirlandCo ◦❧ 2023-10-05 19:56:14 -04:00
parent 480dbfdde9
commit 841637e233
Signed by: tablet
GPG Key ID: 924A5F6AF051E87C
1 changed files with 31 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
layouts/default.vue
View File

@ -61,21 +61,36 @@
</a-layout-footer> </a-layout-footer>
</a-layout> </a-layout>
<a-layout-sider <a-layout-sider
:zero-width-trigger-style="{
background: '#e92678',
padding: '1.2em',
position: 'fixed',
right: 0,
borderRadius: '15%',
color: 'white',
border: '2.4px solid #fff',
top: '75vh',
}"
:theme="darko ? 'dark' : 'light'" :theme="darko ? 'dark' : 'light'"
:breakpoint="'md'" :breakpoint="'lg'"
:trigger="null"
v-model:collapsed="collapsed" v-model:collapsed="collapsed"
:collapsible="true" :collapsible="true"
:collapsed-width="0"
:style="{ :style="{
color: col, color: col,
height: '100%',
position: 'fixed',
right: '0px',
}" }"
> >
<sidebar-thing /> <sidebar-thing />
<div class="outerst" @click="() => (collapsed = !collapsed)"> <template #trigger>
<div :class="sideTriggerVal"> <div class="outerst" @click="() => (collapsed = !collapsed)">
<icon istyle="solid" name="chevron-right" :size="30" /> <div :class="sideTriggerVal">
<icon istyle="solid" name="chevron-right" :size="30" />
</div>
</div> </div>
</div> </template>
</a-layout-sider> </a-layout-sider>
</a-layout> </a-layout>
<!-- <div class="mlayout"> <!-- <div class="mlayout">
@ -93,6 +108,10 @@
display: inline-block; display: inline-block;
} }
.ylayout {
height: 100%;
}
.sideWrap { .sideWrap {
height: 100vh; height: 100vh;
right: -1rem; right: -1rem;
@ -121,16 +140,6 @@
width: 100%; width: 100%;
} }
.outerst {
width: 100%;
justify-content: center;
position: fixed;
top: 75vh;
transform: translateX(15px);
/* height: 100vh; */
/* overflow-y: scroll; */
}
.mlayout, .mlayout,
footer { footer {
padding: 1.5em; padding: 1.5em;
@ -192,13 +201,19 @@
} }
.sider-trigger { .sider-trigger {
position: relative;
/* display: flex; */ /* display: flex; */
/* padding-left: 4.8em; /* padding-left: 4.8em;
padding-right: 1.8em; */ padding-right: 1.8em; */
} }
.sider-trigger.collapsed {
left: 0;
}
.sider-trigger.collapsed i { .sider-trigger.collapsed i {
/* transform: rotate3d(0, 1, 0, 180deg); */ /* transform: rotate3d(0, 1, 0, 180deg); */
position: relative;
transform: rotate(540deg); transform: rotate(540deg);
} }