mirror of
https://github.com/Sendouc/sendou.ink.git
synced 2026-05-09 12:13:10 -05:00
185295d54e
* Clean away prisma migrations
* Way to migrate WIP
* SQLite3 seeding script initial
* Fetch tournament data in loader
* CheckinActions new loader data model
* Virtual banner text color columns
* Logged in user
* Count teams
* ownTeam
* Map pool tab fully working
* Teams tab
* Fix timestamp default
* Register page
* Manage team page
* Camel case checkedInTimestamp
* Clean slate
* Add .nvmrc
* Add favicon
* Package lock file version 2
* Update tsconfig
* Add Tailwind
* Add StrictMode
* Add background color
* Auth without DB
* Revert "Add Tailwind"
This reverts commit 204713c602.
* Auth with DB
* Switch back to tilde absolute import
* Import layout
* Camel case for database columns
* Move auth routes to folder
* User popover links working
* Import linters
* User page initial
* User edit page with country
* Script to delete db files before migration in dev
* Remove "youtubeName" column
* Correct avatar size on desktop
* Fix SubNav not spanning the whole page
* Remove duplicate files
* Update README
82 lines
2.6 KiB
TypeScript
82 lines
2.6 KiB
TypeScript
import { Link } from "@remix-run/react";
|
|
import { Button } from "../Button";
|
|
import { CrossIcon } from "../icons/Cross";
|
|
import { DiscordIcon } from "../icons/Discord";
|
|
import { GitHubIcon } from "../icons/GitHub";
|
|
import { PatreonIcon } from "../icons/Patreon";
|
|
import { TwitterIcon } from "../icons/Twitter";
|
|
import DrawingSection from "./DrawingSection";
|
|
import * as React from "react";
|
|
import { navItemsGrouped } from "~/constants";
|
|
import { useOnClickOutside } from "~/hooks/useOnClickOutside";
|
|
import {
|
|
SENDOU_INK_DISCORD_URL,
|
|
SENDOU_INK_GITHUB_URL,
|
|
SENDOU_INK_PATREON_URL,
|
|
SENDOU_INK_TWITTER_URL,
|
|
} from "~/utils/urls";
|
|
import { layoutIcon } from "~/utils/images";
|
|
|
|
export function Menu({ close }: { close: () => void }) {
|
|
const ref = React.useRef(null);
|
|
useOnClickOutside(ref, close);
|
|
|
|
return (
|
|
<div className="menu">
|
|
<div className="menu__inner" ref={ref}>
|
|
<DrawingSection type="boy" />
|
|
<div className="menu__top-extras">
|
|
<div className="menu__logo-container">
|
|
<img
|
|
height="20"
|
|
width="20"
|
|
src={layoutIcon("logo")}
|
|
alt="Logo of sendou.ink"
|
|
/>
|
|
sendou.ink
|
|
</div>
|
|
<Button onClick={close} variant="minimal" aria-label="Close menu">
|
|
<CrossIcon className="menu__cross-icon" />
|
|
</Button>
|
|
</div>
|
|
<nav className="menu__nav">
|
|
{navItemsGrouped
|
|
.flatMap((group) => group.items)
|
|
.map((navItem) => (
|
|
<Link
|
|
key={navItem.name}
|
|
className="menu__nav__link"
|
|
to={navItem.disabled ? "/" : navItem.url ?? navItem.name}
|
|
data-cy={`nav-link-${navItem.name}`}
|
|
onClick={close}
|
|
>
|
|
<img
|
|
src={layoutIcon(navItem.name.replace(" ", ""))}
|
|
width="32"
|
|
height="32"
|
|
alt=""
|
|
/>
|
|
{navItem.displayName ?? navItem.name}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
<div className="menu__icons-container">
|
|
<a href={SENDOU_INK_GITHUB_URL}>
|
|
<GitHubIcon className="menu__icon" />
|
|
</a>
|
|
<a href={SENDOU_INK_DISCORD_URL}>
|
|
<DiscordIcon className="menu__icon" />
|
|
</a>
|
|
<a href={SENDOU_INK_TWITTER_URL}>
|
|
<TwitterIcon className="menu__icon" />
|
|
</a>
|
|
<a href={SENDOU_INK_PATREON_URL}>
|
|
<PatreonIcon className="menu__icon" />
|
|
</a>
|
|
</div>
|
|
<DrawingSection type="girl" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|