Added settings layout.

src/components/input/SettingsButton.tsx

@@ -1,6 +1,6 @@
 import { Button, Icon, PopupTrigger, Popup, Form, FormRow } from 'react-basics';
-import TimezoneSetting from 'app/(main)/settings/profile/TimezoneSetting';
-import DateRangeSetting from 'app/(main)/settings/profile/DateRangeSetting';
+import TimezoneSetting from 'app/(main)/profile/TimezoneSetting';
+import DateRangeSetting from 'app/(main)/profile/DateRangeSetting';
 import Icons from 'components/icons';
 import { useMessages } from 'components/hooks';
 import styles from './SettingsButton.module.css';

src/components/layout/SettingsLayout.module.css

@@ -0,0 +1,31 @@
+.layout {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 20px;
+}
+
+.menu {
+  width: 240px;
+  padding-top: 34px;
+  padding-right: 20px;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  min-height: 50vh;
+}
+
+@media only screen and (max-width: 992px) {
+  .layout {
+    grid-template-columns: 1fr;
+  }
+
+  .menu {
+    display: none;
+  }
+
+  .content {
+    margin-top: 20px;
+  }
+}

src/components/layout/SettingsLayout.tsx

@@ -0,0 +1,25 @@
+'use client';
+import { ReactNode } from 'react';
+import { usePathname } from 'next/navigation';
+import SideNav from 'components/layout/SideNav';
+import styles from './SettingsLayout.module.css';
+
+export function SettingsLayout({ items = [], children }: { items: any[]; children: ReactNode }) {
+  const pathname = usePathname();
+  const cloudMode = !!process.env.cloudMode;
+
+  const getKey = () => items.find(({ url }) => pathname === url)?.key;
+
+  return (
+    <div className={styles.layout}>
+      {!cloudMode && (
+        <div className={styles.menu}>
+          <SideNav items={items} shallow={true} selectedKey={getKey()} />
+        </div>
+      )}
+      <div className={styles.content}>{children}</div>
+    </div>
+  );
+}
+
+export default SettingsLayout;