Dwinzo-Beta/Dwinzo_Demo
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: simplify project creation button and enhance sidebar option styles

Browse Source
This commit is contained in:
Vishnu
2025-09-05 11:18:05 +05:30
parent 336d7e95b6
commit 6f0adcab0f
2 changed files with 44 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
app/src/components/Dashboard/SidePannel.tsx
View File

@@ -92,16 +92,12 @@ const SidePannel: React.FC<SidePannelProps> = ({ setActiveTab, activeTab }) => {
<NotificationIcon /> <NotificationIcon />
</div> </div>
</div> </div>
<div <div className="new-project-button" onClick={handleCreateNewProject}>
className="new-project-button"
style={{ cursor: "pointer" }}
onClick={handleCreateNewProject}
>
+ New project + New project
</div> </div>
<div className="side-bar-content-container"> <div className="side-bar-content-container">
<div className="side-bar-options-container"> <div className="side-bar-options-container">
<div <button
className={ className={
activeTab === "Home" ? "option-list active" : "option-list" activeTab === "Home" ? "option-list active" : "option-list"
} }
@@ -109,8 +105,8 @@ const SidePannel: React.FC<SidePannelProps> = ({ setActiveTab, activeTab }) => {
> >
<HomeIcon /> <HomeIcon />
Home Home
</div> </button>
<div <button
className={ className={
activeTab === "Projects" ? "option-list active" : "option-list" activeTab === "Projects" ? "option-list active" : "option-list"
} }
@@ -119,8 +115,8 @@ const SidePannel: React.FC<SidePannelProps> = ({ setActiveTab, activeTab }) => {
> >
<ProjectsIcon /> <ProjectsIcon />
Projects Projects
</div> </button>
<div <button
className={ className={
activeTab === "Trash" ? "option-list active" : "option-list" activeTab === "Trash" ? "option-list active" : "option-list"
} }
@@ -129,12 +125,13 @@ const SidePannel: React.FC<SidePannelProps> = ({ setActiveTab, activeTab }) => {
> >
<TrashIcon /> <TrashIcon />
Trash Trash
</div> </button>
<div <button
className={ className={
activeTab === "Tutorials" ? "option-list active" : "option-list" activeTab === "Tutorials" ? "option-list active" : "option-list"
} }
title="coming soon" title="coming soon"
disabled
onClick={() => { onClick={() => {
// setActiveTab("Tutorials"); // setActiveTab("Tutorials");
console.warn("Tutorials comming soon"); console.warn("Tutorials comming soon");
@@ -142,14 +139,15 @@ const SidePannel: React.FC<SidePannelProps> = ({ setActiveTab, activeTab }) => {
> >
<TutorialsIcon /> <TutorialsIcon />
Tutorials Tutorials
</div> </button>
<div <button
className={ className={
activeTab === "Documentation" activeTab === "Documentation"
? "option-list active" ? "option-list active"
: "option-list" : "option-list"
} }
title="coming soon" title="coming soon"
disabled
onClick={() => { onClick={() => {
// setActiveTab("Documentation"); // setActiveTab("Documentation");
console.warn("Documentation comming soon"); console.warn("Documentation comming soon");
@@ -157,28 +155,30 @@ const SidePannel: React.FC<SidePannelProps> = ({ setActiveTab, activeTab }) => {
> >
<DocumentationIcon /> <DocumentationIcon />
Documentation Documentation
</div> </button>
</div> </div>
<div className="side-bar-options-container"> <div className="side-bar-options-container">
<div className="option-list" title="coming soon"> <button className="option-list" title="coming soon" disabled>
<SettingsIcon /> <SettingsIcon />
Settings Settings
</div> </button>
<div <button
className="option-list" className="option-list"
style={{ cursor: "pointer" }} style={{ cursor: "pointer" }}
onClick={() => { onClick={() => {
const theme = localStorage.getItem("theme") ?? "light";
localStorage.clear(); localStorage.clear();
localStorage.setItem("theme", theme);
navigate("/"); navigate("/");
}} }}
> >
<LogoutIcon /> <LogoutIcon />
Log out Log out
</div> </button>
<div className="option-list" title="coming soon"> <button className="option-list" title="coming soon" disabled>
<HelpIcon /> <HelpIcon />
Help & Feedback Help & Feedback
</div> </button>
</div> </div>
</div> </div>
</div> </div>

24
app/src/styles/pages/_dashboard.scss
View File

@@ -92,20 +92,42 @@
.side-bar-options-container { .side-bar-options-container {
.option-list { .option-list {
display: flex; display: flex;
position: relative;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
padding: 8px 10px; padding: 8px 10px;
margin: 4px 0; margin: 4px 0;
border-radius: #{$border-radius-extra-large}; border-radius: #{$border-radius-extra-large};
width: 100%; width: 100%;
overflow: hidden;
cursor: pointer; cursor: pointer;
transition: color 0.3s;
&::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
height: 0px;
width: 0px;
border-radius: 50%;
background: #7b4cd323;
z-index: -1;
transition: all 0.5s ease-in-out;
}
&:disabled { &:disabled {
cursor: help; cursor: help;
} }
&:hover { &:hover {
background: var(--background-color-secondary); &::after {
height: 260px;
width: 260px;
left: 50%;
scale: 1;
}
} }
} }