mirror of
https://github.com/discordjs/discord.js.git
synced 2024-08-21 00:14:41 +12:00
style(website): remove dynamic width check
This commit is contained in:
parent
2dddbe1f32
commit
c87e826087
4 changed files with 3 additions and 72 deletions
|
@ -2,15 +2,7 @@
|
|||
|
||||
import { Section as DJSSection, type SectionOptions } from '@discordjs/ui';
|
||||
import type { PropsWithChildren } from 'react';
|
||||
import { useMedia } from 'react-use';
|
||||
|
||||
// This is wrapper around the Section component from @discordjs/ui,
|
||||
// it simply automatically sets the dense prop to true if the screen
|
||||
// width is less than 768px. This is done to separate client-side logic
|
||||
// from server-side rendering.
|
||||
export function Section(options: PropsWithChildren<SectionOptions>) {
|
||||
const matches = useMedia('(max-width: 768px)', true);
|
||||
const modifiedOptions = { ...options, dense: matches };
|
||||
|
||||
return <DJSSection {...modifiedOptions} />;
|
||||
return <DJSSection {...options} />;
|
||||
}
|
||||
|
|
|
@ -1,51 +0,0 @@
|
|||
import { Section } from '@discordjs/ui';
|
||||
import type { MDXInstance } from 'astro';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { useLocation } from 'react-use';
|
||||
|
||||
export type MDXPage = MDXInstance<{ category: string; title: string }>;
|
||||
|
||||
export function SidebarItems({ pages }: { pages: MDXPage[] }) {
|
||||
const state = useLocation();
|
||||
const [active, setActive] = useState<string | undefined>('');
|
||||
|
||||
const categories = useMemo(
|
||||
() =>
|
||||
pages.reduce<Record<string, MDXPage[]>>((acc, page) => {
|
||||
if (acc[page.frontmatter.category]) {
|
||||
acc[page.frontmatter.category]?.push(page);
|
||||
} else {
|
||||
acc[page.frontmatter.category] = [page];
|
||||
}
|
||||
|
||||
return acc;
|
||||
}, {}),
|
||||
[pages],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setActive(state.pathname);
|
||||
}, [state]);
|
||||
|
||||
return Object.keys(categories).map((category, idx) => (
|
||||
<Section key={`${category}-${idx}`} title={category}>
|
||||
{categories[category]?.map((member, index) => (
|
||||
<a
|
||||
className={`dark:border-dark-100 border-light-800 focus:ring-width-2 focus:ring-blurple ml-5 flex flex-col border-l p-[5px] pl-6 outline-0 focus:rounded focus:border-0 focus:ring ${
|
||||
(member.url || '/') === active
|
||||
? 'bg-blurple text-white'
|
||||
: 'dark:hover:bg-dark-200 dark:active:bg-dark-100 hover:bg-light-700 active:bg-light-800'
|
||||
}`}
|
||||
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
|
||||
href={member.url || '/'}
|
||||
key={`${member.frontmatter.title}-${index}}`}
|
||||
title={member.frontmatter.title}
|
||||
>
|
||||
<div className="flex flex-row place-items-center gap-2 lg:text-sm">
|
||||
<span className="truncate">{member.frontmatter.title}</span>
|
||||
</div>
|
||||
</a>
|
||||
)) ?? null}
|
||||
</Section>
|
||||
));
|
||||
}
|
|
@ -2,15 +2,7 @@
|
|||
|
||||
import { Section as DJSSection, type SectionOptions } from '@discordjs/ui';
|
||||
import type { PropsWithChildren } from 'react';
|
||||
import { useMedia } from 'react-use';
|
||||
|
||||
// This is wrapper around the Section component from @discordjs/ui,
|
||||
// it simply automatically sets the dense prop to true if the screen
|
||||
// width is less than 768px. This is done to separate client-side logic
|
||||
// from server-side rendering.
|
||||
export function Section(options: PropsWithChildren<SectionOptions>) {
|
||||
const matches = useMedia('(max-width: 768px)', true);
|
||||
const modifiedOptions = { ...options, dense: matches };
|
||||
|
||||
return <DJSSection {...modifiedOptions} />;
|
||||
return <DJSSection {...options} />;
|
||||
}
|
||||
|
|
|
@ -9,7 +9,6 @@ export interface SectionOptions {
|
|||
buttonClassName?: string;
|
||||
className?: string;
|
||||
defaultClosed?: boolean | undefined;
|
||||
dense?: boolean | undefined;
|
||||
gutter?: boolean | undefined;
|
||||
icon?: JSX.Element | undefined;
|
||||
padded?: boolean | undefined;
|
||||
|
@ -20,7 +19,6 @@ export function Section({
|
|||
title,
|
||||
icon,
|
||||
padded = false,
|
||||
dense = false,
|
||||
defaultClosed = false,
|
||||
background = false,
|
||||
gutter = false,
|
||||
|
@ -55,7 +53,7 @@ export function Section({
|
|||
className={`${background ? 'bg-light-700 dark:bg-dark-500 rounded' : ''} ${gutter ? 'mt-2' : ''}`}
|
||||
state={disclosure}
|
||||
>
|
||||
{padded ? <div className={`py-5 ${dense ? 'mx-2 px-0' : 'px-4.5 mx-6.5'}`}>{children}</div> : children}
|
||||
{padded ? <div className="mx-2 px-0 py-5 md:mx-6.5 md:px-4.5">{children}</div> : children}
|
||||
</DisclosureContent>
|
||||
</div>
|
||||
);
|
||||
|
|
Loading…
Reference in a new issue