Merge branch 'main' into jamesdevubuntu

Author: hunterjam

frontend/src/components/Sidebar/Sidebar.module.css

@@ -23,6 +23,20 @@
     align-items: center;
     border-radius: 8px;
     margin: 8px;
+
+    padding: 8px, 8px, 8px, 8px;
+    box-shadow: 0px 0.6px 1.8px 0px #0000001C;
+    box-shadow: 0px 3.2px 7.2px 0px #00000021;
+    background-color: #F3F2F1;
+}
+
+.navigationButtonActive {
+    justify-content: center;
+    align-items: center;
+    border-radius: 8px;
+    margin: 8px;
+
+    padding: 8px, 8px, 8px, 8px;
 }
 
 .navigationButton:hover {
@@ -31,7 +45,17 @@
 }
 
 .navigationButton > p {
-    color: #0078D4;
     font-size: 12px;
     margin: 0;
+    font-weight: 400;
+    line-height: 16px;
+    text-align: center;
 }
+
+.navigationButtonActive > p {
+    font-size: 12px;
+    margin: 0;
+    font-weight: 400;
+    line-height: 16px;
+    text-align: center;
+}

frontend/src/components/Sidebar/Sidebar.tsx

@@ -5,34 +5,40 @@ import { Button, Avatar } from '@fluentui/react-components'
 import styles from './Sidebar.module.css'
 import { AppStateContext } from '../../state/AppProvider'
 import { getUserInfo } from '../../api'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate, useLocation } from 'react-router-dom'
 
 interface NavigationButtonProps {
   text: string
-  icon: JSX.Element
+  isActive: boolean
   onClick: () => void
 }
 
-const NavigationButton = ({ text, icon, onClick }: NavigationButtonProps) => {
+const NavigationButton = ({ text, isActive, onClick }: NavigationButtonProps) => {
+  const fontColor = isActive ? '#367AF6' : '#BEBBB8'
+  const iconElements: { [key: string]: JSX.Element } = {
+    'Browse': <News28Regular color={fontColor}/>,
+    'Generate': <Book28Regular color={fontColor}/>,
+    'Draft': <Notepad28Regular color={fontColor}/>
+  }
+
+  const icon = iconElements[text]
+
   return (
-    <Stack
-      onClick={onClick}
-      className={styles.navigationButton}
-    >
-      <Button
-          appearance="transparent"
-          size="large"
-          icon={icon}
-          style={{ padding: '0' }}
+    <Stack onClick={onClick} className={isActive ? styles.navigationButtonActive : styles.navigationButton}>
+      <Button appearance="transparent"
+        size="large"
+        icon={icon}
+        style={{ padding: '0' }}
       />
-      <p>{text}</p>
+      <Text style={{ color: fontColor }}>{text}</Text>
     </Stack>
   )
 }
 
 const Sidebar = (): JSX.Element => {
   const appStateContext = useContext(AppStateContext)
   const navigate = useNavigate()
+  const location = useLocation();
   const [name, setName] = useState<string>("")
 
   useEffect(() => {
@@ -46,17 +52,28 @@ const Sidebar = (): JSX.Element => {
         console.error('Error fetching user info: ', err)
       })
     }
-  }, [])  
+  }, [])
+
+  // determine url from react-router-dom  
+  const determineView = () => {
+    const url = location.pathname
+
+    const urlArr = url.split('/')
+    const currentUrl = urlArr[urlArr.length - 1]
+    return currentUrl
+  }
+
+  const currentView = determineView()
 
   return (
     <Stack className={styles.sidebarContainer}>
       <Stack horizontal className={styles.avatarContainer}>
         <Avatar color="colorful" name={name} />
       </Stack>
       <Stack className={styles.sidebarNavigationContainer}>
-        <NavigationButton text={"Browse"} icon={<News28Regular color="#0078D4" />} onClick={() => { navigate("/chat") }} />
-        <NavigationButton text={"Generate"} icon={<Book28Regular color="#0078D4" />} onClick={() => { navigate("/generate") }} />
-        <NavigationButton text={"Draft"} icon={<Notepad28Regular color="#0078D4" />} onClick={() => { navigate("/draft") }} />
+        <NavigationButton text={"Browse"} isActive={currentView === 'chat'} onClick={() => { navigate("/chat") }} />
+        <NavigationButton text={"Generate"} isActive={currentView === 'generate'} onClick={() => { navigate("/generate") }} />
+        <NavigationButton text={"Draft"} isActive={currentView === 'draft'} onClick={() => { navigate("/draft") }} />
       </Stack>
     </Stack>
   )