Add settings closing animation.

src/pages/settings/GenericSettings.tsx

@@ -26,6 +26,7 @@ interface Props {
         id: string;
         icon: Children;
         title: Children;
+        hidden?: boolean;
         hideTitle?: boolean;
     }[];
     custom?: Children;
@@ -51,15 +52,15 @@ export function GenericSettings({
 
     const [closing, setClosing] = useState(false);
     function exitSettings() {
+        if (history.length > 1) {
             setClosing(true);
 
             setTimeout(() => {
-            if (history.length > 0) {
                 history.goBack();
+            }, 100);
         } else {
             history.push("/");
         }
-        }, 100);
     }
 
     useEffect(() => {
@@ -77,6 +78,7 @@ export function GenericSettings({
         <div
             className={classNames(styles.settings, {
                 [styles.closing]: closing,
+                [styles.native]: window.isNative,
             })}
             data-mobile={isTouchscreenDevice}>
             <Helmet>
@@ -121,7 +123,8 @@ export function GenericSettings({
             {(!isTouchscreenDevice || typeof page === "undefined") && (
                 <div className={styles.sidebar}>
                     <div className={styles.container}>
-                        {pages.map((entry, i) => (
+                        {pages.map((entry, i) =>
+                            entry.hidden ? undefined : (
                                 <>
                                     {entry.category && (
                                         <Category
@@ -142,7 +145,8 @@ export function GenericSettings({
                                     </ButtonItem>
                                     {entry.divider && <LineDivider />}
                                 </>
-                        ))}
+                            ),
+                        )}
                         {custom}
                     </div>
                 </div>

src/pages/settings/Settings.tsx

@@ -104,6 +104,7 @@ export default function Settings() {
                 },
                 {
                     id: "native",
+                    hidden: !window.isNative,
                     icon: <Desktop size={20} />,
                     title: <Text id="app.settings.pages.native.title" />,
                 },
@@ -140,11 +141,9 @@ export default function Settings() {
                 <Route path="/settings/sync">
                     <Sync />
                 </Route>,
-                window.isNative && (
                 <Route path="/settings/native">
                     <Native />
-                    </Route>
-                ),
+                </Route>,
                 <Route path="/settings/experiments">
                     <ExperimentsPage />
                 </Route>,