diff --git a/frontend/app/(hub)/dashboard/page.tsx b/frontend/app/(hub)/dashboard/page.tsx index fb65cb58..60443957 100644 --- a/frontend/app/(hub)/dashboard/page.tsx +++ b/frontend/app/(hub)/dashboard/page.tsx @@ -1,17 +1,6 @@ "use client"; -import { - Accordion, - AccordionDetails, - AccordionGroup, - AccordionSummary, - Box, - IconButton, - List, - ListItem, - Tooltip, - Typography -} from "@mui/joy"; +import { Accordion, AccordionDetails, AccordionGroup, AccordionSummary, Box, IconButton, List, ListItem, Tooltip, Typography} from "@mui/joy"; import WarningIcon from '@mui/icons-material/Warning'; import TravelExploreIcon from '@mui/icons-material/TravelExplore'; import Avatar from "@mui/joy/Avatar"; diff --git a/frontend/app/(hub)/layout.tsx b/frontend/app/(hub)/layout.tsx index 347048ad..fded9eb7 100644 --- a/frontend/app/(hub)/layout.tsx +++ b/frontend/app/(hub)/layout.tsx @@ -27,6 +27,7 @@ import { } from "@/app/contexts/listselectionprovider"; import {createAndUpdateCensusList} from "@/config/sqlrdsdefinitions/orgcensusrds"; import {siteConfig} from "@/config/macros/siteconfigs"; +import { useDataValidityContext } from "../contexts/datavalidityprovider"; const Sidebar = dynamic(() => import('@/components/sidebar'), { ssr: false }); const Header = dynamic(() => import('@/components/header'), { ssr: false }); @@ -78,6 +79,7 @@ export default function HubLayout({ children }: { children: React.ReactNode }) { const currentCensus = useOrgCensusContext(); const currentQuadrat = useQuadratContext(); const { data: session } = useSession(); + const {validity} = useDataValidityContext(); const previousSiteRef = useRef(undefined); const [siteListLoaded, setSiteListLoaded] = useState(false); @@ -109,7 +111,7 @@ export default function HubLayout({ children }: { children: React.ReactNode }) { setLoading(false); setCensusListLoaded(true); return { success: true }; - }, [censusListContext, censusListDispatch, currentPlot, currentSite, setLoading]); + }, [censusListContext, censusListDispatch, currentPlot, currentSite, setLoading, validity]); const loadPlotsData = useCallback(async () => { if (!currentSite) return { success: false, message: 'Site must be selected to load plot data' }; @@ -128,7 +130,7 @@ export default function HubLayout({ children }: { children: React.ReactNode }) { setLoading(false); setPlotListLoaded(true); return { success: true }; - }, [plotListContext, plotListDispatch, currentSite, setLoading]); + }, [plotListContext, plotListDispatch, currentSite, setLoading, validity]); const loadQuadratsData = useCallback(async () => { if (!currentPlot || !currentCensus) return { @@ -150,7 +152,7 @@ export default function HubLayout({ children }: { children: React.ReactNode }) { setLoading(false); setQuadratListLoaded(true); return { success: true }; - }, [quadratListContext, quadratListDispatch, currentPlot, currentCensus, currentSite, setLoading]); + }, [quadratListContext, quadratListDispatch, currentPlot, currentCensus, currentSite, setLoading, validity]); const loadSubquadratsData = useCallback(async () => { if (!currentPlot || !currentCensus || !currentQuadrat) return { @@ -172,7 +174,7 @@ export default function HubLayout({ children }: { children: React.ReactNode }) { setLoading(false); setSubquadratListLoaded(true); return { success: true }; - }, [subquadratListContext, subquadratListDispatch, currentPlot, currentCensus, currentQuadrat, currentSite, setLoading]); + }, [subquadratListContext, subquadratListDispatch, currentPlot, currentCensus, currentQuadrat, currentSite, setLoading, validity]); const fetchSiteList = useCallback(async () => { setLoading(true, 'Loading Sites...'); @@ -190,7 +192,7 @@ export default function HubLayout({ children }: { children: React.ReactNode }) { siteListDispatch ? await siteListDispatch({siteList: allsites}) : undefined; } setLoading(false); - }, [session, siteListLoaded, siteListDispatch, setLoading]); + }, [session, siteListLoaded, siteListDispatch, setLoading, validity]); useEffect(() => { if (session && !siteListLoaded) { diff --git a/frontend/app/(hub)/measurementshub/summary/page.tsx b/frontend/app/(hub)/measurementshub/summary/page.tsx index 5915c764..0a34ddb8 100644 --- a/frontend/app/(hub)/measurementshub/summary/page.tsx +++ b/frontend/app/(hub)/measurementshub/summary/page.tsx @@ -3,29 +3,10 @@ import React, { useEffect, useState } from "react"; import { GridRowModes, GridRowModesModel, GridRowsProp } from "@mui/x-data-grid"; import { Alert, AlertProps, LinearProgress, Tooltip, TooltipProps, styled, tooltipClasses } from "@mui/material"; import { gridColumnsArrayMSVRDS, initialMeasurementsSummaryViewRDSRow } from '@/config/sqlrdsdefinitions/views/measurementssummaryviewrds'; -import { - Box, - ListItemContent, - ListItem, - List, - Modal, - ModalDialog, - Typography, - Button, - DialogTitle, - DialogContent, - DialogActions, - Snackbar, - Stack, -} from "@mui/joy"; +import { Box, ListItemContent, ListItem, List, Modal, ModalDialog, Typography, Button, DialogTitle, DialogContent, DialogActions, Snackbar, Stack,} from "@mui/joy"; import Select, { SelectOption } from "@mui/joy/Select"; import { useSession } from "next-auth/react"; -import { - useOrgCensusContext, - usePlotContext, - useQuadratDispatch, - useSiteContext -} from "@/app/contexts/userselectionprovider"; +import { useOrgCensusContext, usePlotContext, useQuadratDispatch, useSiteContext} from "@/app/contexts/userselectionprovider"; import { randomId } from "@mui/x-data-grid-generator"; import UploadParentModal from "@/components/uploadsystemhelpers/uploadparentmodal"; import { useQuadratListContext } from "@/app/contexts/listselectionprovider"; diff --git a/frontend/components/datagrids/applications/quadratpersonneldatagrid.tsx b/frontend/components/datagrids/applications/quadratpersonneldatagrid.tsx index 405b3bfd..b28e8bed 100644 --- a/frontend/components/datagrids/applications/quadratpersonneldatagrid.tsx +++ b/frontend/components/datagrids/applications/quadratpersonneldatagrid.tsx @@ -7,11 +7,7 @@ import {randomId} from "@mui/x-data-grid-generator"; import {useSession} from "next-auth/react"; import React, {useEffect, useState} from "react"; import DataGridCommons from "../datagridcommons"; -import { - useOrgCensusContext, - usePlotContext, - useSiteContext -} from "@/app/contexts/userselectionprovider"; +import { useOrgCensusContext, usePlotContext, useSiteContext} from "@/app/contexts/userselectionprovider"; import {useDataValidityContext} from "@/app/contexts/datavalidityprovider"; import {GridSelections} from "@/config/macros"; import { initialQuadratPersonnelRDSRow } from "@/config/sqlrdsdefinitions/tables/quadratpersonnelrds"; diff --git a/frontend/components/datagrids/applications/quadratsdatagrid.tsx b/frontend/components/datagrids/applications/quadratsdatagrid.tsx index 6e86965d..3f21525c 100644 --- a/frontend/components/datagrids/applications/quadratsdatagrid.tsx +++ b/frontend/components/datagrids/applications/quadratsdatagrid.tsx @@ -3,10 +3,7 @@ import {GridRowModes, GridRowModesModel, GridRowsProp} from "@mui/x-data-grid"; import {AlertProps} from "@mui/material"; import React, { useState} from "react"; import {QuadratsGridColumns as BaseQuadratsGridColumns, initialQuadratRDSRow} from '@/config/sqlrdsdefinitions/tables/quadratrds'; -import { - useOrgCensusContext, - usePlotContext, -} from "@/app/contexts/userselectionprovider"; +import { useOrgCensusContext, usePlotContext, } from "@/app/contexts/userselectionprovider"; import {randomId} from "@mui/x-data-grid-generator"; import DataGridCommons from "@/components/datagrids/datagridcommons"; import {Box, Button, Typography} from "@mui/joy"; diff --git a/frontend/components/datagrids/datagridcommons.tsx b/frontend/components/datagrids/datagridcommons.tsx index e3663a86..3c15f4b8 100644 --- a/frontend/components/datagrids/datagridcommons.tsx +++ b/frontend/components/datagrids/datagridcommons.tsx @@ -1,24 +1,7 @@ "use client"; import React, { useCallback, useEffect, useMemo, useState } from 'react'; -import { - GridActionsCellItem, - GridColDef, - GridEventListener, - GridRowEditStopReasons, - GridRowId, - GridRowModel, - GridRowModes, - GridRowModesModel, - GridToolbar, - GridToolbarContainer, - GridToolbarProps, - ToolbarPropsOverrides -} from '@mui/x-data-grid'; -import { - Alert, - Button, - Snackbar -} from '@mui/material'; +import { GridActionsCellItem, GridColDef, GridEventListener, GridRowEditStopReasons, GridRowId, GridRowModel, GridRowModes, GridRowModesModel, GridToolbar, GridToolbarContainer, GridToolbarProps, ToolbarPropsOverrides, useGridApiRef, GridCellParams, } from '@mui/x-data-grid'; +import { Alert, Button, Snackbar, } from '@mui/material'; import AddIcon from '@mui/icons-material/Add'; import EditIcon from '@mui/icons-material/Edit'; import DeleteIcon from '@mui/icons-material/DeleteOutlined'; @@ -28,20 +11,9 @@ import RefreshIcon from '@mui/icons-material/Refresh'; import Box from "@mui/joy/Box"; import { Tooltip, Typography } from "@mui/joy"; import { StyledDataGrid } from "@/config/styleddatagrid"; -import { - createDeleteQuery, - createFetchQuery, - createPostPatchQuery, - getColumnVisibilityModel, - getGridID, -} from "@/config/datagridhelpers"; +import { createDeleteQuery, createFetchQuery, createPostPatchQuery, getColumnVisibilityModel, getGridID } from "@/config/datagridhelpers"; import { useSession } from "next-auth/react"; -import { - useOrgCensusContext, - usePlotContext, - useQuadratContext, - useSiteContext -} from "@/app/contexts/userselectionprovider"; +import { useOrgCensusContext, usePlotContext, useQuadratContext, useSiteContext } from "@/app/contexts/userselectionprovider"; import { redirect } from 'next/navigation'; import { HTTPResponses, UnifiedValidityFlags } from '@/config/macros'; import { useDataValidityContext } from '@/app/contexts/datavalidityprovider'; @@ -112,6 +84,7 @@ export default function DataGridCommons(props: Readonly) { const [locked, setLocked] = useState(false); const [pendingAction, setPendingAction] = useState({ actionType: '', actionId: null }); const [promiseArguments, setPromiseArguments] = useState<{ resolve: (value: GridRowModel) => void, reject: (reason?: any) => void, newRow: GridRowModel, oldRow: GridRowModel } | null>(null); + const [isSaveHighlighted, setIsSaveHighlighted] = useState(false); const currentPlot = usePlotContext(); const currentCensus = useOrgCensusContext(); @@ -125,6 +98,8 @@ export default function DataGridCommons(props: Readonly) { useSession(); + const apiRef = useGridApiRef(); + useEffect(() => { if (currentCensus !== undefined) { setLocked(currentCensus.dateRanges[0].endDate !== undefined); @@ -346,7 +321,6 @@ export default function DataGridCommons(props: Readonly) { setRowCount(data.totalCount); if (isNewRowAdded && pageToFetch === newLastPage) { - console.log('isNewRowAdded true, on new last page'); addNewRowToGrid(); setIsNewRowAdded(false); } @@ -419,7 +393,6 @@ export default function DataGridCommons(props: Readonly) { if (rowInEditMode) { const [id] = rowInEditMode; const row = rows.find(row => String(row.id) === String(id)); - console.log('handleRowModesModelChange triggered on row: ', row); } }; @@ -437,7 +410,6 @@ export default function DataGridCommons(props: Readonly) { const handleEditClick = (id: GridRowId) => () => { if (locked) return; const row = rows.find(row => String(row.id) === String(id)); - console.log('handleEditClick row: ', row); if (row && handleSelectQuadrat) { handleSelectQuadrat(row.quadratID); } @@ -445,6 +417,13 @@ export default function DataGridCommons(props: Readonly) { ...prevModel, [id]: { mode: GridRowModes.Edit }, })); + // Auto-focus on the first editable cell when entering edit mode + setTimeout(() => { + const firstEditableColumn = filteredColumns.find((col) => col.editable); + if (firstEditableColumn) { + apiRef.current.setCellFocus(id, firstEditableColumn.field); + } + }); }; const handleCancelClick = (id: GridRowId, event?: React.MouseEvent) => { @@ -527,6 +506,44 @@ export default function DataGridCommons(props: Readonly) { else return columns; }, [rows, columns]); + const handleEnterKeyNavigation = async (params: GridCellParams, event: React.KeyboardEvent) => { + event.defaultPrevented = true; + const columnIndex = filteredColumns.findIndex(col => col.field === params.field); + const isLastColumn = columnIndex === filteredColumns.length - 2; + const currentColumn = filteredColumns[columnIndex]; + + if (isSaveHighlighted) { + openConfirmationDialog('save', params.id); + setIsSaveHighlighted(false); + } else if (currentColumn.type === 'singleSelect') { + const cell = apiRef.current.getCellElement(params.id, params.field); + if (cell) { + const select = cell.querySelector('select'); + if (select) { + select.focus(); + } + } + } else if (isLastColumn) { + setIsSaveHighlighted(true); + apiRef.current.setCellFocus(params.id, 'actions'); + } else { + apiRef.current.setCellFocus(params.id, filteredColumns[columnIndex + 1].field); + } + }; + + const handleSelectKeyDown = (params: GridCellParams, event: React.KeyboardEvent) => { + const column = filteredColumns.find(col => col.field === params.field); + if (column && column.type === 'singleSelect' && event.key === 'Enter') { + const cell = apiRef.current.getCellElement(params.id, params.field); + if (cell) { + const select = cell.querySelector('select'); + if (select) { + select.blur(); + } + } + } + }; + if (!currentSite || !currentPlot || !currentCensus) { redirect('/dashboard'); } else { @@ -547,6 +564,7 @@ export default function DataGridCommons(props: Readonly) { Note: The Grid is filtered by your selected Plot and Plot ID ) { }} onCellKeyDown={(params, event) => { if (event.key === 'Enter') { - event.defaultMuiPrevented = true; - openConfirmationDialog('save', params.id); + handleEnterKeyNavigation(params, event); } }} loading={refresh} diff --git a/frontend/components/datagrids/msvdatagrid.tsx b/frontend/components/datagrids/msvdatagrid.tsx index d07c5ef7..b5ca4ce7 100644 --- a/frontend/components/datagrids/msvdatagrid.tsx +++ b/frontend/components/datagrids/msvdatagrid.tsx @@ -1,30 +1,7 @@ "use client"; import React, { useCallback, useEffect, useMemo, useState } from 'react'; -import { - GridActionsCellItem, - GridCellParams, - GridColDef, - GridEventListener, - GridRowEditStopReasons, - GridRowId, - GridRowModel, - GridRowModes, - GridRowModesModel, - GridSortModel, - GridToolbar, - GridToolbarContainer, - GridToolbarProps, - GridValidRowModel, - ToolbarPropsOverrides -} from '@mui/x-data-grid'; -import { - Alert, - Button, - Checkbox, - FormControlLabel, - FormGroup, - Snackbar -} from '@mui/material'; +import { GridActionsCellItem, GridCellParams, GridColDef, GridEventListener, GridRowEditStopReasons, GridRowId, GridRowModel, GridRowModes, GridRowModesModel, GridSortModel, GridToolbar, GridToolbarContainer, GridToolbarProps, GridValidRowModel, ToolbarPropsOverrides} from '@mui/x-data-grid'; +import { Alert, Button, Checkbox, FormControlLabel, FormGroup, Snackbar} from '@mui/material'; import AddIcon from '@mui/icons-material/Add'; import EditIcon from '@mui/icons-material/Edit'; import DeleteIcon from '@mui/icons-material/DeleteOutlined'; @@ -34,19 +11,9 @@ import RefreshIcon from '@mui/icons-material/Refresh'; import Box from "@mui/joy/Box"; import { Stack, Tooltip, Typography } from "@mui/joy"; import { StyledDataGrid } from "@/config/styleddatagrid"; -import { - createDeleteQuery, - createFetchQuery, - createPostPatchQuery, - getGridID, -} from "@/config/datagridhelpers"; +import { createDeleteQuery, createFetchQuery, createPostPatchQuery, getGridID,} from "@/config/datagridhelpers"; import { CMError } from "@/config/macros/uploadsystemmacros"; -import { - useOrgCensusContext, - usePlotContext, - useQuadratContext, - useSiteContext -} from "@/app/contexts/userselectionprovider"; +import { useOrgCensusContext, usePlotContext, useQuadratContext, useSiteContext} from "@/app/contexts/userselectionprovider"; import { redirect } from 'next/navigation'; import { CoreMeasurementsRDS } from '@/config/sqlrdsdefinitions/tables/coremeasurementsrds'; import moment from 'moment'; diff --git a/frontend/components/datagrids/reentrydatamodal.tsx b/frontend/components/datagrids/reentrydatamodal.tsx index aa72d370..232ff011 100644 --- a/frontend/components/datagrids/reentrydatamodal.tsx +++ b/frontend/components/datagrids/reentrydatamodal.tsx @@ -1,6 +1,6 @@ "use client"; import React, { useState, useEffect } from 'react'; -import { GridRowModel, GridColDef } from "@mui/x-data-grid"; +import { GridRowModel, GridColDef, DataGrid, GridRenderCellParams } from "@mui/x-data-grid"; import moment from 'moment'; import { unitSelectionOptions } from '@/config/macros'; import { AttributeStatusOptions } from '@/config/sqlrdsdefinitions/tables/attributerds'; @@ -25,6 +25,19 @@ const ReEnterDataModal: React.FC = ({ const [localData, setLocalData] = useState({ ...reEnterData }); const [selectedRow, setSelectedRow] = useState(null); const [isConfirmStep, setIsConfirmStep] = useState(false); + const [isRowSelected, setIsRowSelected] = useState(false); // New state for row selection + + // Function to calculate the width dynamically based on column definitions + const calculateDialogWidth = () => { + const baseWidth = 300; // Base width for non-flex columns + const totalFlex = columns.reduce((acc, column) => acc + (column.flex || 0), 0); + const totalMinWidth = columns.reduce((acc, column) => acc + (column.minWidth || 0), 0); + const flexWidth = totalFlex ? totalFlex * 100 : 0; // Approximate flex width, you can adjust the multiplier as needed + + return Math.max(baseWidth + flexWidth, totalMinWidth); + }; + + const dialogWidth = calculateDialogWidth(); useEffect(() => { if (reEnterData) { @@ -53,12 +66,22 @@ const ReEnterDataModal: React.FC = ({ const handleRowSelect = (row: GridRowModel) => { setSelectedRow(row); - handleSave(row); + setIsRowSelected(true); // Set the row selection state + }; + + const handleFinalConfirm = () => { + if (selectedRow) { + handleSave(selectedRow); + } }; return ( - + Confirm Changes {!isConfirmStep ? ( @@ -118,31 +141,87 @@ const ReEnterDataModal: React.FC = ({ })} ) : ( - - Select the correct row: - {columns.map((column) => ( - {column.headerName}: {reEnterData ? reEnterData[column.field] : ''} - ))} - {columns.map((column) => ( - {column.headerName}: {localData[column.field]} - ))} + + Please choose from the following -- + 1. Original -- ignore all modifications made to the row. + 2. First Modification -- proceed with the initial change you made. + 3. Second Modification -- the initial change contained a type, proceed with the re-entered version. + + ( + {params.value} + ), + }, + ...columns.map((col) => ({ + ...col, + flex: col.flex || 1, // Ensure flex is set for dynamic resizing + minWidth: col.minWidth || 150, // Provide a default minWidth if not set + renderCell: (params: GridRenderCellParams) => ( + + {params.value} + + ), + })), + ]} + getRowId={(row) => row.id} + onRowClick={(params) => handleRowSelect(params.row)} + sx={{ + display: 'flex', + flex: 1, + width: '100%', + '& .MuiDataGrid-row': { + cursor: 'pointer', + }, + '& .MuiDataGrid-row:hover': { + backgroundColor: 'rgba(0, 0, 0, 0.44)', // light gray background for better readability + color: 'inherit', // keep the text color unchanged + }, + '& .MuiDataGrid-row.selected': { + backgroundColor: 'rgba(0, 0, 255, 0.22)', // blue background for selected row + color: 'inherit', // keep the text color unchanged + }, + '& .MuiDataGrid-cell': { + padding: '8px', // add padding for better readability + }, + // Hide the footer that contains pagination controls and rows per page selector + '& .MuiDataGrid-footerContainer': { + display: 'none', + }, + }} + /> + )} {!isConfirmStep ? ( <> - + ) : ( - + <> + + + )} diff --git a/frontend/components/processors/processorhelperfunctions.tsx b/frontend/components/processors/processorhelperfunctions.tsx index 8d0b3486..6f756cd3 100644 --- a/frontend/components/processors/processorhelperfunctions.tsx +++ b/frontend/components/processors/processorhelperfunctions.tsx @@ -1,10 +1,5 @@ import mysql, {PoolConnection} from "mysql2/promise"; -import { - fileMappings, - getConn, - InsertUpdateProcessingProps, - runQuery -} from "@/components/processors/processormacros"; +import { fileMappings, getConn, InsertUpdateProcessingProps, runQuery} from "@/components/processors/processormacros"; import {SitesResult} from '@/config/sqlrdsdefinitions/tables/sitesrds'; import {processCensus} from "@/components/processors/processcensus"; import {SitesRDS} from '@/config/sqlrdsdefinitions/tables/sitesrds'; diff --git a/frontend/components/sidebar.tsx b/frontend/components/sidebar.tsx index ea694915..4e76adfc 100644 --- a/frontend/components/sidebar.tsx +++ b/frontend/components/sidebar.tsx @@ -15,31 +15,13 @@ import { siteConfigNav, validityMapping } from "@/config/macros/siteconfigs"; import { SiteConfigProps } from "@/config/macros/siteconfigs"; import { Site } from "@/config/sqlrdsdefinitions/tables/sitesrds"; import { Plot } from "@/config/sqlrdsdefinitions/tables/plotrds"; -import { - useOrgCensusContext, - useOrgCensusDispatch, - usePlotContext, - usePlotDispatch, - useSiteContext, - useSiteDispatch -} from "@/app/contexts/userselectionprovider"; +import { useOrgCensusContext, useOrgCensusDispatch, usePlotContext, usePlotDispatch, useSiteContext, useSiteDispatch } from "@/app/contexts/userselectionprovider"; import { usePathname, useRouter } from "next/navigation"; -import { - Button, - SelectOption, - Stack, - Badge, - Tooltip, - IconButton, -} from "@mui/joy"; +import { Button, SelectOption, Stack, Badge, Tooltip, IconButton, } from "@mui/joy"; import AddIcon from '@mui/icons-material/Add'; import Select from "@mui/joy/Select"; import Option from '@mui/joy/Option'; -import { - useOrgCensusListContext, - usePlotListContext, - useSiteListContext -} from "@/app/contexts/listselectionprovider"; +import { useOrgCensusListContext, usePlotListContext, useSiteListContext } from "@/app/contexts/listselectionprovider"; import { useSession } from "next-auth/react"; import { TransitionComponent } from "@/components/client/clientmacros"; import ListDivider from "@mui/joy/ListDivider"; @@ -197,7 +179,7 @@ export default function Sidebar(props: SidebarProps) { } }); - setSidebarWidth(maxWidth + 10); + setSidebarWidth(Math.min(maxWidth + 10, 500)); } }; @@ -522,6 +504,7 @@ export default function Sidebar(props: SidebarProps) { name="None" required autoFocus + sx={{ marginRight: '1em' }} size={"md"} renderValue={renderSiteValue} value={site ? siteListContext?.find(i => i.siteName === site.siteName)?.siteName : ""} @@ -629,9 +612,9 @@ export default function Sidebar(props: SidebarProps) { }, })} /> - + - + @@ -655,21 +638,21 @@ export default function Sidebar(props: SidebarProps) { {(site !== undefined) && ( <> - + - + {renderPlotOptions()} {plot !== undefined && ( <> - + - + {renderCensusOptions()} @@ -683,8 +666,7 @@ export default function Sidebar(props: SidebarProps) { display: 'flex', flexDirection: 'column', gap: 1, - ml: -1 - }}> {/* Added ml: -1 to adjust the position of the navigation menu */} + ml: -1}}> {/* Added ml: -1 to adjust the position of the navigation menu */}