fix(settings): responsive style for setting tabs

compsci-adl · Feb 24, 2024 · 20b66ab · 20b66ab
1 parent 9789fe0
commit 20b66ab
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 30 deletions.
diff --git a/src/app/(account)/settings/Settings.tsx b/src/app/(account)/settings/Settings.tsx
@@ -26,17 +26,17 @@ export default function Settings({ settingData }: { settingData: SettingData })
     const { refresh } = useRouter();
 
     return (
-        <>
+        <div className="flex w-full flex-col gap-4 border-4 border-black bg-white px-4 py-8 text-black md:flex-row md:gap-8 md:p-12">
             <Sidebar
                 currentTab={tab}
                 onTabChange={(tab) => {
                     setTab(tab);
                     refresh();
                 }}
             />
-            <div className="flex w-full md:col-span-2">
+            <div className="w-full">
                 <Tab settingData={settingData} />
             </div>
-        </>
+        </div>
     );
 }
diff --git a/src/app/(account)/settings/Sidebar.tsx b/src/app/(account)/settings/Sidebar.tsx
@@ -10,7 +10,7 @@ function SidebarTab({ tabName, currentTab, onTabChange }: SidebarTabProps) {
     const selected = currentTab === tabName;
     return (
         <button
-            className={`text-left md:text-right ${selected ? 'cursor-default font-bold' : 'hover:underline'}`}
+            className={`text-nowrap text-xl md:text-base ${selected ? 'cursor-default font-bold' : 'hover:underline'}`}
             onClick={() => {
                 if (!selected) {
                     onTabChange(tabName);
@@ -25,22 +25,22 @@ function SidebarTab({ tabName, currentTab, onTabChange }: SidebarTabProps) {
 interface SidebarProps {
     currentTab: TabNames;
     onTabChange: (tab: TabNames) => void;
+    className?: string;
 }
 
-export default function Sidebar({ currentTab, onTabChange }: SidebarProps) {
+export default function Sidebar({ currentTab, onTabChange, className }: SidebarProps) {
     return (
-        <div className="flex flex-col md:flex-row md:place-content-end">
-            <div className="mr-4 flex flex-col gap-y-4">
-                {TAB_NAMES.map((tab, i) => (
-                    <SidebarTab
-                        currentTab={currentTab}
-                        onTabChange={onTabChange}
-                        tabName={tab}
-                        key={i}
-                    />
-                ))}
-            </div>
-            <div className="my-4 border-b-2 border-grey md:my-0 md:mr-4 md:border-r-2" />
+        <div
+            className={`${className} flex flex-col items-center gap-4 overflow-y-scroll border-2 border-grey p-2 md:items-end md:overflow-visible md:border-y-0 md:border-l-0 md:border-r-2 md:py-0 md:pl-0 md:pr-8`}
+        >
+            {TAB_NAMES.map((tab, i) => (
+                <SidebarTab
+                    currentTab={currentTab}
+                    onTabChange={onTabChange}
+                    tabName={tab}
+                    key={i}
+                />
+            ))}
         </div>
     );
 }
diff --git a/src/app/(account)/settings/page.tsx b/src/app/(account)/settings/page.tsx
@@ -27,19 +27,17 @@ export default async function SettingsPage() {
             </div>
             <section className="w-full max-w-[62rem]">
                 <FancyRectangle colour="purple" offset="8" filled fullWidth>
-                    <div className="z-0 grid w-full border-4 border-black bg-white p-8 text-black md:grid-cols-3 md:p-12">
-                        {exists ? (
-                            <Settings settingData={{ membershipPayment }} />
-                        ) : (
-                            <h2 className="text-2xl">
-                                Please finishing{' '}
-                                <Link href="/join" className="font-bold text-purple">
-                                    signing up
-                                </Link>{' '}
-                                first.
-                            </h2>
-                        )}
-                    </div>
+                    {exists ? (
+                        <Settings settingData={{ membershipPayment }} />
+                    ) : (
+                        <h2 className="text-2xl">
+                            Please finishing{' '}
+                            <Link href="/join" className="font-bold text-purple">
+                                signing up
+                            </Link>{' '}
+                            first.
+                        </h2>
+                    )}
                 </FancyRectangle>
             </section>
         </main>