Update select/code.js

Signed-off-by: Vivek Vishal <[email protected]>

Author: Vivek Vishal

src/sections/Projects/Sistent/components/select/code.js

@@ -15,7 +15,10 @@ import {
   OutlinedInput,
   Select,
 } from "@mui/material";
-import { Header, SectionNav } from ".";
+
+import { useLocation } from "@reach/router";
+import { navigate } from "gatsby";
+import TabButton from "../../../../../reusecore/Button";
 
 const codes = {
   "variant-outlined": `<Select>
@@ -152,11 +155,45 @@ const SelectCode = () => {
     let agesList = event.target.value;
     setMultipleAges(agesList);
   };
+  const location = useLocation();
   return (
     <SistentLayout title="Select">
       <div className="content">
-        <Header />
-        <SectionNav />
+        <a id="Identity">
+          <h2>Select</h2>
+        </a>
+        <p>
+        Select component is a dropdown menu for selecting an option from a list.
+        </p>
+        <div className="filterBtns">
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/select"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/select")}
+            title="Overview"
+          />
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/select/guidance"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/select/guidance")}
+            title="Guidance"
+          />
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/select/code"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/select/code")}
+            title="Code"
+          />
+        </div>
 
         <div className="main-content">
           <a id="Select variants">