All files / src/components/Sidebar index.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { useNavigate } from "react-router-dom";
import { useLogoutMutation } from "../../store/features/auth/api";
import useToggle from "../../hooks/common/useToggle";
import SlackConnectOverlay from "../SlackConnectOverlay";
import { elements } from "./utils";
import SidebarElement from "./SidebarElement";
import { LogoutRounded, SettingsRounded } from "@mui/icons-material";
import SidebarButtonElement from "./SidebarButtonElement";
import HeadElement from "./HeadElement";
import useSidebar from "../../hooks/common/sidebar/useSidebar";
 
function Sidebar() {
  const navigate = useNavigate();
  const [triggerLogout] = useLogoutMutation();
  const { isOpen: isActionOpen, toggle } = useToggle();
  const { isOpen, toggle: toggleSidebar } = useSidebar();
 
  const signOut = async () => {
    await triggerLogout();
    navigate("/login");
  };
 
  return (
    <div
      className={`relative flex items-center justify-between flex-col pb-2 ${
        isOpen ? "w-64" : "w-16"
      } transition-width duration-300`}>
      <div className="flex w-full flex-col gap-0">
        <HeadElement />
 
        <div className="flex flex-col gap-2 my-1">
          {elements.map((element, index) => (
            <SidebarElement key={index} {...element} />
          ))}
        </div>
      </div>
 
      <div className="flex flex-col gap-2 w-full">
        <SidebarButtonElement
          label="Join Slack Community"
          icon={
            <img
              src="/integrations/slack-logo.svg"
              alt="Slack Logo"
              width={18}
            />
          }
          onClick={toggle}
        />
        <SidebarElement
          to="/settings"
          label="Settings"
          icon={<SettingsRounded />}
        />
        <SidebarButtonElement
          label="Logout"
          icon={<LogoutRounded fontSize="small" />}
          onClick={signOut}
        />
      </div>
 
      <SlackConnectOverlay isOpen={isActionOpen} toggleOverlay={toggle} />
    </div>
  );
}
 
export default Sidebar;