Skip to content

Commit 879b4b1

Browse files
ViaLeenyViaLeeny
authored
Merge pull request #1 from oslabs-beta/sidebar
Implement Sidebar
2 parents 939d6ab + cf62247 commit 879b4b1

File tree

3 files changed

+1838
-5412
lines changed

3 files changed

+1838
-5412
lines changed

‎app/src/components/left/Sidebar.tsx

Lines changed: 26 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,9 @@
11
/* eslint-disable max-len */
2-
import { Tab, Tabs } from '@mui/material';
2+
import { Tab, Tabs, Tooltip } from '@mui/material';
33

4-
import {
5-
AddBox,
6-
Groups2,
7-
AccountBox,
8-
Settings,
9-
Menu,
10-
Memory,
11-
TabOutlined,
12-
} from '@mui/icons-material';
13-
import { IoMdCube } from 'react-icons/io';
4+
import { AddBox, Groups2, Folder } from '@mui/icons-material';
145
import React from 'react';
6+
import TabWithTooltip from './TabWithTooltip';
157

168
interface SidebarProps {
179
activeTab: number | null;
@@ -51,7 +43,7 @@ const Sidebar: React.FC<SidebarProps> = ({
5143
toggleVisibility,
5244
}): JSX.Element => {
5345
const handleTabChange = (event: React.ChangeEvent<{}>, newValue: number) => {
54-
setActiveTab(newValue);
46+
setActiveTab(activeTab === newValue ? null : newValue);
5547
toggleVisibility(true);
5648
oldValue = newValue;
5749
};
@@ -83,80 +75,36 @@ const Sidebar: React.FC<SidebarProps> = ({
8375
display: 'flex',
8476
flexDirection: 'column',
8577
alignItems: 'center',
86-
justifyContent: 'top',
78+
justifyContent: 'flex-start',
8779
gap: '50px',
8880
width: '70px',
8981
background: '#1e2024',
9082
marginRight: '2px',
9183
height: '100vh',
84+
position: 'relative',
9285
}}
9386
>
9487
<Tab sx={{ position: 'absolute', visibility: 'hidden' }} value={null} />
95-
<Tab
96-
sx={{
97-
color: activeTab === 0 ? '#E4E4E5' : '#9C9D9F',
98-
backgroundColor: activeTab === 0 && '#2D313A',
99-
'&.Mui-selected': { color: '#E4E4E5' },
100-
'&:hover': { color: '#e9e9e9' },
101-
fontSize: '11px',
102-
textTransform: 'none',
103-
}}
104-
icon={<AddBox sx={{ fontSize: '26px' }} />}
105-
value={0}
106-
label="Canvas"
107-
/>
108-
<Tab
109-
sx={{
110-
color: activeTab === 4 ? '#E4E4E5' : '#9C9D9F',
111-
backgroundColor: activeTab === 4 && '#2D313A',
112-
'&.Mui-selected': { color: '#E4E4E5' },
113-
'&:hover': { color: '#e9e9e9' },
114-
fontSize: '11px',
115-
textTransform: 'none',
116-
}}
117-
icon={<TabOutlined sx={{ fontSize: '26px' }} />}
118-
value={4}
119-
label="Material UI"
120-
/>
121-
<Tab
122-
sx={{
123-
color: activeTab === 1 ? '#E4E4E5' : '#9C9D9F',
124-
backgroundColor: activeTab === 1 && '#2D313A',
125-
'&.Mui-selected': { color: '#E4E4E5' },
126-
'&:hover': { color: '#e9e9e9' },
127-
fontSize: '11px',
128-
textTransform: 'none',
129-
}}
130-
icon={<IoMdCube style={{ fontSize: '25px' }} />}
131-
value={1}
132-
label="Create"
133-
/>
134-
<Tab
135-
sx={{
136-
color: activeTab === 2 ? '#E4E4E5' : '#9C9D9F',
137-
backgroundColor: activeTab === 2 && '#2D313A',
138-
'&.Mui-selected': { color: '#E4E4E5' },
139-
'&:hover': { color: '#e9e9e9' },
140-
fontSize: '11px',
141-
textTransform: 'none',
142-
}}
143-
icon={<Groups2 sx={{ fontSize: '28px' }} />}
144-
value={2}
145-
label="Collab"
146-
/>
147-
<Tab
148-
sx={{
149-
color: activeTab === 3 ? '#E4E4E5' : '#9C9D9F',
150-
backgroundColor: activeTab === 3 && '#2D313A',
151-
'&.Mui-selected': { color: '#E4E4E5' },
152-
'&:hover': { color: '#e9e9e9' },
153-
fontSize: '11px',
154-
textTransform: 'none',
155-
}}
156-
icon={<AccountBox sx={{ fontSize: '26px' }} />}
157-
value={3}
158-
label="Profile"
159-
/>
88+
<div>
89+
<TabWithTooltip
90+
label="Modules"
91+
value={0}
92+
activeTab={activeTab}
93+
handleTabChange={handleTabChange}
94+
/>
95+
<TabWithTooltip
96+
label="Create"
97+
value={1}
98+
activeTab={activeTab}
99+
handleTabChange={handleTabChange}
100+
/>
101+
<TabWithTooltip
102+
label="Collab"
103+
value={2}
104+
activeTab={activeTab}
105+
handleTabChange={handleTabChange}
106+
/>
107+
</div>
160108
</Tabs>
161109
);
162110
};

‎app/src/components/left/TabWithTooltip.tsx

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
import React, { useState } from 'react';
2+
import { Tab } from '@mui/material';
3+
import { AddBox, Folder, Groups2 } from '@mui/icons-material';
4+
5+
interface TabWithTooltipProps {
6+
label: string;
7+
value: number;
8+
activeTab: number;
9+
handleTabChange: (event: React.ChangeEvent<{}>, value: number) => void;
10+
}
11+
12+
const TabWithTooltip: React.FC<TabWithTooltipProps> = ({
13+
label,
14+
value,
15+
activeTab,
16+
handleTabChange
17+
}) => {
18+
const [showTooltip, setShowTooltip] = useState(false);
19+
20+
const handleMouseEnter = () => {
21+
setShowTooltip(true);
22+
};
23+
24+
const handleMouseLeave = () => {
25+
setShowTooltip(false);
26+
};
27+
28+
let iconType;
29+
if (value === 0) {
30+
iconType = <Folder sx={{ fontSize: '25px' }} />;
31+
} else if (value === 1) {
32+
iconType = <AddBox sx={{ fontSize: '26px' }} />;
33+
} else if (value === 2) {
34+
iconType = <Groups2 sx={{ fontSize: '28px' }} />;
35+
}
36+
37+
const isCollabTab = label === 'Collab';
38+
39+
return (
40+
<div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
41+
{/* Tooltip */}
42+
{showTooltip && (
43+
<div
44+
style={{
45+
position: 'absolute',
46+
bottom: isCollabTab ? '120px' : 'none',
47+
marginTop: !isCollabTab ? '45px' : 'none',
48+
left: '50%',
49+
transform: 'translateX(-50%)',
50+
padding: '5px 10px',
51+
backgroundColor: '#333',
52+
color: '#f0f0f0',
53+
borderRadius: '4px',
54+
fontSize: '11px',
55+
textTransform: 'none',
56+
whiteSpace: 'nowrap',
57+
zIndex: 1,
58+
transition: 'opacity 0.3s ease',
59+
}}
60+
>
61+
{label}
62+
<div
63+
style={{
64+
position: 'absolute',
65+
top: isCollabTab ? '100%' : '-5px',
66+
left: '50%',
67+
transform: 'translateX(-50%)',
68+
width: '0',
69+
height: '0',
70+
borderLeft: '5px solid transparent',
71+
borderRight: '5px solid transparent',
72+
borderBottom: !isCollabTab ? '5px solid #333' : 'none',
73+
borderTop: isCollabTab ? '5px solid #333' : 'none',
74+
75+
}}
76+
/>
77+
</div>
78+
)}
79+
80+
{/* Tab */}
81+
<Tab
82+
sx={{
83+
color: activeTab === value ? '#f88e16' : '#9C9D9F',
84+
backgroundColor: activeTab === value && '#2D313A',
85+
'&.Mui-selected': { color: '#f88e16' },
86+
'&:hover': { color: '#f88e16' },
87+
fontSize: '11px',
88+
textTransform: 'none',
89+
position: isCollabTab ? 'absolute' : 'relative',
90+
bottom: isCollabTab ? '80px' : 'auto',
91+
opacity: 1,
92+
}}
93+
icon={iconType}
94+
value={value}
95+
onClick={(event) => handleTabChange(event, value)}
96+
/>
97+
</div>
98+
);
99+
};
100+
101+
export default TabWithTooltip;

0 commit comments

Comments
 (0)