🎨 styles: add logo to header

:%s

src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx

@@ -5,6 +5,7 @@ import InputSearch from 'src/components/common/InputSearch/InputSearch'
 import MenuDropdown from 'src/components/common/MenuDropdown/MenuDropdown'
 import { IconBuy, IconHeart, IconHistory, IconUser } from 'src/components/icons'
 import { ACCOUNT_TAB, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
+import Logo from '../../../Logo/Logo'
 import s from './HeaderMenu.module.scss'
 
 interface Props {
@@ -39,7 +40,7 @@ const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo }: Props) => {
         <section className={classNames({ [s.headerMenu]: true, [s.full]: isFull })}>
             <div className={s.left}>
                 <div className={s.top}>
-                    <div>Online Grocery</div>
+                    <Logo/>
                     <button className={s.iconCart}>
                         <IconBuy />
                     </button>

src/components/common/Layout/Layout.tsx

@@ -27,9 +27,9 @@ const Layout: FC<Props> = ({ children }) => {
     return (
         <CommerceProvider locale={locale}>
             <div className={s.mainLayout}>
-                <button onClick={toggle}>toggle card: {visibleCartDrawer.toString()}</button>
                 <Header />
                 <main >{children}</main>
+                <button onClick={toggle}>toggle card: {visibleCartDrawer.toString()}</button>
                 <CartDrawer
                     visible={visibleCartDrawer}
                     onClose={closeCartDrawer} />

src/components/common/Logo/Logo.module.scss

@@ -1,7 +1,7 @@
-@import '../../../styles/utilities';
+@import "../../../styles/utilities";
 
 .logo {
-    display: flex;
+    @apply flex justify-center items-center;
     .eclipse {
         width: 3.2rem;
         height: 3.2rem;
@@ -10,9 +10,9 @@
         margin-right: 1.2rem;
     }
     .content {
-        @apply font-logo;
+        @apply font-logo font-bold;
         font-size: 16px;
         line-height: 32px;
         letter-spacing: -0.02em;
     }
-}
+}

src/components/common/Logo/Logo.tsx

@@ -1,14 +1,18 @@
 import s from './Logo.module.scss'
+import Link from 'next/link'
+import { ROUTE } from 'src/utils/constanst.utils'
 
 const Logo = () => {
-    return(
-        <div className={s.logo}>
-            <div className={s.eclipse}>
-            </div>
-            <div className={s.content}>
-                ONLINE GROCERY
-            </div>
-        </div>
+    return (
+        <Link href={ROUTE.HOME}>
+            <a className={s.logo}>
+                <div className={s.eclipse}>
+                </div>
+                <div className={s.content}>
+                    ONLINE GROCERY
+                </div>
+            </a>
+        </Link>
     )
 }