RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-09 10:34:17 +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 a40eb58e9f
commit 173a00c006
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 * as antd from "antd"
import classnames from "classnames"
import { Motion, spring } from "react-motion"
import { Translation } from "react-i18next"
@ -45,43 +44,47 @@ export default class ToolsBar extends React.Component {
}}>
{({ x, width }) => {
return <div
id="tools_bar"
className={classnames(
"tools-bar",
{
visible: this.state.visible,
}
)}
className="tools-bar-wrapper"
style={{
width: `${width}%`,
transform: `translateX(${x}%)`,
}}
>
<FeaturedEventsAnnouncements />
<div
id="tools_bar"
className={classnames(
"tools-bar",
{
visible: this.state.visible,
}
)}
>
<FeaturedEventsAnnouncements />
<div className="card" id="trendings">
<div className="header">
<h2>
<Icons.TrendingUp />
<Translation>{(t) => t("Trendings")}</Translation>
</h2>
<div className="card" id="trendings">
<div className="header">
<h2>
<Icons.TrendingUp />
<Translation>{(t) => t("Trendings")}</Translation>
</h2>
</div>
<HashtagTrendings />
</div>
<HashtagTrendings />
</div>
<div className="card" id="onlineFriends">
<div className="header">
<h2>
<Icons.MdPeopleAlt />
<Translation>{(t) => t("Online Friends")}</Translation>
</h2>
</div>
<div className="card" id="onlineFriends">
<div className="header">
<h2>
<Icons.MdPeopleAlt />
<Translation>{(t) => t("Online Friends")}</Translation>
</h2>
<ConnectedFriends />
</div>
<ConnectedFriends />
<WidgetsWrapper />
</div>
<WidgetsWrapper />
</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;