From d315a397935140598bc0d3c1a14c7ec987ee462c Mon Sep 17 00:00:00 2001
From: n4ze3m <n4ze3m@gmail.com>
Date: Sat, 8 Feb 2025 13:30:08 +0530
Subject: [PATCH] refactor: restructure Layout and SettingsLayout components
 for improved responsiveness and layout consistency

---
 src/components/Layouts/Layout.tsx             |   3 -
 .../Layouts/SettingsOptionLayout.tsx          | 174 +++++++++---------
 2 files changed, 88 insertions(+), 89 deletions(-)

diff --git a/src/components/Layouts/Layout.tsx b/src/components/Layouts/Layout.tsx
index 07aef22..a5ae02d 100644
--- a/src/components/Layouts/Layout.tsx
+++ b/src/components/Layouts/Layout.tsx
@@ -39,9 +39,6 @@ export default function OptionLayout({
     <div className="flex h-full w-full">
       <main className="relative h-dvh 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
             setSidebarOpen={setSidebarOpen}
             setOpenModelSettings={setOpenModelSettings}
diff --git a/src/components/Layouts/SettingsOptionLayout.tsx b/src/components/Layouts/SettingsOptionLayout.tsx
index 3128c61..7dcd567 100644
--- a/src/components/Layouts/SettingsOptionLayout.tsx
+++ b/src/components/Layouts/SettingsOptionLayout.tsx
@@ -54,93 +54,95 @@ const LinkComponent = (item: {
 export const SettingsLayout = ({ children }: { children: React.ReactNode }) => {
   const location = useLocation()
   const { t } = useTranslation(["settings", "common", "openai"])
-
   return (
-    <>
-      <div className="mx-auto max-w-7xl lg:flex lg:gap-x-16 lg:px-8">
-        <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">
-          <nav className="flex-none  px-4 sm:px-6 lg:px-0">
-            <ul
-              role="list"
-              className="flex gap-x-3 gap-y-1 whitespace-nowrap lg:flex-col">
-              <LinkComponent
-                href="/settings"
-                name={t("generalSettings.title")}
-                icon={OrbitIcon}
-                current={location.pathname}
-              />
-              <LinkComponent
-                href="/settings/rag"
-                name={t("rag.title")}
-                icon={CombineIcon}
-                current={location.pathname}
-              />
-              <LinkComponent
-                href="/settings/ollama"
-                name={t("ollamaSettings.title")}
-                icon={OllamaIcon}
-                current={location.pathname}
-              />
-              {import.meta.env.BROWSER === "chrome" && (
-                <LinkComponent
-                  href="/settings/chrome"
-                  name={t("chromeAiSettings.title")}
-                  icon={ChromeIcon}
-                  current={location.pathname}
-                  beta
-                />
-              )}
-              <LinkComponent
-                href="/settings/openai"
-                name={t("openai:settings")}
-                icon={CpuIcon}
-                current={location.pathname}
-                beta
-              />
-              <LinkComponent
-                href="/settings/model"
-                name={t("manageModels.title")}
-                current={location.pathname}
-                icon={BrainCircuitIcon}
-              />
-              <LinkComponent
-                href="/settings/knowledge"
-                name={
-                  <div className="inline-flex items-center gap-2">
-                    {t("manageKnowledge.title")}
-                  </div>
-                }
-                icon={BlocksIcon}
-                current={location.pathname}
-              />
-              <LinkComponent
-                href="/settings/prompt"
-                name={t("managePrompts.title")}
-                icon={BookIcon}
-                current={location.pathname}
-              />
-              <LinkComponent
-                href="/settings/share"
-                name={t("manageShare.title")}
-                icon={ShareIcon}
-                current={location.pathname}
-              />
-              <LinkComponent
-                href="/settings/about"
-                name={t("about.title")}
-                icon={InfoIcon}
-                current={location.pathname}
-              />
-            </ul>
-          </nav>
-        </aside>
-
-        <main className={"px-4 py-16 sm:px-6 lg:flex-auto lg:px-0 lg:py-20"}>
-          <div className="mx-auto max-w-2xl space-y-16 sm:space-y-10 lg:mx-0 lg:max-w-none">
-            {children}
+    <div className="flex min-h-screen -z-10 w-full flex-col">
+      <main className="relative w-full flex-1">
+        <div className="mx-auto w-full h-full custom-scrollbar overflow-y-auto">
+          <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
+                  role="list"
+                  className="flex flex-row lg:flex-col gap-x-3 gap-y-1 min-w-max lg:min-w-0">
+                  <LinkComponent
+                    href="/settings"
+                    name={t("generalSettings.title")}
+                    icon={OrbitIcon}
+                    current={location.pathname}
+                  />
+                  <LinkComponent
+                    href="/settings/rag"
+                    name={t("rag.title")}
+                    icon={CombineIcon}
+                    current={location.pathname}
+                  />
+                  <LinkComponent
+                    href="/settings/ollama"
+                    name={t("ollamaSettings.title")}
+                    icon={OllamaIcon}
+                    current={location.pathname}
+                  />
+                  {import.meta.env.BROWSER === "chrome" && (
+                    <LinkComponent
+                      href="/settings/chrome"
+                      name={t("chromeAiSettings.title")}
+                      icon={ChromeIcon}
+                      current={location.pathname}
+                      beta
+                    />
+                  )}
+                  <LinkComponent
+                    href="/settings/openai"
+                    name={t("openai:settings")}
+                    icon={CpuIcon}
+                    current={location.pathname}
+                    beta
+                  />
+                  <LinkComponent
+                    href="/settings/model"
+                    name={t("manageModels.title")}
+                    current={location.pathname}
+                    icon={BrainCircuitIcon}
+                  />
+                  <LinkComponent
+                    href="/settings/knowledge"
+                    name={
+                      <div className="inline-flex items-center gap-2">
+                        {t("manageKnowledge.title")}
+                      </div>
+                    }
+                    icon={BlocksIcon}
+                    current={location.pathname}
+                  />
+                  <LinkComponent
+                    href="/settings/prompt"
+                    name={t("managePrompts.title")}
+                    icon={BookIcon}
+                    current={location.pathname}
+                  />
+                  <LinkComponent
+                    href="/settings/share"
+                    name={t("manageShare.title")}
+                    icon={ShareIcon}
+                    current={location.pathname}
+                  />
+                  <LinkComponent
+                    href="/settings/about"
+                    name={t("about.title")}
+                    icon={InfoIcon}
+                    current={location.pathname}
+                  />
+                </ul>
+              </nav>
+            </aside>
+            <main className="flex-1 px-4 py-8 sm:px-6 lg:px-0 lg:py-20">
+              <div className="mx-auto max-w-4xl space-y-8 sm:space-y-10">
+                {children}
+              </div>
+            </main>
           </div>
-        </main>
-      </div>
-    </>
+        </div>
+      </main>
+    </div>
   )
 }