Skip to content

Instantly share code, notes, and snippets.

@Daltonic
Created May 30, 2021 19:03
Slack clone sidebar component
.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;
}
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