feat(menu): use settings as menu entry

- add useMenuSettings

src/components/Menu/index.tsx

@@ -7,11 +7,11 @@ import {
   IonListHeader,
   IonMenu,
   IonMenuToggle,
-  IonFooter,
   IonHeader,
+  IonToolbar,
+  IonTitle,
 } from '@ionic/react';
 import { push } from 'connected-react-router';
-import { settingsOutline } from 'ionicons/icons';
 import React from 'react';
 import { useDispatch } from 'react-redux';
 import { useMenus } from '../../utils/hooks/useMenus';
@@ -58,20 +58,6 @@ export const Menu: React.FC = () => {
           })}
         </IonList>
       </IonContent>
-      <IonFooter>
-        <IonMenuToggle autoHide={false}>
-          <IonItem
-            routerLink={'/settings'}
-            routerDirection="none"
-            lines="none"
-            detail={false}
-            onClick={() => dispatch(push('/settings'))}
-          >
-            <IonIcon slot="start" icon={settingsOutline} />
-            <IonLabel>Settings</IonLabel>
-          </IonItem>
-        </IonMenuToggle>
-      </IonFooter>
     </IonMenu>
   );
 };

src/utils/hooks/useMenus.tsx

@@ -4,6 +4,7 @@ import {
   homeOutline,
   information,
   searchOutline,
+  settingsOutline,
 } from 'ionicons/icons';
 import { useTranslation } from 'react-i18next';
 import {
@@ -30,9 +31,10 @@ export const useMenus = (): Menu[] => {
   const about = useMenuAbout();
   const home = useMenuHome();
   const search = useMenuSearch();
+  const settings = useMenuSettings();
   const chapters = useMenuChapters();
 
-  return [home, about, search, ...chapters.flat()];
+  return [home, about, search, settings, ...chapters.flat()];
 };
 
 const useMenuAbout = (): Menu => {
@@ -94,3 +96,15 @@ const useMenuSearch = (): Menu => {
     url: '/page/search',
   };
 };
+
+const useMenuSettings = (): Menu => {
+  const { t } = useTranslation();
+
+  return {
+    color: '',
+    icon: settingsOutline,
+    isHeader: false,
+    title: t('SETTINGS.TITLE'),
+    url: '/settings',
+  };
+};