From efdc57b8c475bd0acd095b3dbb5581301bbae62c Mon Sep 17 00:00:00 2001
From: Kieran <kieran@harkin.me>
Date: Mon, 28 Aug 2023 16:31:46 +0100
Subject: [PATCH] Mobile settings layout

---
 packages/app/src/Pages/ProfilePage.tsx      |  2 +-
 packages/app/src/Pages/SettingsPage.tsx     |  2 +-
 packages/app/src/Pages/settings/Profile.css |  1 -
 packages/app/src/Pages/settings/Profile.tsx |  2 +-
 packages/app/src/Pages/settings/Root.css    |  8 ++++++-
 packages/app/src/Pages/settings/Root.tsx    | 24 ++++++++++++++++-----
 packages/app/webpack.config.js              |  6 +++---
 7 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/packages/app/src/Pages/ProfilePage.tsx b/packages/app/src/Pages/ProfilePage.tsx
index c9dbe216..6ff75f64 100644
--- a/packages/app/src/Pages/ProfilePage.tsx
+++ b/packages/app/src/Pages/ProfilePage.tsx
@@ -409,7 +409,7 @@ export default function ProfilePage() {
         )}
         {isMe ? (
           <>
-            <button type="button" onClick={() => navigate("/settings/profile")}>
+            <button type="button" onClick={() => navigate("/settings")}>
               <FormattedMessage {...messages.Settings} />
             </button>
           </>
diff --git a/packages/app/src/Pages/SettingsPage.tsx b/packages/app/src/Pages/SettingsPage.tsx
index 6483ab05..4160ca7b 100644
--- a/packages/app/src/Pages/SettingsPage.tsx
+++ b/packages/app/src/Pages/SettingsPage.tsx
@@ -18,7 +18,7 @@ export default function SettingsPage() {
   return (
     <>
       <div className="main-content p">
-        <h2 onClick={() => navigate("/settings/profile")} className="pointer">
+        <h2 onClick={() => navigate("/settings")} className="pointer">
           <FormattedMessage {...messages.Settings} />
         </h2>
       </div>
diff --git a/packages/app/src/Pages/settings/Profile.css b/packages/app/src/Pages/settings/Profile.css
index 1a48afc6..cb1b77a4 100644
--- a/packages/app/src/Pages/settings/Profile.css
+++ b/packages/app/src/Pages/settings/Profile.css
@@ -14,7 +14,6 @@
 .settings .banner {
   width: 100%;
   height: 100%;
-  background-size: cover;
   border-radius: 12px;
   background: linear-gradient(90deg, #60a5fa 0%, #a78bfa 100%);
 }
diff --git a/packages/app/src/Pages/settings/Profile.tsx b/packages/app/src/Pages/settings/Profile.tsx
index c52eb691..68be332d 100644
--- a/packages/app/src/Pages/settings/Profile.tsx
+++ b/packages/app/src/Pages/settings/Profile.tsx
@@ -167,7 +167,7 @@ export default function ProfileSettings(props: ProfileSettingsProps) {
           {(props.banner ?? true) && (
             <div
               style={{
-                backgroundImage: (banner?.length ?? 0) > 0 ? `url(${banner})` : undefined,
+                background: (banner?.length ?? 0) > 0 ? `no-repeat center/cover url("${banner}")` : undefined,
               }}
               className="banner">
               <AsyncButton type="button" onClick={() => setNewBanner()}>
diff --git a/packages/app/src/Pages/settings/Root.css b/packages/app/src/Pages/settings/Root.css
index b5d57ee6..1e52742a 100644
--- a/packages/app/src/Pages/settings/Root.css
+++ b/packages/app/src/Pages/settings/Root.css
@@ -3,11 +3,17 @@
   grid-template-columns: 237px auto;
 }
 
+@media(max-width: 768px) {
+  .settings-nav {
+    grid-template-columns: auto;
+  }
+}
+
 .settings-nav > div {
   border: 1px solid var(--gray-superdark);
 }
 
-.settings-nav > div:nth-child(2) {
+.settings-nav > div.content {
   padding: 12px 16px;
 }
 
diff --git a/packages/app/src/Pages/settings/Root.tsx b/packages/app/src/Pages/settings/Root.tsx
index 0eac3878..70bba8ba 100644
--- a/packages/app/src/Pages/settings/Root.tsx
+++ b/packages/app/src/Pages/settings/Root.tsx
@@ -1,6 +1,7 @@
 import "./Root.css";
+import { useEffect, useMemo } from "react";
 import { FormattedMessage } from "react-intl";
-import { Outlet, useNavigate } from "react-router-dom";
+import { Outlet, useLocation, useNavigate } from "react-router-dom";
 import Icon from "Icons/Icon";
 import { LoginStore, logout } from "Login";
 import useLogin from "Hooks/useLogin";
@@ -8,10 +9,13 @@ import { unwrap } from "SnortUtils";
 import { getCurrentSubscription } from "Subscription";
 
 import messages from "./messages";
+import usePageWidth from "Hooks/usePageWidth";
 
 const SettingsIndex = () => {
   const login = useLogin();
   const navigate = useNavigate();
+  const location = useLocation();
+  const pageWidth = usePageWidth();
   const sub = getCurrentSubscription(LoginStore.allSubscriptions());
 
   function handleLogout() {
@@ -19,9 +23,19 @@ const SettingsIndex = () => {
     navigate("/");
   }
 
+  useEffect(() => {
+    if (location.pathname === "/settings" && pageWidth >= 768) {
+      navigate("/settings/profile", { replace: true });
+    }
+  }, [location, pageWidth]);
+
+  const [hideMenu, hideContent] = useMemo(() => {
+    return [location.pathname !== "/settings" && pageWidth < 768, location.pathname === "/settings" && pageWidth < 768];
+  }, [location, pageWidth]);
+
   return (
     <div className="settings-nav">
-      <div>
+      {!hideMenu && <div>
         <div className="settings-row" onClick={() => navigate("profile")}>
           <Icon name="profile" size={24} />
           <FormattedMessage {...messages.Profile} />
@@ -81,10 +95,10 @@ const SettingsIndex = () => {
           <FormattedMessage {...messages.LogOut} />
           <Icon name="arrowFront" size={16} />
         </div>
-      </div>
-      <div>
+      </div>}
+      {!hideContent && <div className="content">
         <Outlet />
-      </div>
+      </div>}
     </div>
   );
 };
diff --git a/packages/app/webpack.config.js b/packages/app/webpack.config.js
index 65c7d586..e5bec640 100644
--- a/packages/app/webpack.config.js
+++ b/packages/app/webpack.config.js
@@ -58,9 +58,9 @@ const config = {
     new MiniCssExtractPlugin({
       filename: isProduction ? "[name].[chunkhash].css" : "[name].css",
     }),
-    new WorkboxPlugin.InjectManifest({
-      swSrc: "./src/service-worker.ts",
-    }),
+    isProduction ? new WorkboxPlugin.InjectManifest({
+      swSrc: "./src/service-worker.ts"
+    }) : false,
   ],
   module: {
     rules: [