Merge pull request #14 from db1group/feature/responsive-menu

implement responsive language menu
db1group · Jul 12, 2023 · 45b53a0 · 45b53a0
2 parents f995a19 + 306ffa1
commit 45b53a0
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 8 deletions.
diff --git a/src/components/ButtonFlag/ButtonFlag.tsx b/src/components/ButtonFlag/ButtonFlag.tsx
@@ -29,7 +29,7 @@ function ButtonFlag() {
     <div>
       {languageOptions.map(languageOption => (
         <img 
-          className='buttonFlag'
+          className='button-flag'
           src={languageOption.flag}
           alt={languageOption.name}
           onClick={async () => {

diff --git a/src/components/ButtonFlag/buttonFlag.scss b/src/components/ButtonFlag/buttonFlag.scss
@@ -1,11 +1,10 @@
-.buttonFlag {
-  margin-left: 8px;
-  border-radius: 100%;
+.button-flag {
+  margin-right: 8px;
   height: 35px;
-  vertical-align: bottom;  
+  vertical-align: bottom;
 }
 
-.buttonFlag:hover {
+.button-flag:hover {
   opacity: 0.7;
   cursor: pointer;
 }
diff --git a/src/components/LogoLink/LogoLink.tsx b/src/components/LogoLink/LogoLink.tsx
@@ -3,6 +3,7 @@ import { assetUrl } from "../../config";
 import Link from "../Link/Link";
 import "./logo-link.scss";
 import { useTranslation } from "react-i18next";
+import ButtonFlag from "../ButtonFlag/ButtonFlag";
 
 export default function LogoLink({ small = false }: { small?: boolean }) {
   const { t } = useTranslation();
@@ -20,7 +21,10 @@ export default function LogoLink({ small = false }: { small?: boolean }) {
 
           alt={`${t('radarName')}`}
         />
-        <span className="logo-link__text">{t('radarName')}</span>
+        <div className="button-flag__logo"><ButtonFlag /></div>
+        {small &&
+          <span className="logo-link__text">{t('radarName')}</span>
+        }        
       </span>
     </Link>
   );

diff --git a/src/components/LogoLink/logo-link.scss b/src/components/LogoLink/logo-link.scss
@@ -42,6 +42,10 @@
       transform: scale(0.55);
     }
 
+    .button-flag__logo {
+      display: none;
+    }
+
     .logo-link__text {
       opacity: 0.8;
     }

diff --git a/src/styles/components/page.scss b/src/styles/components/page.scss
@@ -19,10 +19,30 @@
       margin: 0;
     }
 
-    @media (max-width: $until-lg) {
+    @media (min-width: $until-sm) {
+      .button-flag__logo {
+        display: none;
+      }
+    }
+
+    @media (max-width: $until-sm) {
       .nav {
         display: none;
       }
+
+      .button-flag {
+        display: inline-flex;
+        height: 25px;
+        margin-right: 5px;
+      }
+
+      .button-flag:hover {
+        opacity: 1;
+      }
+
+      .logo-link__text {
+        display: none;
+      }
     }
   }
 
@@ -33,5 +53,9 @@
   &__footer {
     margin-top: 5px;
     flex: 0 0 auto;
+
+    .button-flag {
+      display: none;      
+    }
   }
 }