mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-24 12:09:51 +02:00
fix: media
This commit is contained in:
TrèsAbhi committed
1 parent
6b4dc4ca8d
commit
8670e5f9a7
2 files changed
+123
-98
No files matched your search
@@ -21,6 +21,7 @@ import { BRANCH_NAMES } from '../constants/branches';
|
|||||||
import { NAVBAR_HEIGHT } from '../constants/navbar';
|
import { NAVBAR_HEIGHT } from '../constants/navbar';
|
||||||
import { homeTool, TOOLS } from '../constants/tools';
|
import { homeTool, TOOLS } from '../constants/tools';
|
||||||
import { PatreonIcon } from './PatreonIcon';
|
import { PatreonIcon } from './PatreonIcon';
|
||||||
|
import { NavbarAccount } from './NavbarAccount';
|
||||||
|
|
||||||
const toolsFiltered = TOOLS.filter((tool) => !('href' in tool));
|
const toolsFiltered = TOOLS.filter((tool) => !('href' in tool));
|
||||||
const tools = [homeTool, ...toolsFiltered];
|
const tools = [homeTool, ...toolsFiltered];
|
||||||
@@ -39,7 +40,6 @@ const isBranchNamed =
|
|||||||
}
|
}
|
||||||
|
|
||||||
.expander {
|
.expander {
|
||||||
--min-width: 768px;
|
|
||||||
--navbar-height: 48px;
|
--navbar-height: 48px;
|
||||||
|
|
||||||
transition-duration: 250ms;
|
transition-duration: 250ms;
|
||||||
@@ -48,10 +48,6 @@ const isBranchNamed =
|
|||||||
backdrop-filter: blur(4rem) brightness(0.75);
|
backdrop-filter: blur(4rem) brightness(0.75);
|
||||||
-webkit-backdrop-filter: blur(4rem) brightness(0.75);
|
-webkit-backdrop-filter: blur(4rem) brightness(0.75);
|
||||||
|
|
||||||
@media (min-width: var(--min-width)) {
|
|
||||||
max-height: var(--navbar-height);
|
|
||||||
}
|
|
||||||
|
|
||||||
&[data-expanded='false'] {
|
&[data-expanded='false'] {
|
||||||
max-height: var(--navbar-height);
|
max-height: var(--navbar-height);
|
||||||
|
|
||||||
@@ -72,18 +68,24 @@ const isBranchNamed =
|
|||||||
|
|
||||||
.hamburger {
|
.hamburger {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
|
|
||||||
@media (min-width: var(--min-width)) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tools {
|
.tools {
|
||||||
display: none;
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
@media (min-width: var(--min-width)) {
|
@media (min-width: 768px) {
|
||||||
|
.hamburger {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tools {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.expander {
|
||||||
|
max-height: var(--navbar-height);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
@@ -195,95 +197,8 @@ const isBranchNamed =
|
|||||||
>
|
>
|
||||||
<GearIcon />
|
<GearIcon />
|
||||||
</Link>
|
</Link>
|
||||||
<!-- <Popover.Root>
|
|
||||||
<Popover.Trigger>
|
|
||||||
<IconButton variant="ghost" color="gray">
|
|
||||||
<PersonIcon />
|
|
||||||
</IconButton>
|
|
||||||
</Popover.Trigger>
|
|
||||||
|
|
||||||
<Popover.Content
|
<NavbarAccount client:idle />
|
||||||
align="end"
|
|
||||||
width="320px"
|
|
||||||
onOpenAutoFocus={(event) => event.preventDefault()}
|
|
||||||
>
|
|
||||||
{
|
|
||||||
(patreonLogin.token || wargamingLogin.token) && (
|
|
||||||
<Flex direction="column" gap="2">
|
|
||||||
<Text align="center" color="gray">
|
|
||||||
Logged in accounts
|
|
||||||
</Text>
|
|
||||||
|
|
||||||
{patreonLogin.token && (
|
|
||||||
<Flex align="center" gap="2" justify="center">
|
|
||||||
<PatreonIcon width={15} height={15} />
|
|
||||||
<Text>Patreon</Text>
|
|
||||||
<Button
|
|
||||||
color="red"
|
|
||||||
variant="ghost"
|
|
||||||
onClick={() => {
|
|
||||||
$patreonLogin.set({ token: undefined });
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Logout
|
|
||||||
</Button>
|
|
||||||
</Flex>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{wargamingLogin.token && (
|
|
||||||
<Flex align="center" gap="2" justify="center">
|
|
||||||
<WargamingIcon width={15} height={15} />
|
|
||||||
<Text>
|
|
||||||
<Suspense
|
|
||||||
fallback={<Skeleton height="1em" width="5rem" />}
|
|
||||||
>
|
|
||||||
<WargamingAccountName />
|
|
||||||
</Suspense>
|
|
||||||
</Text>
|
|
||||||
<Button
|
|
||||||
color="red"
|
|
||||||
variant="ghost"
|
|
||||||
onClick={() => {
|
|
||||||
$wargamingLogin.set({ token: undefined });
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Logout
|
|
||||||
</Button>
|
|
||||||
</Flex>
|
|
||||||
)}
|
|
||||||
</Flex>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
{
|
|
||||||
!patreonLogin.token !== !wargamingLogin.token && (
|
|
||||||
<Inset side="x">
|
|
||||||
<Separator my="4" size="4" />
|
|
||||||
</Inset>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
{
|
|
||||||
(!patreonLogin.token || !wargamingLogin.token) && (
|
|
||||||
<Flex direction="column" gap="2">
|
|
||||||
<Text align="center" color="gray">
|
|
||||||
Log in with...
|
|
||||||
</Text>
|
|
||||||
|
|
||||||
{!patreonLogin.token && (
|
|
||||||
<Link style={{ width: '100%' }} href={patreonLoginUrl()}>
|
|
||||||
<Button style={{ width: '100%' }} color="tomato">
|
|
||||||
<PatreonIcon width={15} height={15} /> Patreon
|
|
||||||
</Button>
|
|
||||||
</Link>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{!wargamingLogin.token && <WargamingLoginButton />}
|
|
||||||
</Flex>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
</Popover.Content>
|
|
||||||
</Popover.Root> -->
|
|
||||||
</Flex>
|
</Flex>
|
||||||
</Flex>
|
</Flex>
|
||||||
</Flex>
|
</Flex>
|
||||||
|
|||||||
@@ -0,0 +1,110 @@
|
|||||||
|
import { patreonLoginUrl } from '@blitzkit/core';
|
||||||
|
import { useStore } from '@nanostores/react';
|
||||||
|
import { PersonIcon } from '@radix-ui/react-icons';
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Flex,
|
||||||
|
IconButton,
|
||||||
|
Inset,
|
||||||
|
Link,
|
||||||
|
Popover,
|
||||||
|
Separator,
|
||||||
|
Skeleton,
|
||||||
|
Text,
|
||||||
|
} from '@radix-ui/themes';
|
||||||
|
import { Suspense } from 'react';
|
||||||
|
import { $patreonLogin } from '../stores/patreonLogin';
|
||||||
|
import { $wargamingLogin } from '../stores/wargamingLogin';
|
||||||
|
import { PatreonIcon } from './PatreonIcon';
|
||||||
|
import { WargamingAccountName } from './WargamingAccountName';
|
||||||
|
import { WargamingIcon } from './WargamingIcon';
|
||||||
|
import { WargamingLoginButton } from './WargamingLoginButton';
|
||||||
|
|
||||||
|
export function NavbarAccount() {
|
||||||
|
const patreonLogin = useStore($patreonLogin);
|
||||||
|
const wargamingLogin = useStore($wargamingLogin);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Popover.Root>
|
||||||
|
<Popover.Trigger>
|
||||||
|
<IconButton variant="ghost" color="gray">
|
||||||
|
<PersonIcon />
|
||||||
|
</IconButton>
|
||||||
|
</Popover.Trigger>
|
||||||
|
|
||||||
|
<Popover.Content
|
||||||
|
align="end"
|
||||||
|
width="320px"
|
||||||
|
onOpenAutoFocus={(event) => event.preventDefault()}
|
||||||
|
>
|
||||||
|
{(patreonLogin.token || wargamingLogin.token) && (
|
||||||
|
<Flex direction="column" gap="2">
|
||||||
|
<Text align="center" color="gray">
|
||||||
|
Logged in accounts
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
{patreonLogin.token && (
|
||||||
|
<Flex align="center" gap="2" justify="center">
|
||||||
|
<PatreonIcon width={15} height={15} />
|
||||||
|
<Text>Patreon</Text>
|
||||||
|
<Button
|
||||||
|
color="red"
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => {
|
||||||
|
$patreonLogin.set({ token: undefined });
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Logout
|
||||||
|
</Button>
|
||||||
|
</Flex>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{wargamingLogin.token && (
|
||||||
|
<Flex align="center" gap="2" justify="center">
|
||||||
|
<WargamingIcon width={15} height={15} />
|
||||||
|
<Text>
|
||||||
|
<Suspense fallback={<Skeleton height="1em" width="5rem" />}>
|
||||||
|
<WargamingAccountName />
|
||||||
|
</Suspense>
|
||||||
|
</Text>
|
||||||
|
<Button
|
||||||
|
color="red"
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => {
|
||||||
|
$wargamingLogin.set({ token: undefined });
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Logout
|
||||||
|
</Button>
|
||||||
|
</Flex>
|
||||||
|
)}
|
||||||
|
</Flex>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!patreonLogin.token !== !wargamingLogin.token && (
|
||||||
|
<Inset side="x">
|
||||||
|
<Separator my="4" size="4" />
|
||||||
|
</Inset>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{(!patreonLogin.token || !wargamingLogin.token) && (
|
||||||
|
<Flex direction="column" gap="2">
|
||||||
|
<Text align="center" color="gray">
|
||||||
|
Log in with...
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
{!patreonLogin.token && (
|
||||||
|
<Link style={{ width: '100%' }} href={patreonLoginUrl()}>
|
||||||
|
<Button style={{ width: '100%' }} color="tomato">
|
||||||
|
<PatreonIcon width={15} height={15} /> Patreon
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!wargamingLogin.token && <WargamingLoginButton />}
|
||||||
|
</Flex>
|
||||||
|
)}
|
||||||
|
</Popover.Content>
|
||||||
|
</Popover.Root>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in new issue
Block a user