70 lines
2.0 KiB
TypeScript
70 lines
2.0 KiB
TypeScript
import React from "react";
|
|
import {
|
|
DocumentationIcon,
|
|
HelpIcon,
|
|
HomeIcon,
|
|
LogoutIcon,
|
|
NotificationIcon,
|
|
ProjectsIcon,
|
|
TutorialsIcon,
|
|
} from "../../icons/DashboardIcon";
|
|
import { SettingsIcon, TrashIcon } from "../../icons/ExportCommonIcons";
|
|
|
|
const SidePannel: React.FC = () => {
|
|
const userName = localStorage.getItem("userName") ?? "Anonymous";
|
|
return (
|
|
<div className="side-pannel-container">
|
|
<div className="side-pannel-header">
|
|
<div className="user-container">
|
|
<div className="user-profile">{userName[0]}</div>
|
|
<div className="user-name">{userName}</div>
|
|
</div>
|
|
<div className="notifications-container">
|
|
<NotificationIcon />
|
|
</div>
|
|
</div>
|
|
<div className="new-project-button">+ New project</div>
|
|
<div className="side-bar-content-container">
|
|
<div className="side-bar-options-container">
|
|
<div className="option-list active">
|
|
<HomeIcon />
|
|
Home
|
|
</div>
|
|
<div className="option-list" title="coming soon">
|
|
<ProjectsIcon />
|
|
Projects
|
|
</div>
|
|
<div className="option-list" title="coming soon">
|
|
<TrashIcon />
|
|
Trash
|
|
</div>
|
|
<div className="option-list" title="coming soon">
|
|
<TutorialsIcon />
|
|
Tutorials
|
|
</div>
|
|
<div className="option-list" title="coming soon">
|
|
<DocumentationIcon />
|
|
Documentation
|
|
</div>
|
|
</div>
|
|
<div className="side-bar-options-container" title="coming soon">
|
|
<div className="option-list">
|
|
<SettingsIcon />
|
|
Settings
|
|
</div>
|
|
<div className="option-list" style={{cursor: "pointer"}}>
|
|
<LogoutIcon />
|
|
Log out
|
|
</div>
|
|
<div className="option-list">
|
|
<HelpIcon />
|
|
Help & Feedback
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SidePannel;
|