feat/sidebar-socials: add socials to sidebar footer

src/renderer/components/bottom-panel/bottom-panel.css.ts

@@ -1,5 +1,5 @@
-import { SPACING_UNIT, vars } from "../../theme.css";
 import { style } from "@vanilla-extract/css";
+import { SPACING_UNIT, vars } from "../../theme.css";
 
 export const bottomPanel = style({
   width: "100%",
@@ -14,9 +14,10 @@ export const bottomPanel = style({
 });
 
 export const downloadsButton = style({
-  cursor: "pointer",
   color: vars.color.bodyText,
+  borderBottom: "1px solid transparent",
   ":hover": {
-    textDecoration: "underline",
+    borderBottom: `1px solid ${vars.color.bodyText}`,
+    cursor: "pointer",
   },
 });

src/renderer/components/sidebar/sidebar.css.ts

@@ -6,6 +6,7 @@ export const sidebar = recipe({
   base: {
     backgroundColor: vars.color.darkBackground,
     color: "#c0c1c7",
+    flexDirection: "column",
     display: "flex",
     transition: "opacity ease 0.2s",
     borderRight: `solid 1px ${vars.color.borderColor}`,
@@ -134,3 +135,36 @@ export const section = recipe({
     },
   },
 });
+
+export const sidebarFooter = style({
+  marginTop: "auto",
+  padding: `${SPACING_UNIT * 2}px`,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+});
+
+export const footerSocialsContainer = style({
+  display: "flex",
+  alignItems: "center",
+  gap: `${SPACING_UNIT * 1.5}px`,
+});
+
+export const footerSocialsItem = style({
+  color: vars.color.bodyText,
+  backgroundColor: vars.color.darkBackground,
+  width: "16px",
+  height: "16px",
+  display: "flex",
+  alignItems: "center",
+  transition: "all ease 0.15s",
+  ":hover": {
+    opacity: 0.75,
+    cursor: "pointer",
+  },
+});
+
+export const footerText = style({
+  color: vars.color.bodyText,
+  fontSize: "12px",
+});

src/renderer/components/sidebar/sidebar.tsx

@@ -4,12 +4,15 @@ import { useLocation, useNavigate } from "react-router-dom";
 
 import type { Game } from "@types";
 
-import { useDownload, useLibrary } from "@renderer/hooks";
 import { AsyncImage, TextField } from "@renderer/components";
+import { useDownload, useLibrary } from "@renderer/hooks";
 import { SPACING_UNIT } from "@renderer/theme.css";
 
-import * as styles from "./sidebar.css";
+import { MarkGithubIcon } from "@primer/octicons-react";
+import DiscordLogo from "../../assets/discord-icon.svg";
+import XLogo from "../../assets/x-icon.svg";
 import { routes } from "./routes";
+import * as styles from "./sidebar.css";
 
 const SIDEBAR_MIN_WIDTH = 200;
 const SIDEBAR_INITIAL_WIDTH = 250;
@@ -212,6 +215,45 @@ export function Sidebar() {
         className={styles.handle}
         onMouseDown={handleMouseDown}
       />
+
+      <footer className={styles.sidebarFooter}>
+        <div className={styles.footerText}>{t("follow_us")}</div>
+
+        <span className={styles.footerSocialsContainer}>
+          <button
+            className={styles.footerSocialsItem}
+            onClick={() =>
+              window.electron.openExternalUrl(
+                "https://discord.gg/hydralauncher"
+              )
+            }
+          >
+            <DiscordLogo />
+          </button>
+
+          <button
+            className={styles.footerSocialsItem}
+            onClick={() =>
+              window.electron.openExternalUrl(
+                "https://twitter.com/hydralauncher"
+              )
+            }
+          >
+            <XLogo />
+          </button>
+
+          <button
+            className={styles.footerSocialsItem}
+            onClick={() =>
+              window.electron.openExternalUrl(
+                "https://github.com/hydralauncher/hydra"
+              )
+            }
+          >
+            <MarkGithubIcon size={16} />
+          </button>
+        </span>
+      </footer>
     </aside>
   );
 }