Repository: hydralauncher/hydra
File: src/renderer/components/sidebar/sidebar.tsx (TypeScript)

Code before:
                      `/game/${game.shop}/${game.objectID}`
                    )
                  }
                >
                  <AsyncImage className={styles.gameIcon} src={game.iconUrl} />
                  <span className={styles.menuItemButtonLabel}>
                    {getGameTitle(game)}
                  </span>
                </button>
              </li>
            ))}
          </ul>
        </section>
      </div>

      <button
        type="button"
        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(

Review comment (suggestion):
Please create a constant and map it, all the elements are similar
```ts
const socials = [
{ name: 'Discord', icon: DiscordLogo, url: 'https://discord.gg/hydralauncher' },
// ...
]
``` 

Code after:

          <ul className={styles.menu}>
            {filteredLibrary.map((game) => (
              <li
                key={game.id}
                className={styles.menuItem({
                  active:
                    location.pathname === `/game/${game.shop}/${game.objectID}`,
                  muted: game.status === null || game.status === "cancelled",
                })}
              >
                <button
                  type="button"
                  className={styles.menuItemButton}
                  onClick={() =>
                    handleSidebarItemClick(
                      `/game/${game.shop}/${game.objectID}`
                    )
                  }
                >
                  <AsyncImage className={styles.gameIcon} src={game.iconUrl} />
                  <span className={styles.menuItemButtonLabel}>
                    {getGameTitle(game)}
                  </span>
                </button>
              </li>
            ))}
          </ul>
        </section>
      </div>

      <button
        type="button"
        className={styles.handle}
        onMouseDown={handleMouseDown}
      />

      <footer className={styles.sidebarFooter}>
        <div className={styles.footerText}>{t("follow_us")}</div>

        <span className={styles.footerSocialsContainer}>
          {socials.map((item) => {
            return (
              <button
                key={item.url}
                className={styles.footerSocialsItem}
                onClick={() => window.electron.openExternal(item.url)}
              >
                {item.icon}
              </button>
            );