iod/page-assist
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: restructure Layout and SettingsLayout components for improved responsiveness and layout consistency

Browse Source
This commit is contained in:
n4ze3m 2025-02-08 13:30:08 +05:30
parent 40698e02d7
commit d315a39793
2 changed files with 88 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/Layouts/Layout.tsx
View File

@ -39,9 +39,6 @@ export default function OptionLayout({
<div className="flex h-full w-full"> <div className="flex h-full w-full">
<main className="relative h-dvh w-full"> <main className="relative h-dvh w-full">
<div className="relative z-10 w-full"> <div className="relative z-10 w-full">
<div className="pointer-events-none absolute inset-x-0 top-0 z-10 h-24 overflow-hidden sm:h-20">
<div className="bgGradientMask bg-background h-dvh w-screen"></div>
</div>
<Header <Header
setSidebarOpen={setSidebarOpen} setSidebarOpen={setSidebarOpen}
setOpenModelSettings={setOpenModelSettings} setOpenModelSettings={setOpenModelSettings}

22
src/components/Layouts/SettingsOptionLayout.tsx
View File

@ -54,15 +54,16 @@ const LinkComponent = (item: {
export const SettingsLayout = ({ children }: { children: React.ReactNode }) => { export const SettingsLayout = ({ children }: { children: React.ReactNode }) => {
const location = useLocation() const location = useLocation()
const { t } = useTranslation(["settings", "common", "openai"]) const { t } = useTranslation(["settings", "common", "openai"])
return ( return (
<> <div className="flex min-h-screen -z-10 w-full flex-col">
<div className="mx-auto max-w-7xl lg:flex lg:gap-x-16 lg:px-8"> <main className="relative w-full flex-1">
<aside className="flex lg:rounded-md bg-white lg:p-4 lg:mt-20 overflow-x-auto lg:border-0 border-b py-4 lg:block lg:w-80 lg:flex-none dark:bg-[#171717] dark:border-gray-600"> <div className="mx-auto w-full h-full custom-scrollbar overflow-y-auto">
<nav className="flex-none px-4 sm:px-6 lg:px-0"> <div className="flex flex-col lg:flex-row lg:gap-x-16 lg:px-24">
<aside className="sticky sm:mt-0 mt-14 top-0 bg-white dark:bg-[#171717] border-b dark:border-gray-600 lg:border-0 lg:bg-transparent lg:dark:bg-transparent">
<nav className="w-full overflow-x-auto px-4 py-4 sm:px-6 lg:px-0 lg:py-0 lg:mt-20">
<ul <ul
role="list" role="list"
className="flex gap-x-3 gap-y-1 whitespace-nowrap lg:flex-col"> className="flex flex-row lg:flex-col gap-x-3 gap-y-1 min-w-max lg:min-w-0">
<LinkComponent <LinkComponent
href="/settings" href="/settings"
name={t("generalSettings.title")} name={t("generalSettings.title")}
@ -134,13 +135,14 @@ export const SettingsLayout = ({ children }: { children: React.ReactNode }) => {
</ul> </ul>
</nav> </nav>
</aside> </aside>
<main className="flex-1 px-4 py-8 sm:px-6 lg:px-0 lg:py-20">
<main className={"px-4 py-16 sm:px-6 lg:flex-auto lg:px-0 lg:py-20"}> <div className="mx-auto max-w-4xl space-y-8 sm:space-y-10">
<div className="mx-auto max-w-2xl space-y-16 sm:space-y-10 lg:mx-0 lg:max-w-none">
{children} {children}
</div> </div>
</main> </main>
</div> </div>
</> </div>
</main>
</div>
) )
} }