every_holiday/VRCT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[UPdate] Main Page: Side bar. Now, scrollable.

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-09-11 13:46:45 +09:00
parent 8345945bdc
commit 7068167866
2 changed files with 27 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src-ui/app/main_page/sidebar_section/SidebarSection.jsx
View File

@@ -10,15 +10,17 @@ import { OpenSettings } from "./open_settings/OpenSettings";
export const SidebarSection = () => {
const { currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode();
const container_class_name = clsx(styles["container"], {
[styles["is_compact_mode"]]: currentIsMainPageCompactMode
const container_class_name = clsx(styles.container, {
[styles.is_compact_mode]: currentIsMainPageCompactMode
});
return (
<div className={container_class_name}>
<Logo />
<MainFunctionSwitch />
{!currentIsMainPageCompactMode && <LanguageSettings />}
<div className={styles.scroll_container}>
<MainFunctionSwitch />
{!currentIsMainPageCompactMode && <LanguageSettings />}
</div>
<OpenSettings />
</div>
);

21
src-ui/app/main_page/sidebar_section/SidebarSection.module.scss
View File

@@ -1,3 +1,24 @@
.scroll_container {
width: calc(100% + 0.8rem);
overflow-y: scroll;
overflow-x: hidden;
margin-bottom: calc(2rem + 1.6rem + 2rem); // config button's sizes (svg + padding + margin).
&::-webkit-scrollbar {
width: 0.8rem;
}
&::-webkit-scrollbar-track {
background-color: var(--dark_888_color);
border-radius: 0.4rem;
}
&::-webkit-scrollbar-thumb {
background-color: var(--dark_800_color);
border-radius: 0.4rem;
}
}
.container {
position: relative;
min-width: 23rem;