added footer to task details page

src/components/Header/Header.module.scss

@@ -0,0 +1,38 @@
+.header {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    padding-top: 0.625rem;
+}
+
+.link {
+    padding: 0.625rem;
+    text-decoration: none;
+    font-weight: bold;
+    color: #041484;
+    cursor: pointer;
+    background: none;
+    border: none;
+    position: relative;
+
+    &::after {
+        content: '';
+        position: absolute;
+        height: 1rem;
+        width: 2px;
+        right: 0;
+        background-color: #00000077;
+    }
+}
+
+// Hide | for the last elements
+.header a:last-child {
+    .link::after {
+        display: none;
+    }
+}
+
+.active {
+    color: #e30464;
+}

src/components/Header/index.tsx

@@ -0,0 +1,54 @@
+import { FC } from 'react';
+import styles from './Header.module.scss';
+import Link from 'next/link';
+import { HeaderLinkProps } from '@/interfaces/HeaderItem.type';
+import { useRouter } from 'next/router';
+import {
+    devHeaderCategories,
+    headerCategories,
+} from '@/constants/header-categories';
+
+export const HeaderLink: FC<HeaderLinkProps> = ({ title, link, isActive }) => {
+    const linkClasses = `${styles.link} ${isActive ? styles.active : ''}`;
+
+    return (
+        <Link href={link} passHref>
+            <button type="button" tabIndex={0} className={linkClasses}>
+                {title}
+            </button>
+        </Link>
+    );
+};
+
+export const Header = () => {
+    const router = useRouter();
+
+    // Dev feature toggle
+    const { query } = router;
+    const dev = !!query.dev;
+
+    return (
+        <div className={styles.header}>
+            {headerCategories.map(({ title, refURL, pathName }, index) => (
+                <HeaderLink
+                    key={index}
+                    title={title}
+                    link={refURL}
+                    isActive={router.pathname === pathName}
+                />
+            ))}
+
+            {dev &&
+                devHeaderCategories.map(
+                    ({ title, refURL, pathName }, index) => (
+                        <HeaderLink
+                            key={index}
+                            title={title}
+                            link={refURL}
+                            isActive={router.pathname === pathName}
+                        />
+                    )
+                )}
+        </div>
+    );
+};

src/components/Layout/Layout.module.scss

@@ -6,32 +6,10 @@
     min-height: 100%;
 }
 
-.header {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-wrap: wrap;
-    padding-top: 10px;
-}
-
 .wrapper {
     margin: 0 2em;
 }
 
-.link {
-    padding: 10px;
-    text-decoration: none;
-    font-weight: bold;
-    color: #041484;
-    cursor: pointer;
-    background: none;
-    border: none;
-}
-
-.active {
-    color: #e30464;
-}
-
 @media (max-width: 970px) {
     .navbar {
         display: flex;

src/components/Layout/index.tsx

@@ -1,73 +1,25 @@
-import { FC, ReactNode, Fragment } from 'react';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
+import { FC, ReactNode } from 'react';
 import Footer from '@/components/footer';
 import styles from '@/components/Layout/Layout.module.scss';
 import NavBar from '@/components/navBar';
-import { navBarContentMock, featureFlags } from '@/constants/navbar-Content';
 import { useGetUserQuery } from '@/app/services/userApi';
 import { Loader } from '../tasks/card/Loader';
+import { Header } from '@/components/Header';
 
 interface Props {
     children?: ReactNode;
+    hideHeader?: boolean;
 }
 
-const navBarContent = (title: string, refUrl: string, isActive = false) => {
-    const linkClasses = `${styles.link} ${isActive ? styles.active : ''}`;
-
-    return (
-        <Link href={refUrl} passHref>
-            <button type="button" tabIndex={0} className={linkClasses}>
-                {title}
-            </button>
-        </Link>
-    );
-};
-
-const Layout: FC<Props> = ({ children }) => {
-    const router = useRouter();
+const Layout: FC<Props> = ({ hideHeader, children }) => {
     const { isLoading } = useGetUserQuery();
 
-    // Dev feature toggle
-    const { query } = router;
-    const dev = !!query.dev;
-
     return (
         <div className={styles.layout}>
             <NavBar />
             {isLoading && <Loader />}
             <div className={styles.wrapper}>
-                <div className={styles.header}>
-                    {navBarContentMock.map((element, index) => (
-                        <Fragment key={index}>
-                            {navBarContent(
-                                element.title,
-                                element.refURL,
-                                router.pathname === element.pathName
-                            )}
-                            {element.pipeSymbol}
-                        </Fragment>
-                    ))}
-                    {dev && (
-                        <>
-                            {featureFlags.map((element, index) => {
-                                return (
-                                    <>
-                                        {element.pipeSymbol}
-                                        <Fragment key={index}>
-                                            {navBarContent(
-                                                element.title,
-                                                element.refURL,
-                                                router.pathname ===
-                                                    element.pathName
-                                            )}
-                                        </Fragment>
-                                    </>
-                                );
-                            })}
-                        </>
-                    )}
-                </div>
+                {!hideHeader ? <Header /> : null}
                 {children}
             </div>
             <Footer />

src/components/taskDetails/index.tsx

@@ -5,9 +5,7 @@ import React, {
     useContext,
     useRef,
     useState,
-    ChangeEventHandler,
 } from 'react';
-import NavBar from '@/components/navBar/index';
 import TaskContainer from './TaskContainer';
 import Details from './Details';
 import { isUserAuthorizedContext } from '@/context/isUserAuthorized';
@@ -22,18 +20,13 @@ import {
     useGetTaskDetailsQuery,
     useUpdateTaskDetailsMutation,
 } from '@/app/services/taskDetailsApi';
-import { taskDetailsDataType } from '@/interfaces/taskDetails.type';
+import {
+    ButtonProps,
+    TextAreaProps,
+    taskDetailsDataType,
+} from '@/interfaces/taskDetails.type';
+import Layout from '@/components/Layout';
 
-type ButtonProps = {
-    buttonName: string;
-    clickHandler: (value: any) => void;
-    value?: boolean;
-};
-type TextAreaProps = {
-    name: string;
-    value: string;
-    onChange: ChangeEventHandler;
-};
 function Button(props: ButtonProps) {
     const { buttonName, clickHandler, value } = props;
     return (
@@ -165,8 +158,7 @@ const TaskDetails: FC<Props> = ({ taskID }) => {
     };
     const shouldRenderParentContainer = () => !isLoading && !isError && data;
     return (
-        <>
-            <NavBar />
+        <Layout hideHeader={true}>
             {renderLoadingComponent()}
             {shouldRenderParentContainer() && (
                 <div className={classNames.parentContainer}>
@@ -333,7 +325,7 @@ const TaskDetails: FC<Props> = ({ taskID }) => {
                     </section>
                 </div>
             )}
-        </>
+        </Layout>
     );
 };
 

src/constants/navbar-Content.ts → src/constants/header-categories.ts

@@ -1,53 +1,45 @@
-export const navBarContentMock = [
+export const headerCategories = [
     {
         title: 'Tasks',
         refURL: '/',
         pathName: '/',
-        pipeSymbol: '|',
     },
     {
         title: 'Issues',
         refURL: '/issues',
         pathName: '/issues',
-        pipeSymbol: '|',
     },
     {
         title: 'Mine',
         refURL: '/mine',
         pathName: '/mine',
-        pipeSymbol: '|',
     },
     {
         title: 'Open PRs',
         refURL: '/openPRs',
         pathName: '/openPRs',
-        pipeSymbol: '|',
     },
     {
         title: 'Stale PRs',
         refURL: '/stale-pr',
         pathName: '/stale-pr',
-        pipeSymbol: '|',
     },
     {
         title: 'Idle Users',
         refURL: '/idle-users',
         pathName: '/idle-users',
-        pipeSymbol: '',
     },
 ];
 
-export const featureFlags = [
+export const devHeaderCategories = [
     {
         title: 'Standup',
         refURL: '/standup/?dev=true',
         pathName: '/standup',
-        pipeSymbol: '|',
     },
     {
         title: 'Availability Panel',
         refURL: '/availability-panel',
-        pathName: '',
-        pipeSymbol: '|',
+        pathName: '/availability-panel',
     },
 ];

src/interfaces/HeaderItem.type.ts

@@ -0,0 +1,5 @@
+export interface HeaderLinkProps {
+    title: string;
+    link: string;
+    isActive: boolean;
+}

src/interfaces/taskDetails.type.ts

@@ -1,3 +1,4 @@
+import { ChangeEventHandler } from 'react';
 export type taskDetailsDataType = {
     message?: string;
     taskData?: {
@@ -16,3 +17,14 @@ export type taskDetailsDataType = {
         type: string;
     };
 };
+
+export type ButtonProps = {
+    buttonName: string;
+    clickHandler: (value: any) => void;
+    value?: boolean;
+};
+export type TextAreaProps = {
+    name: string;
+    value: string;
+    onChange: ChangeEventHandler;
+};