Adding Tabs
How to create a new page and add it to the navigation.
Adding a new tab requires four small changes — creating the page, exporting it, registering the route, and adding it to the tab list.
1. Create the Page
Create a folder and page file inside src/routes/:
src-web/routes/misc/page.tsximport { MainLayout } from "@/components/layouts/main-layout";
import { Section } from "@/components/section";
import { SectionGrid } from "@/components/section-grid";
import { Field } from "@/components/field";
import { Switch } from "@/components/switch";
import { Slider } from "@/components/slider";
import { useConfigKey } from "@/hooks";
interface MiscConfig {
walkspeed_enabled: boolean;
walkspeed: number;
noclip_enabled: boolean;
}
export function MiscPage() {
const { data, set, isLoading, error } = useConfigKey<MiscConfig>("misc");
return (
<MainLayout loading={isLoading} error={error}>
<SectionGrid columns={1}>
<Section title="Movement">
<Field
name="Walkspeed"
description="Override the player movement speed"
hasSubFields
subFieldsEnabled={data.walkspeed_enabled ?? false}
>
<Switch
checked={data.walkspeed_enabled}
onChange={(walkspeed_enabled) =>
set({ ...data, walkspeed_enabled })
}
/>
<Field name="Speed">
<Slider
value={data.walkspeed}
onChange={(walkspeed) => set({ ...data, walkspeed })}
min={1}
max={100}
step={1}
/>
</Field>
</Field>
<Field name="Noclip" description="Fly through walls and terrain">
<Switch
checked={data.noclip_enabled}
onChange={(noclip_enabled) => set({ ...data, noclip_enabled })}
/>
</Field>
</Section>
</SectionGrid>
</MainLayout>
);
}Always spread ...data when calling set so you only update the field you intend to and don't accidentally wipe out the rest of the config.
2. Export the Page
Open src/routes/index.ts and export your new page:
export { MiscPage } from "./misc/page";3. Register the Route
Open src/main.tsx and add your page as a new route:
import { MiscPage } from "./routes";
<Route path="/misc" element={<MiscPage />} />;4. Add to the Tab List
Open src-web/config.ts and add your tab:
export const TABS = [
{ label: "Home", path: "/" },
{ label: "Visuals", path: "/visuals" },
{ label: "Aimbot", path: "/aimbot" },
{ label: "Misc", path: "/misc" }, // add this
{ label: "Config", path: "/config" },
{ label: "Settings", path: "/settings" },
];The label is what appears in the navigation bar and the path must match the route you registered in main.tsx.