Configure header with new prop for default selected tab

Author: bensohh

apps/frontend/src/app/page.tsx

@@ -479,7 +479,7 @@ export default function Home() {
     <div>
       {contextHolder}
       <Layout className="layout">
-        <Header />
+        <Header selectedKey={["0"]} />
         <Content className="content">
           <div className="content-card">
             <div className="content-row-1">

apps/frontend/src/app/question/[id]/page.tsx

@@ -76,7 +76,7 @@ export default function Home() {
     <div>
       {contextHolder}
       <Layout className="code-editor-layout">
-        <Header />
+        <Header selectedKey={undefined} />
         <Content className="code-editor-content">
           <Row className="entire-page">
             <Col className="col-boxes" span={7}>

apps/frontend/src/components/Header/header.tsx

@@ -13,7 +13,10 @@ import "./styles.scss";
 import DropdownButton from "antd/es/dropdown/dropdown-button";
 import { LogoutOutlined, UserOutlined } from "@ant-design/icons";
 
-const Header = (): JSX.Element => {
+interface HeaderProps {
+  selectedKey: string[] | undefined;
+}
+const Header = (props: HeaderProps): JSX.Element => {
   const { push } = useRouter();
   // Stores the details for the header buttons
   const items = [
@@ -67,7 +70,7 @@ const Header = (): JSX.Element => {
       {/* Left Menu Pages Component */}
       <Menu
         mode="horizontal"
-        defaultSelectedKeys={["0"]}
+        defaultSelectedKeys={props.selectedKey}
         items={items}
         style={{ flex: 1, minWidth: 0 }}
         onClick={(info) => {