add nav bar to application detaIils

hkam0006 · May 14, 2024 · 1144a8e · 1144a8e
1 parent b92eadd
commit 1144a8e
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 7 deletions.
diff --git a/frontend/src/components/application_details/ApplicationDetails.jsx b/frontend/src/components/application_details/ApplicationDetails.jsx
@@ -147,7 +147,8 @@ function ApplicationDetails() {
 
     return (
         <Box sx={{ padding: 2 }}>
-            <Grid container>
+            <NavigationMenu />
+            <Grid container sx={{ marginTop: '64px', marginLeft: '190px', width: 'calc(100% - 190px)' }}>
                 <Grid item xs={3}>
                     <Outline renter={renter}/>
                 </Grid>

diff --git a/frontend/src/components/application_details/Comment.jsx b/frontend/src/components/application_details/Comment.jsx
@@ -8,7 +8,7 @@ function Comment({ comment, setComment, showComment, commentPosition, comments,
     return (
         <Box>
             {showComment && (
-                <Box style={{ position: 'absolute', top: commentPosition + 'px', width: '22%' }}>
+                <Box style={{ position: 'absolute', top: commentPosition + 'px', width: '21%' }}>
                     {comments.map((singleComment, index) =>
                         <CommentContent key={`comment-${index}`} comment={singleComment} />
                     )}

diff --git a/frontend/src/components/application_details/Outline.jsx b/frontend/src/components/application_details/Outline.jsx
@@ -3,14 +3,15 @@ import { List, ListItem, Typography, Paper, Box } from '@mui/material'
 
 function Outline({ renter }) {
     const goToSection = (section) => {
-        const element = document.getElementById(section)
-        if (element) {
-            element.scrollIntoView({ behavior: 'smooth' })
-        }
+        const contentPosition = document.getElementById(section).getBoundingClientRect().top + window.scrollY - 110
+        window.scrollTo({
+            top: contentPosition,
+            behavior: 'smooth'
+        })
     }
 
     const result = (
-        <Paper sx={{ padding: 2, margin: 2, position: 'fixed', width: '21%', height: '92%' }}>
+        <Paper sx={{ padding: 2, margin: 2, position: 'fixed', width: '20%', height: '83%' }}>
             {renter && (
                 <Box>
                     <Typography variant='h6'>{renter.renter_first_name} {renter.renter_last_name}</Typography>