Cleanup page template

src/pages/settings/Channels.tsx

@@ -11,8 +11,8 @@ import { Button } from '@components/generic/Button';
 import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
 
 export interface ChannelsProps {
-  navOpen: boolean;
-  setNavOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  navOpen?: boolean;
+  setNavOpen?: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 export const Channels = ({
@@ -30,7 +30,7 @@ export const Channels = ({
         <IconButton
           icon={<FiMenu className="w-5 h-5" />}
           onClick={(): void => {
-            setNavOpen(!navOpen);
+            setNavOpen && setNavOpen(!navOpen);
           }}
         />
       }

src/pages/settings/Connection.tsx

@@ -25,8 +25,8 @@ import type {
 } from '@meshtastic/meshtasticjs/dist/types';
 
 export interface ConnectionProps {
-  navOpen: boolean;
-  setNavOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  navOpen?: boolean;
+  setNavOpen?: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 enum connType {
@@ -125,7 +125,7 @@ export const Connection = ({
         <IconButton
           icon={<FiMenu className="w-5 h-5" />}
           onClick={(): void => {
-            setNavOpen(!navOpen);
+            setNavOpen && setNavOpen(!navOpen);
           }}
         />
       }
@@ -142,8 +142,8 @@ export const Connection = ({
       }
     >
       <Card
-        title="Basic settings"
-        description="Device name and user parameters"
+        title="Connection Settings"
+        description="HTTP, BLE and Serial Options"
       >
         <div className="w-full max-w-3xl p-10 md:max-w-xl">
           <form className="space-y-2" onSubmit={onSubmit}>

src/pages/settings/Device.tsx

@@ -15,8 +15,8 @@ import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
 import { Protobuf } from '@meshtastic/meshtasticjs';
 
 export interface DeviceProps {
-  navOpen: boolean;
-  setNavOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  navOpen?: boolean;
+  setNavOpen?: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 export const Device = ({ navOpen, setNavOpen }: DeviceProps): JSX.Element => {
@@ -46,7 +46,7 @@ export const Device = ({ navOpen, setNavOpen }: DeviceProps): JSX.Element => {
         <IconButton
           icon={<FiMenu className="w-5 h-5" />}
           onClick={(): void => {
-            setNavOpen(!navOpen);
+            setNavOpen && setNavOpen(!navOpen);
           }}
         />
       }

src/pages/settings/Index.tsx

@@ -6,14 +6,9 @@ import {
   FiLink2,
   FiRss,
   FiSmartphone,
-  FiXCircle,
 } from 'react-icons/fi';
 
-import { IconButton } from '@app/components/generic/IconButton.jsx';
-import { useBreakpoint } from '@app/hooks/breakpoint';
-import { Drawer } from '@components/generic/Drawer';
-import { SidebarItem } from '@components/generic/SidebarItem';
-import { Tab } from '@headlessui/react';
+import { PageLayout } from '@app/components/templates/PageLayout.jsx';
 
 import { Channels } from './Channels';
 import { Connection } from './Connection';
@@ -22,114 +17,43 @@ import { Interface } from './Interface';
 import { Radio } from './Radio';
 
 export const Settings = (): JSX.Element => {
-  const [navOpen, setNavOpen] = React.useState(false);
-
-  const { breakpoint } = useBreakpoint();
-
   return (
-    <Tab.Group>
-      <div className="relative flex w-full dark:text-white">
-        <Drawer
-          open={breakpoint === 'sm' ? navOpen : true}
-          permenant={breakpoint !== 'sm'}
-          onClose={(): void => {
-            setNavOpen(!navOpen);
-          }}
-        >
-          <Tab.List className="flex flex-col border-b divide-y divide-gray-300 dark:divide-gray-600 dark:border-gray-600">
-            <div className="flex items-center justify-between m-8 mr-6 md:my-10">
-              <div className="text-4xl font-extrabold leading-none tracking-tight">
-                Settings
-              </div>
-              <div className="md:hidden">
-                <IconButton
-                  icon={<FiXCircle className="w-5 h-5" />}
-                  onClick={(): void => {
-                    setNavOpen(false);
-                  }}
-                />
-              </div>
-            </div>
-            <Tab
-              onClick={(): void => {
-                setNavOpen(false);
-              }}
-            >
-              {({ selected }): JSX.Element => (
-                <SidebarItem
-                  title="Connection"
-                  description="Method and peramaters for connecting to the device"
-                  selected={selected}
-                  icon={<FiLink2 className="flex-shrink-0 w-6 h-6" />}
-                />
-              )}
-            </Tab>
-            <Tab
-              onClick={(): void => {
-                setNavOpen(false);
-              }}
-            >
-              {({ selected }): JSX.Element => (
-                <SidebarItem
-                  title="Device"
-                  description="Device settings, such as device name and wifi settings"
-                  selected={selected}
-                  icon={<FiSmartphone className="flex-shrink-0 w-6 h-6" />}
-                />
-              )}
-            </Tab>
-            <Tab>
-              {({ selected }): JSX.Element => (
-                <SidebarItem
-                  title="Radio"
-                  description="Adjust radio power and frequency settings"
-                  selected={selected}
-                  icon={<FiRss className="flex-shrink-0 w-6 h-6" />}
-                />
-              )}
-            </Tab>
-            <Tab>
-              {({ selected }): JSX.Element => (
-                <SidebarItem
-                  title="Interface"
-                  description="Change language and other UI settings"
-                  selected={selected}
-                  icon={<FiLayout className="flex-shrink-0 w-6 h-6" />}
-                />
-              )}
-            </Tab>
-            <Tab>
-              {({ selected }): JSX.Element => (
-                <SidebarItem
-                  title="Channels"
-                  description="Manage channels"
-                  selected={selected}
-                  icon={<FiLayers className="flex-shrink-0 w-6 h-6" />}
-                />
-              )}
-            </Tab>
-          </Tab.List>
-        </Drawer>
-        <div className="flex w-full">
-          <Tab.Panels className="flex w-full">
-            <Tab.Panel className="flex w-full">
-              <Connection navOpen={navOpen} setNavOpen={setNavOpen} />
-            </Tab.Panel>
-            <Tab.Panel className="flex w-full">
-              <Device navOpen={navOpen} setNavOpen={setNavOpen} />
-            </Tab.Panel>
-            <Tab.Panel className="flex w-full">
-              <Radio navOpen={navOpen} setNavOpen={setNavOpen} />
-            </Tab.Panel>
-            <Tab.Panel className="flex w-full">
-              <Interface navOpen={navOpen} setNavOpen={setNavOpen} />
-            </Tab.Panel>
-            <Tab.Panel className="flex w-full">
-              <Channels navOpen={navOpen} setNavOpen={setNavOpen} />
-            </Tab.Panel>
-          </Tab.Panels>
-        </div>
-      </div>
-    </Tab.Group>
+    <PageLayout
+      title="Settings"
+      sidebarItems={[
+        {
+          title: 'Connection',
+          description: 'Method and peramaters for connecting to the device',
+          icon: <FiLink2 className="flex-shrink-0 w-6 h-6" />,
+        },
+        {
+          title: 'Device',
+          description: 'Device settings, such as device name and wifi settings',
+          icon: <FiSmartphone className="flex-shrink-0 w-6 h-6" />,
+        },
+        {
+          title: 'Radio',
+          description: 'Adjust radio power and frequency settings',
+          icon: <FiRss className="flex-shrink-0 w-6 h-6" />,
+        },
+        {
+          title: 'Interface',
+          description: 'Change language and other UI settings',
+          icon: <FiLayout className="flex-shrink-0 w-6 h-6" />,
+        },
+        {
+          title: 'Channels',
+          description: 'Manage channels',
+          icon: <FiLayers className="flex-shrink-0 w-6 h-6" />,
+        },
+      ]}
+      panels={[
+        <Connection key={1} />,
+        <Device key={2} />,
+        <Radio key={3} />,
+        <Interface key={4} />,
+        <Channels key={5} />,
+      ]}
+    />
   );
 };

src/pages/settings/Interface.tsx

@@ -11,8 +11,8 @@ import { Button } from '@components/generic/Button';
 import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
 
 export interface InterfaceProps {
-  navOpen: boolean;
-  setNavOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  navOpen?: boolean;
+  setNavOpen?: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 export const Interface = ({
@@ -29,7 +29,7 @@ export const Interface = ({
         <Button
           icon={<FiMenu className="w-5 h-5" />}
           onClick={(): void => {
-            setNavOpen(!navOpen);
+            setNavOpen && setNavOpen(!navOpen);
           }}
           circle
         />

src/pages/settings/Radio.tsx

@@ -16,8 +16,8 @@ import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
 import { Protobuf } from '@meshtastic/meshtasticjs';
 
 export interface RadioProps {
-  navOpen: boolean;
-  setNavOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  navOpen?: boolean;
+  setNavOpen?: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 export const Radio = ({ navOpen, setNavOpen }: RadioProps): JSX.Element => {
@@ -40,7 +40,7 @@ export const Radio = ({ navOpen, setNavOpen }: RadioProps): JSX.Element => {
         <IconButton
           icon={<FiMenu className="w-5 h-5" />}
           onClick={(): void => {
-            setNavOpen(!navOpen);
+            setNavOpen && setNavOpen(!navOpen);
           }}
         />
       }