Newer
Older
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
import { Sidebar } from "./sidebar.styles";
import { SidebarItem } from "./sidebar-item";
import { SidebarMenu } from "./sidebar-menu";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faChartBar,
faClock,
faCog,
faHashtag,
faHome,
faServer,
faShieldHalved,
faSquare,
faUsers,
} from "@fortawesome/free-solid-svg-icons";
import { useLocation } from "react-router-dom";
import { CollapseItems } from "./collapse-items";
export const SidebarWrapper = () => {
const { pathname } = useLocation();
// const { collapsed, setCollapsed } = useSidebarContext();
const [collapsed, setCollapsed] = useState(false);
return (
<aside className="h-screen z-[202] sticky top-0">
{collapsed ? (
<div className={Sidebar.Overlay()} onClick={() => setCollapsed(true)} />
) : null}
<div
className={Sidebar({
collapsed: collapsed,
})}
>
<div className={Sidebar.Header()}>
<div className="flex items-center gap-2">
<FontAwesomeIcon icon={faSquare} />
<div className="flex flex-col gap-4">
<h3 className="text-xl font-medium m-0 text-default-900 -mb-4 whitespace-nowrap">
Canvas
</h3>
<span className="text-xs font-medium text-default-500">
{window.location.host}
</span>
</div>
</div>
</div>
<div className="flex flex-col justify-between h-full">
<div className={Sidebar.Body()}>
<SidebarItem
title="Home"
icon={<FontAwesomeIcon icon={faHome} />}
isActive={pathname === "/"}
href="/"
/>
<CollapseItems
icon={<FontAwesomeIcon icon={faChartBar} />}
title="Stats"
items={["Pixels"]}
/>
<SidebarMenu title="Accounts">
<SidebarItem
isActive={pathname === "/accounts"}
title="Accounts"
icon={<FontAwesomeIcon icon={faUsers} />}
href="/accounts"
/>
<SidebarItem
isActive={pathname === "/instances"}
title="Instances"
icon={<FontAwesomeIcon icon={faServer} />}
href="/instances"
/>
<SidebarItem
isActive={pathname === "/accounts/settings"}
title="Settings"
icon={<FontAwesomeIcon icon={faCog} />}
href="/accounts/settings"
/>
</SidebarMenu>
<SidebarMenu title="Clans">
<SidebarItem
isActive={pathname === "/clans"}
title="Clans"
icon={<FontAwesomeIcon icon={faShieldHalved} />}
href="/clans"
/>
<SidebarItem
isActive={pathname === "/clans/settings"}
title="Settings"
icon={<FontAwesomeIcon icon={faCog} />}
href="/clans/settings"
/>
</SidebarMenu>
<SidebarMenu title="Chat">
<SidebarItem
isActive={pathname === "/chat/rooms"}
title="Rooms"
icon={<FontAwesomeIcon icon={faHashtag} />}
href="/chat/rooms"
/>
<SidebarItem
isActive={pathname === "/chat/settings"}
title="Settings"
icon={<FontAwesomeIcon icon={faCog} />}
href="/chat/settings"
/>
</SidebarMenu>
<SidebarMenu title="Service">
<SidebarItem
isActive={pathname === "/chat/rooms"}
title="Shards"
icon={<FontAwesomeIcon icon={faServer} />}
href="/chat/rooms"
/>
<SidebarItem
isActive={pathname === "/chat/rooms"}
title="Timelapse"
icon={<FontAwesomeIcon icon={faClock} />}
href="/chat/rooms"
/>
<SidebarItem
title="Settings"
icon={<FontAwesomeIcon icon={faCog} />}