bnilsen/custom_ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update sidebar layout, update theme, update client table data

Browse source
This commit is contained in:
Casey 2025-12-16 06:45:50 -06:00
parent 011080e0f8
commit 1a837ffcfc
4 changed files with 109 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

43
frontend/src/App.vue
View file

@ -19,6 +19,7 @@ const notificationStore = useNotificationStore();
const toast = ref();
const companyStore = useCompanyStore();
const themeStore = useThemeStore();
const sidebarCollapsed = ref(false);
// Connect the toast instance to the store when component mounts
onMounted(() => {
@ -46,8 +47,8 @@ watchEffect(() => {
}"
>
<div id="snw-ui">
<div class="sidebar-column">
<SideBar />
<div class="sidebar-column" :class="{ collapsed: sidebarCollapsed }">
<SideBar @toggle="sidebarCollapsed = $event" />
</div>
<div id="display-content">
<ScrollPanel style="width: 100%; height: 100%">
@ -82,21 +83,53 @@ watchEffect(() => {
width: 100%;
margin: 10px auto;
height: 90vh;
background: var(--theme-gradient);
background: var(--theme-background-gradient);
}
.sidebar-column {
display: flex;
flex-direction: column;
gap: 8px;
width: 170px;
min-width: 170px;
transition: width 0.3s ease, min-width 0.3s ease;
}
.sidebar-column.collapsed {
width: 56px;
min-width: 56px;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.sidebar-column {
width: 140px;
min-width: 140px;
}
.sidebar-column.collapsed {
width: 56px;
min-width: 56px;
}
}
@media (max-width: 480px) {
.sidebar-column {
width: 120px;
min-width: 120px;
}
.sidebar-column.collapsed {
width: 56px;
min-width: 56px;
}
}
#display-content {
/* flex-grow: 1; */
flex-grow: 1;
margin-left: auto;
margin-right: auto;
max-width: 50vw;
max-width: 100%;
min-width: 80%;
height: 100%;
}