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

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

@ -1,5 +1,4 @@
import React from "react" import React from "react"
import * as antd from "antd"
import classnames from "classnames" import classnames from "classnames"
import { Motion, spring } from "react-motion" import { Motion, spring } from "react-motion"
import { Translation } from "react-i18next" import { Translation } from "react-i18next"
@ -45,43 +44,47 @@ export default class ToolsBar extends React.Component {
}}> }}>
{({ x, width }) => { {({ x, width }) => {
return <div return <div
id="tools_bar" className="tools-bar-wrapper"
className={classnames(
"tools-bar",
{
visible: this.state.visible,
}
)}
style={{ style={{
width: `${width}%`, width: `${width}%`,
transform: `translateX(${x}%)`, transform: `translateX(${x}%)`,
}} }}
> >
<FeaturedEventsAnnouncements /> <div
id="tools_bar"
className={classnames(
"tools-bar",
{
visible: this.state.visible,
}
)}
>
<FeaturedEventsAnnouncements />
<div className="card" id="trendings"> <div className="card" id="trendings">
<div className="header"> <div className="header">
<h2> <h2>
<Icons.TrendingUp /> <Icons.TrendingUp />
<Translation>{(t) => t("Trendings")}</Translation> <Translation>{(t) => t("Trendings")}</Translation>
</h2> </h2>
</div>
<HashtagTrendings />
</div> </div>
<HashtagTrendings /> <div className="card" id="onlineFriends">
</div> <div className="header">
<h2>
<Icons.MdPeopleAlt />
<Translation>{(t) => t("Online Friends")}</Translation>
</h2>
</div>
<div className="card" id="onlineFriends"> <ConnectedFriends />
<div className="header">
<h2>
<Icons.MdPeopleAlt />
<Translation>{(t) => t("Online Friends")}</Translation>
</h2>
</div> </div>
<ConnectedFriends /> <WidgetsWrapper />
</div> </div>
<WidgetsWrapper />
</div> </div>
}} }}
</Motion> </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; position: sticky;
top: 0; top: 0;
right: 0; right: 0;
display: flex;
flex-direction: column;
max-width: 20vw; max-width: 20vw;
height: 100vh; height: 100vh;
height: 100dvh; 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; gap: 20px;
&.visible { &.visible {
padding: 20px; padding: 10px;
} }
.card { .card {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: var(--background-color-accent); background-color: var(--background-color-primary);
border-radius: 12px; border-radius: 12px;
padding: 20px; padding: 20px;