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

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

@@ -92,20 +92,42 @@
.side-bar-options-container {
.option-list {
display: flex;
position: relative;
align-items: center;
gap: 8px;
padding: 8px 10px;
margin: 4px 0;
border-radius: #{$border-radius-extra-large};
width: 100%;
overflow: hidden;
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 {
cursor: help;
}
&:hover {
background: var(--background-color-secondary);
&::after {
height: 260px;
width: 260px;
left: 50%;
scale: 1;
}
}
}