RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-09 18:44:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

make tool bar style acording to sidebar

Browse Source
This commit is contained in:
SrGooglo 2023-08-17 17:52:22 +00:00
parent 07b1bdd552
commit a6cdac14e6
2 changed files with 50 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/app/src/components/Layout/toolsBar/index.jsx
View File

@ -1,5 +1,4 @@
import React from "react"
import * as antd from "antd"
import classnames from "classnames"
import { Motion, spring } from "react-motion"
import { Translation } from "react-i18next"
@ -45,6 +44,13 @@ export default class ToolsBar extends React.Component {
}}>
{({ x, width }) => {
return <div
className="tools-bar-wrapper"
style={{
width: `${width}%`,
transform: `translateX(${x}%)`,
}}
>
<div
id="tools_bar"
className={classnames(
"tools-bar",
@ -52,10 +58,6 @@ export default class ToolsBar extends React.Component {
visible: this.state.visible,
}
)}
style={{
width: `${width}%`,
transform: `translateX(${x}%)`,
}}
>
<FeaturedEventsAnnouncements />
@ -83,6 +85,7 @@ export default class ToolsBar extends React.Component {
<WidgetsWrapper />
</div>
</div>
}}
</Motion>
}

28
packages/app/src/components/Layout/toolsBar/index.less
View File

@ -1,30 +1,44 @@
.tools-bar {
@import "theme/vars.less";
.tools-bar-wrapper {
position: sticky;
top: 0;
right: 0;
display: flex;
flex-direction: column;
max-width: 20vw;
height: 100vh;
height: 100dvh;
border-left: 1px solid var(--border-color);
padding: 10px;
}
.tools-bar {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
border-radius: 12px;
border-radius: @sidebar_borderRadius;
box-shadow: @card-shadow;
background-color: var(--background-color-accent);
gap: 20px;
&.visible {
padding: 20px;
padding: 10px;
}
.card {
display: flex;
flex-direction: column;
background-color: var(--background-color-accent);
background-color: var(--background-color-primary);
border-radius: 12px;
padding: 20px;