Add page tabs

src/components/layout/personal-activity.tab.tsx

@@ -0,0 +1,9 @@
+import { Stack, Typography } from "@mui/joy";
+
+export const PersonalActivityTab = () => {
+  return (
+    <Stack>
+      <Typography>Activity</Typography>
+    </Stack>
+  );
+};

src/components/layout/personal-goals.tab.tsx

@@ -0,0 +1,9 @@
+import { Stack, Typography } from "@mui/joy";
+
+export const PersonalGoalsTab = () => {
+  return (
+    <Stack>
+      <Typography>Goals</Typography>
+    </Stack>
+  );
+};

src/components/layout/personal-manual.tab.tsx

@@ -0,0 +1,9 @@
+import { Stack, Typography } from "@mui/joy";
+
+export const PersonalManualTab = () => {
+  return (
+    <Stack>
+      <Typography>Manual</Typography>
+    </Stack>
+  );
+};

src/components/layout/personal-profile.tab.tsx

@@ -0,0 +1,9 @@
+import { Stack, Typography } from "@mui/joy";
+
+export const PersonalProfileTab = () => {
+  return (
+    <Stack>
+      <Typography>Profile</Typography>
+    </Stack>
+  );
+};

src/components/layout/team-activity.tab.tsx

@@ -0,0 +1,9 @@
+import { Stack, Typography } from "@mui/joy";
+
+export const TeamActivityTab = () => {
+  return (
+    <Stack>
+      <Typography>Activity</Typography>
+    </Stack>
+  );
+};

src/components/layout/team-overview.tab.tsx

@@ -0,0 +1,9 @@
+import { Stack, Typography } from "@mui/joy";
+
+export const TeamOverviewTab = () => {
+  return (
+    <Stack>
+      <Typography>Overview</Typography>
+    </Stack>
+  );
+};

src/components/navigation/navbar.tsx

@@ -29,7 +29,7 @@ export const Navbar = ({ hasSubvisualIcon }: NavbarProps) => {
         </JoyLink>
       )}
       <Stack direction="row" alignItems="center" gap={1}>
-        <IconButton size="sm">
+        <IconButton size="sm" disabled>
           <NotificationsOutlined sx={{ fontSize: 18 }} />
         </IconButton>
 

src/components/navigation/sidebar.tsx

@@ -13,19 +13,22 @@ const sidebarItems = [
     name: "Personal",
     path: "/personal",
     icon: <PersonalOutlined sx={{ ...sidebarItemStyle, ...sidebarItemColor(false) }} />,
-    iconSelected: <PersonalFilled sx={{ ...sidebarItemStyle, ...sidebarItemColor(true) }} />
+    iconSelected: <PersonalFilled sx={{ ...sidebarItemStyle, ...sidebarItemColor(true) }} />,
+    disabled: false
   },
   {
     name: "Team",
     path: "/team",
     icon: <TeamOutlined sx={{ ...sidebarItemStyle, ...sidebarItemColor(false) }} />,
-    iconSelected: <TeamFilled sx={{ ...sidebarItemStyle, ...sidebarItemColor(true) }} />
+    iconSelected: <TeamFilled sx={{ ...sidebarItemStyle, ...sidebarItemColor(true) }} />,
+    disabled: false
   },
   {
     name: "Learn",
     path: "/learn",
     icon: <LearnOutlined sx={{ ...sidebarItemStyle, ...sidebarItemColor(false) }} />,
-    iconSelected: <LearnFilled sx={{ ...sidebarItemStyle, ...sidebarItemColor(true) }} />
+    iconSelected: <LearnFilled sx={{ ...sidebarItemStyle, ...sidebarItemColor(true) }} />,
+    disabled: true
   }
 ] as const;
 
@@ -47,6 +50,7 @@ export const Sidebar = () => {
                 <JoyLink
                   key={item.name}
                   underline="none"
+                  disabled={item.disabled}
                   component={ReactLink}
                   to={item.path}
                   width="100%"

src/components/layout/card-top-strengths.tsx → src/components/shared/card-top-strengths.tsx

@@ -156,7 +156,7 @@ export const CardTopStrengths = () => {
         ))}
       </Grid>
 
-      <Button variant="outlined" size="sm">
+      <Button variant="outlined" size="sm" disabled>
         See full report
       </Button>
     </Stack>

src/components/shared/tabs-container.tsx

@@ -0,0 +1,41 @@
+import { Tab, TabList, TabPanel, Tabs } from "@mui/joy";
+import { ReactNode } from "react";
+
+type TabItem = {
+  tab: string;
+  panel: ReactNode;
+};
+
+type TabsContainerProps = {
+  tabs: TabItem[];
+  hasPadding?: boolean;
+};
+
+export const TabsContainer = ({ tabs, hasPadding }: TabsContainerProps) => {
+  return (
+    <Tabs defaultValue={0}>
+      <TabList sx={{ pl: hasPadding ? 3 : 0, gap: 3 }}>
+        {tabs.map((obj, index) => (
+          <Tab
+            key={index}
+            value={index}
+            slotProps={{
+              root: {
+                sx: {
+                  p: 0
+                }
+              }
+            }}
+          >
+            {obj.tab}
+          </Tab>
+        ))}
+      </TabList>
+      {tabs.map((obj, index) => (
+        <TabPanel key={index} value={index} sx={{ px: hasPadding ? 3 : 0 }}>
+          {obj.panel}
+        </TabPanel>
+      ))}
+    </Tabs>
+  );
+};

src/pages/avatar-create.page.tsx

@@ -3,7 +3,7 @@ import { useContext, useState } from "react";
 import { MockAvatar } from "../api/mock-avatar";
 import { ArrowRightOutlined } from "../assets/icons/arrow-right";
 import { AvatarLoading } from "../components/layout/avatar-loading";
-import { Layout } from "../components/shared/containers";
+import { Layout } from "../components/shared/layout";
 import { AuthContext } from "../contexts/auth.context";
 
 export const AvatarCreatePage = () => {

src/pages/avatar-results.page.tsx

@@ -2,8 +2,8 @@ import { Button, IconButton, Stack, Typography } from "@mui/joy";
 import { Link } from "react-router-dom";
 import { MockAvatar } from "../api/mock-avatar";
 import { ArrowRotateOutlined } from "../assets/icons/arrow-rotate";
-import { CardTopStrengths } from "../components/layout/card-top-strengths";
-import { Layout } from "../components/shared/containers";
+import { CardTopStrengths } from "../components/shared/card-top-strengths";
+import { Layout } from "../components/shared/layout";
 
 export const AvatarResultsPage = () => {
   return (
@@ -23,7 +23,7 @@ export const AvatarResultsPage = () => {
 
             <Stack alignItems="center" gap={4}>
               <MockAvatar sx={{ fontSize: 280 }} />
-              <IconButton>
+              <IconButton disabled>
                 <ArrowRotateOutlined sx={{ fontSize: 16 }} />
               </IconButton>
               <Button component={Link} to="/personal">

src/pages/learn.page.tsx

@@ -1,5 +1,5 @@
 import { Typography } from "@mui/joy";
-import { Layout } from "../components/shared/containers";
+import { Layout } from "../components/shared/layout";
 
 export const LearnPage = () => {
   return (

src/pages/personal.page.tsx

@@ -1,10 +1,22 @@
-import { Typography } from "@mui/joy";
-import { Layout } from "../components/shared/containers";
+import { PersonalActivityTab } from "../components/layout/personal-activity.tab";
+import { PersonalGoalsTab } from "../components/layout/personal-goals.tab";
+import { PersonalManualTab } from "../components/layout/personal-manual.tab";
+import { PersonalProfileTab } from "../components/layout/personal-profile.tab";
+import { Layout } from "../components/shared/layout";
+import { TabsContainer } from "../components/shared/tabs-container";
 
 export const PersonalPage = () => {
   return (
     <Layout hasSideBar>
-      <Typography>Personal page</Typography>
+      <TabsContainer
+        hasPadding
+        tabs={[
+          { tab: "My profile", panel: <PersonalProfileTab /> },
+          { tab: "Manual of me", panel: <PersonalManualTab /> },
+          { tab: "Personal goals", panel: <PersonalGoalsTab /> },
+          { tab: "Activity", panel: <PersonalActivityTab /> }
+        ]}
+      />
     </Layout>
   );
 };

src/pages/team.page.tsx

@@ -1,10 +1,18 @@
-import { Typography } from "@mui/joy";
-import { Layout } from "../components/shared/containers";
+import { TeamActivityTab } from "../components/layout/team-activity.tab";
+import { TeamOverviewTab } from "../components/layout/team-overview.tab";
+import { Layout } from "../components/shared/layout";
+import { TabsContainer } from "../components/shared/tabs-container";
 
 export const TeamPage = () => {
   return (
     <Layout hasSideBar>
-      <Typography>Team page</Typography>
+      <TabsContainer
+        hasPadding
+        tabs={[
+          { tab: "Team overview", panel: <TeamOverviewTab /> },
+          { tab: "Activity", panel: <TeamActivityTab /> }
+        ]}
+      />
     </Layout>
   );
 };

src/router/app.tsx

@@ -3,7 +3,6 @@ import { Navigate, Route, Routes } from "react-router-dom";
 import { AuthContext } from "../contexts/auth.context";
 import { AvatarCreatePage } from "../pages/avatar-create.page";
 import { AvatarResultsPage } from "../pages/avatar-results.page";
-import { LearnPage } from "../pages/learn.page";
 import { LoadingPage } from "../pages/loading.page";
 import { PersonalPage } from "../pages/personal.page";
 import { SignupPage } from "../pages/signup.page";
@@ -35,7 +34,7 @@ export const App = () => {
                   <Route path="/avatar-results" element={<AvatarResultsPage />} />
                   <Route path="/personal" element={<PersonalPage />} />
                   <Route path="/team" element={<TeamPage />} />
-                  <Route path="/learn" element={<LearnPage />} />
+                  {/*  <Route path="/learn" element={<LearnPage />} /> */}
                   <Route path="*" element={<Navigate to="/avatar-results" replace />} />
                 </>
               )}

src/theme.ts

@@ -81,6 +81,34 @@ export const theme = extendTheme({
           }
         })
       }
+    },
+    JoyTabs: {
+      styleOverrides: {
+        root: () => ({
+          backgroundColor: "transparent",
+          width: "100%"
+        })
+      }
+    },
+    JoyTab: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          backgroundColor: "transparent",
+          "&.Mui-selected": {
+            backgroundColor: "transparent",
+            color: theme.palette.subvisual.primary
+          },
+          "&::after": {
+            color: theme.palette.subvisual.primary
+          },
+          "&.MuiTab-root": {
+            "&:hover": {
+              backgroundColor: "transparent",
+              color: theme.palette.subvisual.primary
+            }
+          }
+        })
+      }
     }
   }
 });