Feature UI revamp Navbar

frontend/layouts/MainAppLayout/ MainAppLayout.jsx

@@ -11,6 +11,7 @@ import Loader from '@/components/Loader';
 
 import ImageURLs from '@/assets/urls';
 
+import SideMenu from './SideMenu';
 import styles from './styles';
 
 import { setLoading } from '@/redux/slices/authSlice';
@@ -53,12 +54,16 @@ const MainAppLayout = (props) => {
 
   const renderApp = () => {
     return (
-      <Grid {...styles.contentGridProps(extraContentProps, isToolPage)}>
+      <Grid {...styles.mainGrid}>
         <Grid {...styles.bgGridProps}>
           <Image src={ImageURLs.GridBg} alt="grid_bg" {...styles.bgProps} />
         </Grid>
-
-        <Grid {...styles.childrenWrapProps}>{children}</Grid>
+        <Grid {...styles.navBarContainer}>
+          <SideMenu user={user.data} />
+        </Grid>
+        <Grid {...styles.contentGridProps(extraContentProps, isToolPage)}>
+          <Grid {...styles.childrenWrapProps}>{children}</Grid>
+        </Grid>
       </Grid>
     );
   };

frontend/layouts/MainAppLayout/NavMenu/NavMenu.jsx

@@ -1,8 +1,10 @@
 import { Grid, MenuItem } from '@mui/material';
 import { useRouter } from 'next/router';
 
-import Briefcase from '@/assets/svg/Briefcase.svg';
-import ChatBubble from '@/assets/svg/ChatBubble.svg';
+import DiscoveryIcon from '@/assets/svg/add-block.svg';
+
+import ChatBubble from '@/assets/svg/ChatBubbleV2.svg';
+import HomeIcon from '@/assets/svg/HomeIconOutline.svg';
 
 import ROUTES from '@/constants/routes';
 
@@ -12,16 +14,22 @@ import { chatRegex, homeRegex } from '@/regex/routes';
 
 const PAGES = [
   {
-    name: 'Kai Tools',
+    name: 'Home',
     link: ROUTES.HOME,
-    icon: <Briefcase />,
+    icon: <HomeIcon />,
     id: 'page_1',
   },
   {
-    name: 'Kai Chat',
+    name: 'Discovery',
+    link: ROUTES.CHAT, // TODO change the link to the new discovery page
+    icon: <DiscoveryIcon />,
+    id: 'page_2',
+  },
+  {
+    name: 'Chat',
     link: ROUTES.CHAT,
     icon: <ChatBubble />,
-    id: 'page_2',
+    id: 'page_3',
   },
 ];
 

frontend/layouts/MainAppLayout/NavMenu/styles.js

@@ -3,49 +3,48 @@ const styles = {
     container: true,
     item: true,
     mobileSmall: true,
-    rowGap: { laptop: 2, desktop: 4 },
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    height: '100%',
     px: { laptop: 1, desktop: 1.5, desktopMedium: 2 },
-    flexDirection: 'column',
-    justifyContent: 'flex-start',
-    alignItems: 'flex-start',
   },
   menuItemProps: (isActive) => ({
     sx: {
       py: 0,
       px: { laptop: 1, desktop: 1.5, desktopMedium: 2 },
-      width: '100%',
-      borderRadius: '24px',
+      maxWidth: '160px',
+      maxHeight: '40px',
+      borderRadius: '8px',
+      background: '#24272F',
+      m: 1,
+      border: isActive ? '1px solid #9D74FF' : '1px solid transparent',
       color: (theme) =>
-        isActive
-          ? `${theme.palette.Background.purple}95`
-          : theme.palette.Common.White['100p'],
+        isActive ? `${theme.palette.Background.purple}95` : '#9E94A5',
       path: {
-        fill: (theme) =>
-          isActive
-            ? `${theme.palette.Background.purple}95`
-            : theme.palette.Common.White['100p'],
         stroke: (theme) =>
-          isActive
-            ? `${theme.palette.Background.purple}95`
-            : theme.palette.Common.White['100p'],
+          isActive ? `${theme.palette.Background.purple}95` : '#9E94A5',
       },
       transition: (theme) => theme.transitions.create('all'),
       ':hover': {
-        color: (theme) => theme.palette.Common.White['100p'],
+        color: '#9E94A5',
         background: (theme) => `${theme.palette.Background.purple}30`,
         path: {
-          fill: (theme) => theme.palette.Common.White['100p'],
-          stroke: (theme) => theme.palette.Common.White['100p'],
+          stroke: '#9E94A5',
         },
       },
     },
   }),
   innerMenuGridProps: {
     container: true,
+    item: true,
     mobileSmall: 12,
-    columnGap: 4,
+    columnGap: 1,
+    display: 'flex',
+    flexDirection: 'row',
     justifyContent: 'flex-start',
     alignItems: 'center',
+    bgColor: '#24272F',
   },
   menuIconGridProps: {
     container: true,
@@ -62,7 +61,7 @@ const styles = {
   menuTitleGridProps: {
     container: true,
     item: true,
-    justifyContent: 'flex-start˝',
+    justifyContent: 'flex-start',
     alignItems: 'center',
     mobileSmall: true,
     fontSize: { mobileSmall: '16px', desktop: '18px' },

frontend/layouts/MainAppLayout/SideMenu/SideMenu.jsx

@@ -4,7 +4,7 @@ import { Button, Grid, Typography } from '@mui/material';
 import { signOut } from 'firebase/auth';
 import { useRouter } from 'next/router';
 
-import LargeLogo from '@/assets/svg/MenuLogo.svg';
+import KAIAvatar from '@/assets/svg/KAIAvatar.svg';
 
 import ROUTES from '@/constants/routes';
 
@@ -19,7 +19,7 @@ import { auth } from '@/redux/store';
  *
  * @return {ReactNode} The rendered Side Menu.
  */
-const SideMenu = () => {
+const SideMenu = ({ user }) => {
   const router = useRouter();
 
   const handleSignOutUser = () => {
@@ -30,10 +30,9 @@ const SideMenu = () => {
     return (
       <Grid onClick={() => router.push(ROUTES.HOME)} {...styles.logoGridProps}>
         <Grid {...styles.logoImageGridProps}>
-          <LargeLogo />
+          <KAIAvatar />
         </Grid>
         <Grid {...styles.titleGridProps}>
-          <Typography {...styles.titleProps}>KAI.AI</Typography>
           <Typography {...styles.subtitleProps}>
             AI Teaching Assistant
           </Typography>
@@ -42,16 +41,27 @@ const SideMenu = () => {
     );
   };
 
+  const renderProfileImage = () => {
+    return (
+      <Grid {...styles.profileImageGridProps}>
+        <Grid {...styles.logoImageGridProps}>
+          <KAIAvatar />
+        </Grid>
+        <Grid {...styles.titleGridProps}>
+          <Typography {...styles.subtitleProps}>{user?.fullName}</Typography>
+        </Grid>
+      </Grid>
+    );
+  };
+
   const renderLogout = () => {
     return (
       <Grid {...styles.logoutGridProps}>
         <Button
           onClick={handleSignOutUser}
-          startIcon={<LogoutOutlined />}
+          endIcon={<LogoutOutlined {...styles.logOutOutlineProps} />}
           {...styles.logoutButtonProps}
-        >
-          Logout
-        </Button>
+        />
       </Grid>
     );
   };
@@ -60,6 +70,7 @@ const SideMenu = () => {
     <Grid {...styles.mainGridProps}>
       {renderLogo()}
       <NavMenu />
+      {renderProfileImage()}
       {renderLogout()}
     </Grid>
   );

frontend/layouts/MainAppLayout/SideMenu/styles.js

@@ -2,21 +2,21 @@ const styles = {
   mainGridProps: {
     container: true,
     item: true,
-    width: '360px',
-    flexDirection: 'column',
-    justifyContent: 'center',
+    display: 'flex',
+    height: '100%',
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
     alignItems: 'center',
-    py: { laptop: 4, desktop: 5, desktopMedium: 6 },
-    bgcolor: (theme) => theme.palette.Dark_Colors.Dark[6],
+    bgcolor: 'rgba(24, 26, 32, 0.37)',
   },
   logoGridProps: {
     container: true,
     item: true,
-    columnGap: 1,
     width: 'auto',
-    justifyContent: 'center',
+    height: '100%',
+    justifyContent: 'flex-start',
     alignItems: 'center',
-    mb: 8,
     sx: {
       cursor: 'pointer',
     },
@@ -25,7 +25,7 @@ const styles = {
   logoutGridProps: {
     container: true,
     item: true,
-    width: '100%',
+    width: 'auto',
     px: { laptop: 1, desktop: 1.5, desktopMedium: 2 },
   },
   logoutButtonProps: {
@@ -38,36 +38,58 @@ const styles = {
       px: { laptop: 1, desktop: 1.5, desktopMedium: 2 },
       borderColor: 'transparent',
       transition: (theme) => theme.transitions.create('all'),
-      span: {
-        mr: 4,
-      },
-      color: (theme) => theme.palette.Common.White['100p'],
+      color: '#9E94A5',
       path: {
-        fill: (theme) => theme.palette.Common.White['100p'],
-        stroke: (theme) => theme.palette.Common.White['100p'],
+        fill: '#9E94A5',
+        stroke: '#9E94A5',
       },
       ':hover': {
-        color: (theme) => theme.palette.Common.White['100p'],
+        color: '#9E94A5',
         background: (theme) => `${theme.palette.Background.purple}30`,
         path: {
-          fill: (theme) => theme.palette.Common.White['100p'],
-          stroke: (theme) => theme.palette.Common.White['100p'],
+          fill: '#9E94A5',
+          stroke: '#9E94A5',
         },
       },
     },
   },
+
+  logOutOutlineProps: {
+    sx: {
+      background: '#24272F',
+      borderRadius: '6px',
+      height: '24px',
+      width: '24px',
+    },
+  },
+
   logoImageGridProps: {
     container: true,
     item: true,
     mobileSmall: 'auto',
-    height: 'auto',
+    width: '100%',
+    height: '100%',
+    justifyContent: 'center',
+  },
+  profileImageGridProps: {
+    container: true,
+    item: true,
+    height: '100%',
+    width: 'auto',
+    justifyContent: 'center',
+    alignItems: 'center',
+    sx: {
+      cursor: 'pointer',
+    },
+    px: { laptop: 2, desktop: 3, desktopMedium: 4 },
   },
   titleGridProps: {
     container: true,
     item: true,
     mobileSmall: true,
-    flexDirection: 'column',
-    justifyContent: 'flex-start',
+    justifyContent: 'flex-end',
+    height: '100%',
+    width: 'auto',
     alignItems: 'center',
   },
   titleProps: {
@@ -78,7 +100,7 @@ const styles = {
   subtitleProps: {
     fontFamily: 'Satoshi Bold',
     fontSize: '16px',
-    color: '#AD83FF',
+    color: '#9E94A5',
     textAlign: 'left',
   },
 };