Merge pull request #230 from sudo-mode/feature/marshak-new-links

feat: new marshak links in header & footer

Author: sashabratchikov

src/components/Footer/Footer.css

@@ -15,7 +15,7 @@
   display: grid;
   grid-template-columns: 1fr min-content 1fr;
   grid-template-areas: "marshak social yandex";
-  grid-column-gap: 20px;
+  grid-column-gap: 18px;
 }
 
 .footer__marshak {
@@ -69,6 +69,10 @@
     font-size: 15px;
   }
 
+  .footer__links {
+    grid-column-gap: 12px;
+  }
+
   .footer__owner-info {
     font-size: 11px;
     line-height: 18px;

src/components/Footer/MarshakNavigation.css

@@ -40,17 +40,17 @@
   opacity: .5;
 }
 
-@media screen and (max-width: 1024px) {
+@media screen and (max-width: 1140px) {
   .marshak-navigation__links {
-    margin-left: 30px;
+    margin-left: 20px;
   }
 
   .marshak-navigation__link-container {
-    margin-left: 12px;
+    margin-left: 8px;
   }
 }
 
-@media screen and (max-width: 640px) {
+@media screen and (max-width: 1024px) {
   .marshak-navigation {
     flex-direction: column;
   }
@@ -60,7 +60,7 @@
   }
 }
 
-@media screen and (max-width: 480px) {
+@media screen and (max-width: 660px) {
   .marshak-navigation__links {
     flex-direction: column;
     margin-top: 16px;

src/components/Footer/MarshakNavigation.js

@@ -11,7 +11,7 @@ function MarshakNavigation ({ className, links }) {
             <a
               className="marshak-navigation__link"
               href={item.link}
-              target="_blank"
+              target={item.target}
               rel="noreferrer"
             >
               {item.title}

src/components/Header/Marshak.js

@@ -118,6 +118,7 @@ function Marshak({ className, isMobile, isLandscape, isPlayerExtend }) {
               key={i}
               marshakLabel={item.marshakLabel}
               marshakLink={item.marshakLink}
+              marshakLinkTarget={item.target}
               style={{
                 ...item,
               }}

src/components/Header/MarshakLink.js

@@ -1,13 +1,13 @@
 import './MarshakLink.css';
 import '../../style-mixes/main-link/main-link.css';
 
-function MarshakLink({ marshakLabel, marshakLink, style }) {
+function MarshakLink({ marshakLabel, marshakLink, marshakLinkTarget, style }) {
   return (
     <li className="marshak-link-container" style={style}>
       <a
         className="main-link main-link_type_common"
         href={marshakLink}
-        target="_blank"
+        target={marshakLinkTarget}
         rel="noreferrer"
       >
         {marshakLabel}

src/configs/links.js

@@ -26,15 +26,28 @@ const yandexPraktikumLink = {
 const marshakLinks = [
   {
     marshakLabel: 'Книги',
-    marshakLink: 'https://marshakbooks.ru/'
+    marshakLink: 'https://marshakbooks.ru/',
+    target: '_blank',
+  },
+  {
+    marshakLabel: 'Одежда',
+    marshakLink: 'https://marshakbooks.ru/wear/',
+    target: '_blank',
+  },
+  {
+    marshakLabel: 'Музыка',
+    marshakLink: 'https://marshakbooks.ru/turbina/',
+    target: '_self',
   },
   {
     marshakLabel: 'Школа',
-    marshakLink: 'https://marshakbooks.ru/school/'
+    marshakLink: 'https://marshakbooks.ru/school/',
+    target: '_blank',
   },
   {
     marshakLabel: 'О нас',
-    marshakLink: 'https://marshakbooks.ru/о-нас/'
+    marshakLink: 'https://marshakbooks.ru/о-нас/',
+    target: '_blank',
   },
 ];
 
@@ -43,14 +56,27 @@ const marshakNavLinks = [
   {
     title: 'Книги',
     link: 'https://marshakbooks.ru/',
+    target: '_blank',
+  },
+  {
+    title: 'Одежда',
+    link: 'https://marshakbooks.ru/wear/',
+    target: '_blank',
+  },
+  {
+    title: 'Музыка',
+    link: 'https://marshakbooks.ru/turbina/',
+    target: '_self',
   },
   {
     title: 'Школа',
     link: 'https://marshakbooks.ru/school/',
+    target: '_blank',
   },
   {
     title: 'О нас',
     link: 'https://marshakbooks.ru/о-нас/',
+    target: '_blank',
   },
 ];