fix: add adaptive to header, footer

.idea/watcherTasks.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectTasksOptions" suppressed-tasks="SCSS" />
+</project>

src/app/ekspertiza/avtotehnicheskaja/page.tsx

@@ -1,25 +1,5 @@
 import { AutoTech } from '@/views';
-import { ROUTES } from '@shared/const/route';
-import Breadcrumbs from '@widgets/breadcrumbs/ui';
-
-const breadcrumbData = [
-  {
-    name: 'Экспертиза',
-    path: ROUTES.EXPERTIZA,
-  },
-  {
-    name: 'Автотехническая экспертиза',
-    path: '',
-  },
-];
-
-const PAGE_NAME = 'Автотехническая экспертиза';
 
 export default function Page() {
-  return (
+  return <AutoTech />;
-    <>
-      <Breadcrumbs breadcrumbs={breadcrumbData} />
-      <AutoTech />
-    </>
-  );
 }

src/entities/base-menu/styles.module.scss

@@ -4,22 +4,56 @@
 
 .Navbar {
   margin: 0 auto;
-  width: rem(1540px);
+  max-width: rem(1540px);
+  padding: 0 10px;
   height: rem(100px);
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: rem(20px);
 
+  @include iftablet {
+    padding: 0 20px;
+  }
+
+  @include iflaptop {
+    max-width: rem(1540px);
+    padding: 0 28px;
+    height: rem(100px);
+    gap: rem(20px);
+  }
+
+  @include ifdesktop {
+    padding: 0 40px;
+  }
+
+  .Invite{
+    display: none;
+
+    @include iflaptop{
+      display: flex;
+    }
+  }
+
 
   .Nav {
     margin-left: auto;
 
     .Menu {
-      display: flex;
+      display: none;
-      flex-direction: row;
+
-      align-items: center;
+      @include iflaptop {
-      gap: rem(32px);
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: rem(16px);
+      }
+      @include iflaptop {
+        gap: rem(16px);
+      }
+      @include ifdesktop {
+        gap: rem(32px);
+      }
     }
 
     .Parent {
@@ -31,9 +65,13 @@
       .Row {
         display: flex;
         justify-content: space-between;
-        gap: rem(16px);
         align-items: center;
+        gap: rem(8px);
         cursor: default;
+
+        @include ifdesktop {
+          gap: rem(16px);
+        }
       }
 
       & a {

src/entities/top-menu/styles.module.scss

@@ -5,10 +5,21 @@
 
 .Top {
   margin: 0 auto;
-  width: rem(1540px);
+  max-width: rem(1540px);
+  padding: 0 10px;
   display: flex;
   justify-content: space-between;
 
+  @include iftablet {
+    padding: 0 20px;
+  }
+  @include iflaptop {
+    padding: 0 28px;
+  }
+  @include ifdesktop {
+    padding: 0 40px;
+  }
+
   .Icons {
     display: flex;
     flex-direction: row;
@@ -25,14 +36,19 @@
     flex-direction: row;
     justify-content: center;
     align-items: center;
-    gap: rem(60px);
+    gap: rem(10px);
+
+    @include iftablet {
+      gap: rem(20px);
+    }
+    @include iflaptop {
+      gap: rem(40px);
+    }
+    @include ifdesktop {
+      gap: rem(60px);
+    }
 
     .Item {
-      font-family: $font-roboto;
-      font-weight: $font-bold;
-      font-size: rem(16px);
-      line-height: 100%;
-      color: $color-white;
       display: flex;
       flex-direction: row;
       justify-content: center;
@@ -44,6 +60,22 @@
         border-radius: 50%;
         background: $color-white;
       }
+
+      .Description {
+        display: none;
+        font-family: $font-roboto;
+        font-weight: $font-bold;
+        font-size: rem(14px);
+        line-height: 100%;
+        color: $color-white;
+
+        @include iftablet {
+          display: inline-block;
+        }
+        @include iflaptop {
+          font-size: rem(16px);
+        }
+      }
     }
   }
 }

src/entities/top-menu/ui.tsx

@@ -13,12 +13,14 @@ function TopMenu() {
         <div className={s.Contacts}>
           <p className={s.Item}>
             <Icons.Envelope className={s.IconBox} />
-            spo-71@yandex.ru
+            <span className={s.Description}>spo-71@yandex.ru</span>
           </p>
 
           <p className={s.Item}>
             <Icons.Map className={s.IconBox} />
-            г. Сочи, Навагинская д. 9д, оф. 35
+            <span className={s.Description}>
+              г. Сочи, Навагинская д. 9д, оф. 35
+            </span>
           </p>
         </div>
       </div>

src/feature/article/consultation/styles.module.scss

@@ -4,6 +4,7 @@
   display: grid;
   grid-template-columns: auto 360px;
   gap: 160px;
+  padding: 0 40px;
 }
 
 .Consultation {

src/feature/article/related-articles/styles.module.scss

@@ -5,6 +5,7 @@
     display: grid;
     grid-template-columns: auto 360px;
     gap: 160px;
+    padding: 0 40px;
   }
 
   .Header {

src/views/expertise/autotech/model/breadcrums.ts

@@ -0,0 +1,14 @@
+import { ROUTES } from '@shared/const/route';
+
+export const PAGE_NAME = 'Автотехническая экспертиза';
+
+export const breadcrumbData = [
+  {
+    name: 'Экспертиза',
+    path: ROUTES.EXPERTIZA,
+  },
+  {
+    name: 'Автотехническая экспертиза',
+    path: '',
+  },
+];

src/views/expertise/autotech/styles.module.scss

@@ -4,6 +4,7 @@
   display: grid;
   grid-template-columns: auto 360px;
   gap: 160px;
+  padding: 0 40px;
 }
 
 .Article {

src/views/expertise/autotech/ui.tsx

@@ -1,14 +1,16 @@
 import s from './styles.module.scss';
 import { CallbackForm, Connect, OrderSchema } from '@/entities';
 import { Consultation, RelatedArticles, Sidebar } from '@/feature/article';
-import { PartnersSlider } from '@/widgets';
+import { Breadcrumbs, PartnersSlider } from '@/widgets';
 import { sidebarData } from './model/sidebar';
 import { relatedArticlesData } from './model/relatedArticles';
 import { expertData } from './model/expert';
+import { breadcrumbData } from './model/breadcrums';
 
 function AutoTech() {
   return (
     <>
+      <Breadcrumbs breadcrumbs={breadcrumbData} />
       <section>
         <div className={s.Container}>
           <div className={s.Article}>

src/views/home/styles.module.scss

@@ -1,15 +1,15 @@
-.Header {
-  display: flex;
-  flex-direction: column;
-}
-
 .Container {
   margin: 0 auto;
-  width: rem(1540px);
+  max-width: rem(1540px);
-  padding: 40px 0;
+  padding: 40px 10px;
-}
 
-.Footer {
+  @include iftablet{
-  margin: 0 auto;
+    padding: 40px 20px;
-  width: rem(1540px);
+  }
+  @include iflaptop{
+    padding: 40px 28px;
+  }
+  @include ifdesktop{
+    padding: 40px;
+  }
 }

src/widgets/breadcrumbs/styles.module.scss

@@ -11,7 +11,7 @@
 .Breadcrumbs {
   margin: 0 auto;
   width: rem(1540px);
-  padding: rem(20px) 0;
+  padding: rem(20px) 40px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;

src/widgets/breadcrumbs/ui.tsx

@@ -11,7 +11,7 @@ type BreadcrumbsProps = {
   }[];
 };
 
-export default function Breadcrumbs({ breadcrumbs }: BreadcrumbsProps) {
+function Breadcrumbs({ breadcrumbs }: BreadcrumbsProps) {
   return (
     <section className={s.Container}>
       <div className={s.Breadcrumbs}>
@@ -34,3 +34,5 @@ export default function Breadcrumbs({ breadcrumbs }: BreadcrumbsProps) {
     </section>
   );
 }
+
+export { Breadcrumbs };

src/widgets/footer/styles.module.scss

@@ -15,17 +15,37 @@
 
 .Grid {
   margin: 0 auto;
-  width: 1540px;
+  max-width: 1540px;
-  padding: 40px 0 0;
+  padding: 20px 10px 20px;
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-template-columns: auto;
-  ///grid-template-rows: 1fr 1fr;
   grid-auto-columns: 1fr;
-  gap: 0px 0px;
+  gap: 40px 20px;
   grid-auto-flow: row;
   grid-template-areas:
+    "about"
+    "contacts"
+    "social";
+
+  @include iftablet {
+    grid-template-columns: 1fr 1fr;
+    grid-template-areas:
+    "about about"
+    "contacts social";
+    padding: 40px 20px 0;
+    gap: 20px 2px;
+  }
+  @include iflaptop {
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-areas:
     "about linksa linksb linksc"
     "contacts contacts social social";
+    padding: 40px 28px 0;
+    gap: 0px 0px;
+  }
+  @include ifdesktop {
+    padding: 40px 40px 0;
+  }
 
   .About {
     grid-area: about;
@@ -46,6 +66,14 @@
   .LinksA {
     grid-area: linksa;
     padding: 10px;
+    display: none;
+    @include iftablet {
+    }
+    @include iflaptop {
+      display: block;
+    }
+    @include ifdesktop {
+    }
 
     .Title {
       @extend %title;
@@ -63,6 +91,11 @@
   .LinksB {
     grid-area: linksb;
     padding: 10px;
+    display: none;
+
+    @include iflaptop {
+      display: block;
+    }
 
     .Title {
       @extend %title;
@@ -80,6 +113,11 @@
   .LinksC {
     grid-area: linksc;
     padding: 10px;
+    display: none;
+
+    @include iflaptop {
+      display: block;
+    }
 
     .Title {
       @extend %title;
@@ -103,16 +141,30 @@
 
     .Icons {
       display: flex;
-      flex-direction: row;
+      flex-direction: column;
       justify-content: center;
       gap: 24px;
 
+      @include iflaptop {
+        flex-direction: row;
+        justify-content: center;
+      }
+
       .IconBox {
         display: flex;
-        flex-direction: column;
+        flex-direction: row;
         align-items: center;
         gap: 16px;
 
+        @include iftablet {
+        }
+
+        @include iflaptop {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+        }
+
         .Icon {
           border-radius: 50%;
           width: 48px;
@@ -130,7 +182,13 @@
 
   .Social {
     grid-area: social;
-    padding-left: 200px;
+
+    @include iflaptop {
+      padding-left: 100px;
+    }
+    @include ifdesktop {
+      padding-left: 200px;
+    }
 
     .Title {
       @extend %title;
@@ -151,12 +209,12 @@
 
 .Bottom {
   margin: 0 auto;
-  width: 1540px;
+  max-width: 1540px;
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
-  padding: 16px 0;
+  padding: 16px 10px;
 
   font-family: $font-roboto;
   font-weight: $font-regular;
@@ -164,6 +222,40 @@
   line-height: 100%;
   color: $color-white;
 
+  @include iftablet {
+    padding: 16px 20px;
+  }
+  @include iflaptop {
+    padding: 16px 28px;
+  }
+  @include ifdesktop {
+    padding: 16px 40px;
+  }
+
+  .List {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    @include iftablet{
+      flex-direction: row;
+    }
+  }
+
+  .ListItem {
+    &:after{
+      padding-left: 0;
+
+      @include iftablet {
+        content: '|';
+        padding-left: 8px;
+      }
+    }
+    &:last-child:after {
+      content: unset;
+    }
+  }
+
   & a {
     text-decoration: none;
     color: $color-link-hover;

src/widgets/footer/ui.tsx

@@ -107,9 +107,15 @@ function Footer() {
 
       <div className={s.Container_gray}>
         <div className={s.Bottom}>
-          © ООО “ДИ ТРАСО” |
+          <ul className={s.List}>
-          <Link href={ROUTES.EMPTY}>Политика конфиденциальности</Link> |
+            <li className={s.ListItem}>© ООО “ДИ ТРАСО”</li>
-          <Link href={ROUTES.EMPTY}>Карта сайта</Link>
+            <li className={s.ListItem}>
+              <Link href={ROUTES.EMPTY}>Политика конфиденциальности</Link>
+            </li>
+            <li className={s.ListItem}>
+              <Link href={ROUTES.EMPTY}>Карта сайта</Link>
+            </li>
+          </ul>
         </div>
       </div>
     </footer>