Instantly share code, notes, and snippets.
Daltonic/Sidebar.css Secret
Created
May 30, 2021 19:03
-
Star
0
(0)
You must be signed in to star a gist -
Fork
0
(0)
You must be signed in to fork a gist
-
Save Daltonic/1eda96862f889a6c7e920858e5ecf1ca to your computer and use it in GitHub Desktop.
Slack clone sidebar component
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.sidebar { | |
color: white; | |
background-color: var(--slack-color); | |
border-top: 1px solid #49274b; | |
max-width: 260px; | |
flex: 0.3; | |
} | |
.sidebar__header { | |
display: flex; | |
border: 1px solid #49274b; | |
padding: 13px; | |
padding-bottom: 10px; | |
} | |
.sidebar__header > .MuiSvgIcon-root { | |
padding: 8px; | |
color: #49274b; | |
font-size: 18px; | |
background-color: white; | |
border-radius: 50%; | |
} | |
.sidebar__info { | |
flex: 1; | |
} | |
.sidebar__info > h2 { | |
font-size: 15px; | |
font-weight: 900; | |
margin-bottom: 5px; | |
cursor: pointer; | |
} | |
.sidebar__info > h2 > a { | |
text-decoration: none; | |
color: white; | |
} | |
.sidebar__info > h3 { | |
display: flex; | |
align-items: center; | |
font-size: 13px; | |
font-weight: 400; | |
text-transform: capitalize; | |
} | |
.sidebar__info > h3 > .MuiSvgIcon-root { | |
font-size: 14px; | |
margin-top: 1px; | |
margin-right: 2px; | |
color: green; | |
} | |
.sidebar__options { | |
overflow-y: auto; | |
height: calc(100vh - 170px); | |
min-height: calc(100vh - 150px); | |
} | |
.sidebar__options > hr { | |
border: 1px solid #49274b; | |
} | |
.sidebar__options::-webkit-scrollbar { | |
width: 0.8em; | |
} | |
.sidebar__options::-webkit-scrollbar-track { | |
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); | |
} | |
.sidebar__options::-webkit-scrollbar-thumb { | |
background-color: darkgrey; | |
outline: none; | |
border-radius: 9px; | |
} | |
.sidebar__logout { | |
width: 100%; | |
padding: 10px 0; | |
outline: none; | |
border: none; | |
background-color: #340e36; | |
color: white; | |
cursor: pointer; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import './Sidebar.css' | |
import { useState, useEffect } from 'react' | |
import { auth } from '../../firebase' | |
import SidebarOption from '../sidebarOption/SidebarOption' | |
import CreateIcon from '@material-ui/icons/Create' | |
import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord' | |
import InsertCommentIcon from '@material-ui/icons/InsertComment' | |
import AlternateEmailIcon from '@material-ui/icons/AlternateEmail' | |
import MoreVertIcon from '@material-ui/icons/MoreVert' | |
import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown' | |
import LockOutlinedIcon from '@material-ui/icons/LockOutlined' | |
import AddIcon from '@material-ui/icons/Add' | |
import { CometChat } from '@cometchat-pro/chat' | |
import { Link, useHistory } from 'react-router-dom' | |
function Sidebar() { | |
const [channels, setChannels] = useState([]) | |
const [user, setUser] = useState(null) | |
const [dms, setDms] = useState([]) | |
const history = useHistory() | |
const getDirectMessages = () => { | |
const limit = 10 | |
const usersRequest = new CometChat.UsersRequestBuilder() | |
.setLimit(limit) | |
.friendsOnly(true) | |
.build() | |
usersRequest | |
.fetchNext() | |
.then((userList) => setDms(userList)) | |
.catch((error) => { | |
console.log('User list fetching failed with error:', error) | |
}) | |
} | |
const getChannels = () => { | |
const limit = 30 | |
const groupsRequest = new CometChat.GroupsRequestBuilder() | |
.setLimit(limit) | |
.joinedOnly(true) | |
.build() | |
groupsRequest | |
.fetchNext() | |
.then((groupList) => setChannels(groupList)) | |
.catch((error) => { | |
console.log('Groups list fetching failed with error', error) | |
}) | |
} | |
const logOut = () => { | |
auth | |
.signOut() | |
.then(() => { | |
localStorage.removeItem('user') | |
history.push('/login') | |
}) | |
.catch((error) => console.log(error.message)) | |
} | |
useEffect(() => { | |
const data = localStorage.getItem('user') | |
setUser(JSON.parse(data)) | |
getChannels() | |
getDirectMessages() | |
}, []) | |
return ( | |
<div className="sidebar"> | |
<div className="sidebar__header"> | |
<div className="sidebar__info"> | |
<h2> | |
<Link to="/">Cometchat (e)</Link> | |
</h2> | |
<h3> | |
<FiberManualRecordIcon /> | |
{user?.displayName.split(' ')[0]} | |
</h3> | |
</div> | |
<CreateIcon /> | |
</div> | |
<div className="sidebar__options"> | |
<SidebarOption Icon={InsertCommentIcon} title="Thread" /> | |
<SidebarOption Icon={AlternateEmailIcon} title="Mentions & Reactions" /> | |
<SidebarOption Icon={MoreVertIcon} title="More" /> | |
<hr /> | |
<SidebarOption Icon={ArrowDropDownIcon} title="Channels" /> | |
<hr /> | |
{channels.map((channel) => | |
channel.type === 'private' ? ( | |
<SidebarOption | |
Icon={LockOutlinedIcon} | |
title={channel.name} | |
id={channel.guid} | |
key={channel.guid} | |
sub="sidebarOption__sub" | |
/> | |
) : ( | |
<SidebarOption | |
title={channel.name} | |
id={channel.guid} | |
key={channel.guid} | |
sub="sidebarOption__sub" | |
/> | |
) | |
)} | |
<SidebarOption | |
Icon={AddIcon} | |
title="Add Channel" | |
sub="sidebarOption__sub" | |
addChannelOption | |
/> | |
<hr /> | |
<SidebarOption Icon={ArrowDropDownIcon} title="Direct Messages" /> | |
<hr /> | |
{dms.map((dm) => ( | |
<SidebarOption | |
Icon={FiberManualRecordIcon} | |
title={dm.name} | |
id={dm.uid} | |
key={dm.uid} | |
sub="sidebarOption__sub sidebarOption__color" | |
user | |
online={dm.status === 'online' ? 'isOnline' : ''} | |
/> | |
))} | |
</div> | |
<button className="sidebar__logout" onClick={logOut}> | |
Logout | |
</button> | |
</div> | |
) | |
} | |
export default Sidebar |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment