доработка хедера футера

src/App.tsx

@@ -14,23 +14,19 @@ const App: React.FC = () => (
   <IonApp>
     <IonReactRouter>
 
-      {/* Постоянный Header */}
+<div className='flex flex-col h-screen bg-green-300'>
-      <Header />
+  <Header />
 
-      {/* Основной контейнер для контента */}
+  {/* Контент с отступом равным высоте Header */}
-      <div className='flex flex-col min-h-screen container mx-auto px-4 bg-fuchsia-200'>
+  <div className='flex-1 overflow-auto'>
+    <IonRouterOutlet>
+      <AppRoutes />
+    </IonRouterOutlet>
+  </div>
 
+  <Footer />
+</div>
 
-        <div className='container mt-20 flex-1'>
-          <IonRouterOutlet>
-            <AppRoutes />
-          </IonRouterOutlet>
-        </div>
-
-        {/* Постоянный Footer */}
-        <Footer />
-
-      </div>
     </IonReactRouter>
   </IonApp>
 );

src/AppRoutes.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Route } from 'react-router-dom';
 
 import Home from './pages/Home';

src/components/Footer.tsx

@@ -1,10 +1,10 @@
-
+import { IonRouterLink } from '@ionic/react';
 
 function Footer() {
     return (
-        <div className='mt-auto bg-fuchsia-400'>
+        <div className='w-full bg-fuchsia-400 shadow h-12 px-4 flex justify-center items-center fixed bottom-0 left-0 right-0 bg-opacity-80'>
-            <h1>Footer</h1>
+            {/* Можно добавить содержимое футера */}
-            
+            Футер
         </div>
     );
 }

src/components/Header.tsx

@@ -1,16 +1,17 @@
-import React from 'react';
 import { IonRouterLink } from '@ionic/react';
 
 function Header() {
     return (
-        <div className='fixed top-0 left-0 w-full z-50 bg-fuchsia-400 shadow h-12 px-4 flex justify-between'>
+        <div className='w-full z-50 bg-fuchsia-400 shadow h-12 px-4 flex justify-between items-center fixed top-0 left-0 right-0 bg-opacity-80'>
-            <h1>Вмеда</h1>
+            <IonRouterLink href='/home' className='cursor-pointer'>
-            <IonRouterLink href="/register">
+                Вмеда
-                <a className="text-sm">Зарегистрироваться</a>
+            </IonRouterLink>
+
+            <IonRouterLink href="/register" className="text-sm">
+                Зарегистрироваться
             </IonRouterLink>
         </div>
     );
 }
 
 export default Header;
-

src/components/MainContent.tsx

@@ -1,12 +0,0 @@
-
-
-function MainContent() {
-    return (
-        <div className="flex-1 mt-12 bg-green-200">
-            <p>main content</p>
-        </div>
-    );
-}
-
-export default MainContent;
-

src/pages/Home.tsx

@@ -2,7 +2,10 @@
 function Home() {
     return (
         <>
-          <p className="pt-20">Домашняя страница</p>
+          <div className="pt-20 mx-auto px-4">
+            <p>Домашняя страница</p>
+          </div>
+
         </>
     );
 }

src/pages/Login.tsx

@@ -2,7 +2,6 @@ function Login() {
     return (
         <div className=''>
             <h1>Войти/залогиниться</h1>         
-            
         </div>
     );
 }

src/pages/Register.tsx

@@ -1,11 +1,7 @@
-
-
 function Auth() {
   return (
-    <div className='pt-20'>
+    <div className="pt-20 mx-auto px-4">
-
+      <h1>Страница регистрации</h1>
-        <h1 className='cursor-pointer'>Страница регистрации</h1>
-
     </div>
   );
 }