don't use mobilepage

This commit is contained in:
Josh Hawkins 2025-10-08 11:28:57 -05:00
parent 840952d499
commit 573b2b76e0

View File

@ -56,16 +56,11 @@ import {
SidebarMenuSubItem, SidebarMenuSubItem,
SidebarProvider, SidebarProvider,
} from "@/components/ui/sidebar"; } from "@/components/ui/sidebar";
import {
MobilePage,
MobilePageContent,
MobilePagePortal,
MobilePageTitle,
} from "@/components/mobile/MobilePage";
import { ChevronRight } from "lucide-react"; import { ChevronRight } from "lucide-react";
import { IoMdArrowRoundBack } from "react-icons/io"; import { IoMdArrowRoundBack } from "react-icons/io";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import Heading from "@/components/ui/heading"; import Heading from "@/components/ui/heading";
import { isPWA } from "@/utils/isPWA";
const allSettingsViews = [ const allSettingsViews = [
"ui", "ui",
@ -310,26 +305,24 @@ export default function Settings() {
</div> </div>
)} )}
</div> </div>
<MobilePage open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}> {mobileMenuOpen && (
<MobilePagePortal> <div
<MobilePageContent className="px-4"> className={cn(
<div "absolute top-0 z-50 mb-12 bg-background",
className={cn( isPWA && "mb-16",
"sticky -top-2 z-50 mb-2 flex items-center justify-center bg-background p-4", "landscape:mb-14 landscape:md:mb-16",
)} )}
> >
<div className="px-4">
<div className="sticky -top-2 z-50 mb-2 flex items-center justify-center bg-background p-4">
<div className="flex flex-row text-center"> <div className="flex flex-row text-center">
<MobilePageTitle> <h2 className="text-lg font-semibold">
{t("settings", { ns: "common" })} {t("settings", { ns: "common" })}
</MobilePageTitle> </h2>
</div> </div>
</div> </div>
<div <div className="scrollbar-container max-h-[calc(100vh-8rem)] overflow-y-auto">
className={cn(
"scrollbar-container max-h-[calc(100vh-8rem)] overflow-y-auto",
)}
>
{settingsGroups.map((group) => { {settingsGroups.map((group) => {
const filteredItems = group.items.filter((item) => const filteredItems = group.items.filter((item) =>
visibleSettingsViews.includes(item.key as SettingsType), visibleSettingsViews.includes(item.key as SettingsType),
@ -363,9 +356,9 @@ export default function Settings() {
); );
})} })}
</div> </div>
</MobilePageContent> </div>
</MobilePagePortal> </div>
</MobilePage> )}
<div className="flex-1 overflow-auto p-2"> <div className="flex-1 overflow-auto p-2">
{(() => { {(() => {
const CurrentComponent = getCurrentComponent(page); const CurrentComponent = getCurrentComponent(page);