From accf34d98bec5f7e404d60e01d9c6e5d14817f91 Mon Sep 17 00:00:00 2001
From: Pooria Setayesh <pooriaset@yahoo.com>
Date: Fri, 10 May 2024 23:52:49 +0330
Subject: [PATCH 1/2] feat: complete login or register button when user is not 
 logged in

---
 src/app/[locale]/(main)/layout.tsx            |  1 +
 .../Header/components/TopSection.tsx          | 50 ++++++++++++-------
 src/data/i18n/en.json                         |  6 ++-
 src/data/i18n/fa.json                         |  6 ++-
 4 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/src/app/[locale]/(main)/layout.tsx b/src/app/[locale]/(main)/layout.tsx
index 7583eb3..e0b9382 100644
--- a/src/app/[locale]/(main)/layout.tsx
+++ b/src/app/[locale]/(main)/layout.tsx
@@ -56,6 +56,7 @@ const MainLayout: FC<MainLayoutProps> = async ({ children }) => {
       <Box
         sx={{
           pb: { xs: '56px', md: 0 },
+          minHeight: '70vh',
         }}
       >
         {children}
diff --git a/src/components/Header/components/TopSection.tsx b/src/components/Header/components/TopSection.tsx
index a484e75..9fa6a63 100644
--- a/src/components/Header/components/TopSection.tsx
+++ b/src/components/Header/components/TopSection.tsx
@@ -1,14 +1,14 @@
 import Logo from '@/components/common/Logo';
 import useCustomSearchParams from '@/hooks/useCustomSearchParams';
 import useInputFiller from '@/hooks/useInputFiller';
+import { Link as NextLink } from '@/navigation';
 import {
   AccountCircleOutlined,
   SearchOutlined,
   ShoppingBasketOutlined,
 } from '@mui/icons-material';
-import { Divider, Link, TextField } from '@mui/material';
+import { Button, Link, Stack, TextField } from '@mui/material';
 import Badge from '@mui/material/Badge';
-import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
@@ -16,7 +16,6 @@ import Toolbar from '@mui/material/Toolbar';
 import { alpha, styled } from '@mui/material/styles';
 import { useTranslations } from 'next-intl';
 import { DOMAttributes, FC, useState } from 'react';
-import { Link as NextLink } from '@/navigation';
 
 const Form = styled('form')(({ theme }) => ({
   position: 'relative',
@@ -54,6 +53,7 @@ const TopSection: FC = () => {
   };
 
   const menuId = 'primary-search-account-menu';
+  const isLoggedIn = true;
 
   return (
     <>
@@ -88,8 +88,35 @@ const TopSection: FC = () => {
             }}
           />
         </Form>
-        <Box sx={{ flexGrow: 1 }} />
-        <Box sx={{ display: 'flex' }}>
+
+        <Stack spacing={1} direction="row" alignItems="center" color="black">
+          {isLoggedIn ? (
+            <Button
+              variant="outlined"
+              color="inherit"
+              sx={{
+                minWidth: 150,
+              }}
+            >
+              <Stack direction="row" spacing={1}>
+                <span>{t('header.auth.login')}</span>
+                <span>|</span>
+                <span>{t('header.auth.register')}</span>
+              </Stack>
+            </Button>
+          ) : (
+            <IconButton
+              size="large"
+              edge="end"
+              aria-label="account of current user"
+              aria-controls={menuId}
+              aria-haspopup="true"
+              onClick={handleProfileMenuOpen}
+            >
+              <AccountCircleOutlined />
+            </IconButton>
+          )}
+
           <NextLink href="/cart">
             <IconButton size="large" aria-label="show 3 cart items">
               <Badge
@@ -104,18 +131,7 @@ const TopSection: FC = () => {
               </Badge>
             </IconButton>
           </NextLink>
-          <Divider orientation="vertical" variant="middle" flexItem />
-          <IconButton
-            size="large"
-            edge="end"
-            aria-label="account of current user"
-            aria-controls={menuId}
-            aria-haspopup="true"
-            onClick={handleProfileMenuOpen}
-          >
-            <AccountCircleOutlined />
-          </IconButton>
-        </Box>
+        </Stack>
       </Toolbar>
       <Menu
         anchorEl={anchorEl}
diff --git a/src/data/i18n/en.json b/src/data/i18n/en.json
index 52fe809..842ec96 100644
--- a/src/data/i18n/en.json
+++ b/src/data/i18n/en.json
@@ -9,6 +9,10 @@
     "all": "All"
   },
   "header": {
+    "auth": {
+      "login": "Login",
+      "register": "Register"
+    },
     "navigation": {
       "products": "Products",
       "categories": "Categories",
@@ -108,4 +112,4 @@
   "fields": {
     "size": "Size"
   }
-}
+}
\ No newline at end of file
diff --git a/src/data/i18n/fa.json b/src/data/i18n/fa.json
index 3787b75..79d6510 100644
--- a/src/data/i18n/fa.json
+++ b/src/data/i18n/fa.json
@@ -9,6 +9,10 @@
     "all": "همه"
   },
   "header": {
+    "auth": {
+      "register": "ثبت نام",
+      "login": "ورود"
+    },
     "navigation": {
       "products": "محصولات",
       "categories": "دسته‌بندی‌ها",
@@ -108,4 +112,4 @@
   "fields": {
     "size": "سایز"
   }
-}
+}
\ No newline at end of file

From 37dad13801bc6ba04f68de1c97fbdbe8c7bd4dbe Mon Sep 17 00:00:00 2001
From: Pooria Setayesh <pooriaset@yahoo.com>
Date: Fri, 10 May 2024 23:54:22 +0330
Subject: [PATCH 2/2] chore: add link of login page

---
 src/components/Header/components/TopSection.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/Header/components/TopSection.tsx b/src/components/Header/components/TopSection.tsx
index 9fa6a63..5dac7c2 100644
--- a/src/components/Header/components/TopSection.tsx
+++ b/src/components/Header/components/TopSection.tsx
@@ -92,6 +92,8 @@ const TopSection: FC = () => {
         <Stack spacing={1} direction="row" alignItems="center" color="black">
           {isLoggedIn ? (
             <Button
+              component={Link}
+              href="/login"
               variant="outlined"
               color="inherit"
               sx={{