style: 🎨 make header responsive

okaziya · Jan 15, 2025 · 66d3b01 · 66d3b01
1 parent 207f31b
commit 66d3b01
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 11 deletions.
diff --git a/components/Button/Button.styles.ts b/components/Button/Button.styles.ts
@@ -1,6 +1,7 @@
-"use client"
+"use client";
 
 import styled from "styled-components";
+import { media } from "../../styles/media";
 
 export const PrimaryButton = styled.button`
   background-color: ${({ theme }) => theme.colors.brand};
@@ -16,4 +17,10 @@ export const PrimaryButton = styled.button`
     background-color: rgba(107, 107, 241, 1);
     box-shadow: 5px 5px 20px rgba(84, 84, 212, 0.75);
   }
+
+  ${media.mobile`
+    white-space: nowrap;
+    padding: 12px 16px;
+    max-height: 48px;
+  `}
 `;
diff --git a/components/Header/Header.styles.tsx b/components/Header/Header.styles.tsx
@@ -1,8 +1,27 @@
 "use client";
 
 import styled from "styled-components";
+import { media } from "../../styles/media";
 
 export const StyledHeader = styled.header`
   max-width: ${({ theme }) => theme.breakpoints.desktop};
   height: 60px;
+
+  ${media.mobile`
+    height: 76px;
+  `}
+`;
+
+export const ImageWrapper = styled.div`
+  width: 100%;
+  max-width: 80px;
+  margin-bottom: 12px;
+  img {
+    width: 100%;
+    height: auto;
+  }
+
+  ${media.mobile`
+      max-width: 56px; 
+  `}
 `;
diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx
@@ -3,7 +3,7 @@ import { getTranslations } from "../../lib/getTranslations";
 import { Locale } from "../../types";
 import Image from "next/image";
 import Button from "../Button";
-import { StyledHeader } from "./Header.styles";
+import { ImageWrapper, StyledHeader } from "./Header.styles";
 import { CONTACT_INFO } from "../../config";
 import { getImagePath } from "../../utils/imagePath";
 
@@ -13,14 +13,16 @@ export default function Header({ locale }: { locale: Locale }) {
   return (
     <StyledHeader className="mx-auto d-flex justify-content-between">
       <div className="d-flex flex-column justify-content-between">
-        <Image
-          src={getImagePath("/glasses.png")}
-          alt={translations.images.logoAlt}
-          width={80}
-          height={16}
-          priority
-          unoptimized
-        />
+        <ImageWrapper>
+          <Image
+            src={getImagePath("/glasses.png")}
+            alt={translations.images.logoAlt}
+            width={80}
+            height={16}
+            priority
+            unoptimized
+          />
+        </ImageWrapper>
         <h3 className="m-0">{CONTACT_INFO.name}</h3>
       </div>
       <div className="d-flex">

diff --git a/components/Header/LanguageSwitcher.styles.tsx b/components/Header/LanguageSwitcher.styles.tsx
@@ -3,6 +3,7 @@
 import Link from "next/link";
 
 import styled from "styled-components";
+import { media } from "../../styles/media";
 
 export const StyledLanguageSwitcher = styled(Link)`
   background-color: transparent;
@@ -17,4 +18,9 @@ export const StyledLanguageSwitcher = styled(Link)`
       transform: scale(1.1);
     }
   }
+
+  ${media.mobile`
+     width: 48px;
+     height: 48px;
+  `}
 `;
diff --git a/components/Header/LanguageSwitcher.tsx b/components/Header/LanguageSwitcher.tsx
@@ -10,7 +10,7 @@ export default function LanguageSwitcher({ locale }: { locale: Locale }) {
   return (
     <StyledLanguageSwitcher
       href={`/${nextLocale}`}
-      className="language-switcher mx-1 align-items-center btn btn-light d-flex p-3 border-0"
+      className="language-switcher mx-1 align-items-center btn btn-light d-flex p-2 p-lg-3 border-0"
     >
       <Image
         src={getImagePath(flagSrc)}