Add link to about page in header

Author: BohdanUlich

app/about/page.tsx

@@ -83,14 +83,7 @@ export default function AboutPage() {
           Home page with categories:
         </Typography>
 
-        <Box
-          height={560}
-          width={1}
-          position="relative"
-          border={1}
-          borderRadius={2}
-          overflow="hidden"
-        >
+        <Box height={560} width={1} position="relative" overflow="hidden">
           <Image
             src="/about/categories.png"
             alt="Categories example"
@@ -105,11 +98,9 @@ export default function AboutPage() {
         </Typography>
 
         <Box
-          height={550}
+          height={560}
           width={1}
           position="relative"
-          border={1}
-          borderRadius={2}
           mt={2}
           overflow="hidden"
         >

components/Header.tsx

@@ -17,12 +17,15 @@ import {
 } from "@mui/material";
 import { useGetUser } from "@/hooks";
 import { useColorMode } from "@/providers";
+import { usePathname } from "next/navigation";
+import { ABOUT_PAGE_ROUTE } from "@/types";
 
 export const Header = () => {
   const { userName, userImage, userId, userEmail } = useGetUser();
   const [anchorElUser, setAnchorElUser] = useState<null | HTMLElement>(null);
-
   const { theme, toggleTheme } = useColorMode();
+  const pathName = usePathname();
+  const isAboutPage = pathName === ABOUT_PAGE_ROUTE;
 
   const onOpenUserMenu = (event: MouseEvent<HTMLElement>) => {
     setAnchorElUser(event.currentTarget);
@@ -100,7 +103,7 @@ export const Header = () => {
                   <Typography
                     component={Link}
                     width={1}
-                    href="/about"
+                    href={ABOUT_PAGE_ROUTE}
                     color="primary"
                   >
                     About
@@ -115,6 +118,19 @@ export const Header = () => {
               </Menu>
             </Box>
           )}
+
+          {!userId && !isAboutPage && (
+            <Box sx={{ flexGrow: 0 }}>
+              <Typography
+                component={Link}
+                width={1}
+                href={ABOUT_PAGE_ROUTE}
+                color="primary"
+              >
+                About
+              </Typography>
+            </Box>
+          )}
         </Toolbar>
       </Container>
     </AppBar>

types/constants.ts

@@ -17,3 +17,6 @@ export const LIGHT_THEME = "light";
 export const DARK_THEME = "dark";
 export const LIGHT_TEXT = "light-text";
 export const DARK_TEXT = "dark-text";
+
+// Routes
+export const ABOUT_PAGE_ROUTE = "/about";