style(website): remove dynamic width check

apps/guide/src/components/Section.tsx

@@ -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} />;
 }

apps/guide/src/components/SidebarItems.tsx

@@ -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>
-	));
-}

apps/website/src/components/Section.tsx

@@ -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} />;
 }

packages/ui/src/lib/components/Section.tsx

@@ -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>
 	);