Mobile settings layout

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>
           </>

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>

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%);
 }

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()}>

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;
 }
 

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>
   );
 };

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: [