Add dashboard to build

reminder-dashboard/src/components/Sidebar/index.tsx

@@ -0,0 +1,66 @@
+import { useQuery } from "react-query";
+import { DesktopSidebar } from "./DesktopSidebar";
+import { MobileSidebar } from "./MobileSidebar";
+import { Brand } from "./Brand";
+import { Wave } from "./Wave";
+import { GuildEntry } from "./GuildEntry";
+import { fetchUserGuilds, GuildInfo } from "../../api";
+import { TimezonePicker } from "../TimezonePicker";
+
+type ContentProps = {
+    guilds: GuildInfo[];
+};
+
+const SidebarContent = ({ guilds }: ContentProps) => {
+    const guildEntries = guilds.map((guild) => <GuildEntry guild={guild}></GuildEntry>);
+
+    return (
+        <>
+            <a href="/">
+                <Brand />
+            </a>
+            <Wave />
+            <aside class="menu">
+                <p class="menu-label">Servers</p>
+                <ul class="menu-list guildList">{guildEntries}</ul>
+                <div class="aside-footer">
+                    <p class="menu-label">Options</p>
+                    <ul class="menu-list">
+                        <li>
+                            <div id="bottom-sidebar"></div>
+                            <TimezonePicker />
+                            <a href="/login/discord/logout">
+                                <span class="icon">
+                                    <i class="fas fa-sign-out"></i>
+                                </span>{" "}
+                                Log out
+                            </a>
+                            <a href="https://discord.jellywx.com" class="feedback">
+                                <span class="icon">
+                                    <i class="fab fa-discord"></i>
+                                </span>{" "}
+                                Give feedback
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </aside>
+        </>
+    );
+};
+
+export const Sidebar = () => {
+    const { status, data } = useQuery(fetchUserGuilds());
+
+    let content = <SidebarContent guilds={[]}></SidebarContent>;
+    if (status === "success") {
+        content = <SidebarContent guilds={data}></SidebarContent>;
+    }
+
+    return (
+        <>
+            <DesktopSidebar>{content}</DesktopSidebar>
+            <MobileSidebar>{content}</MobileSidebar>
+        </>
+    );
+};