Remove unused absolute positioning div in Navbar

engagingnewsproject · Oct 15, 2024 · f7ff271 · f7ff271
1 parent b9dbcba
commit f7ff271
Showing 1 changed file with 146 additions and 148 deletions.
diff --git a/components/Navbar.jsx b/components/Navbar.jsx
@@ -27,8 +27,8 @@ const Navbar = ({
 	tab,
 	setTab,
 	handleNewReportSubmit,
-  handleContactHelpSubmit,
-  handleNewReportClick,
+	handleContactHelpSubmit,
+	handleNewReportClick,
 	onReportTabClick,
 	isOpen,
 }) => {
@@ -90,169 +90,167 @@ const Navbar = ({
 				size={65}
 				overlay={disableOverlay}
 				className="z-[9997]">
-				<div className="fixed top-0 left-0 w-16 h-screen max-h-screen overflow-y-hidden">
-					<div className="flex-col h-full max-h-[81vh] md:h-screen md:max-h-screen">
-						<div className="grid grid-rows-2 justify-between w-full h-full">
-							<div className="row-span-1">
-								<Button
-									variant="text"
-									onClick={closeDrawer}
-									className={basicStyle + ' sm:hidden tooltip-close'}>
-									<IoClose size={30} />
-								</Button>
-								{(customClaims.admin || customClaims.agency) && (
-									<button // Home/Reports view
-										onClick={() => {
-											setTab(0)
-											closeDrawer()
-										}}
-										className={`${basicStyle} ${
-											tab === 0 ? 'text-indigo-500 bg-indigo-100' : ''
-										} tooltip-home`}>
-										<IoHomeOutline size={30} />
-										<Tooltip
-											anchorSelect=".tooltip-home"
-											place="bottom"
-											delayShow={500}>
-											Home
-										</Tooltip>
-									</button>
-								)}
-								{customClaims.admin && (
-									<button // Agencies
-										onClick={() => {
-											setTab(4)
-											closeDrawer()
-										}}
-										className={`${basicStyle} ${
-											tab === 4 ? 'text-indigo-500 bg-indigo-100' : ''
-										} tooltip-agencies`}>
-										<IoBusinessOutline size={30} />
-										<Tooltip
-											anchorSelect=".tooltip-agencies"
-											place="bottom"
-											delayShow={500}>
-											Agencies
-										</Tooltip>
-									</button>
-								)}
-								{(customClaims.agency || customClaims.admin) && (
-									<button // Tags
-										onClick={() => {
-											setTab(2)
-											closeDrawer()
-										}}
-										className={`${basicStyle} ${
-											tab === 2 ? ' text-indigo-500 bg-indigo-100' : ''
-										} tooltip-tags`}>
-										<IoPricetagsOutline size={30} />
-										<Tooltip
-											anchorSelect=".tooltip-tags"
-											place="bottom"
-											delayShow={500}>
-											Tagging Systems
-										</Tooltip>
-									</button>
-								)}
-								{customClaims.agency && ( // if admin user or agency user show the add report & users icons
-									<button //  Agency user create report
-										onClick={(e) => {
-											handleNewReportClick(e)
-											closeDrawer()
-										}}
-										className={`${basicStyle} tooltip-new-report`}>
-										<IoAddCircleOutline size={30} />
-										<Tooltip
-											anchorSelect=".tooltip-new-report"
-											place="bottom"
-											delayShow={500}>
-											New Report
-										</Tooltip>
-									</button>
-								)}
-								{(customClaims.admin) && (
-									<button // Users
-										onClick={() => {
-											setTab(3)
-											closeDrawer()
-										}}
-										className={`${basicStyle} ${
-											tab === 3 ? ' text-indigo-500 bg-indigo-100' : ''
-										} tooltip-users`}>
-										<IoPeopleOutline size={30} />
-										<Tooltip
-											anchorSelect=".tooltip-users"
-											place="bottom"
-											delayShow={500}>
-											Users
-										</Tooltip>
-									</button>
-								)}
-								{!customClaims.admin && !customClaims.agency && (
-									<button // General User create report
-										onClick={(e) => {
-											onReportTabClick(e)
-											closeDrawer()
-										}}
-										className={`${basicStyle} tooltip-create-report`}>
-										<HiOutlineDocumentPlus size={30} />
-										<Tooltip
-											anchorSelect=".tooltip-create-report"
-											place="bottom"
-											delayShow={500}>
-											Create Report
-										</Tooltip>
-									</button>
-								)}
-							</div>
-							<div className="self-end">
-								{(customClaims.admin || customClaims.agency) && (
-									<button
-										onClick={() => {
-											setHelpModal(true)
-											closeDrawer()
-										}}
-										className={`${basicStyle} tooltip-help`}>
-										<IoHelpCircleOutline size={30} />
-										<Tooltip
-											anchorSelect=".tooltip-help"
-											place="bottom"
-											delayShow={500}>
-											Help
-										</Tooltip>
-									</button>
-								)}
-								<button
+				<div className="flex-col h-full max-h-[81vh] md:h-screen md:max-h-screen">
+					<div className="grid grid-rows-2 justify-between w-full h-full">
+						<div className="row-span-1">
+							<Button
+								variant="text"
+								onClick={closeDrawer}
+								className={basicStyle + ' sm:hidden tooltip-close'}>
+								<IoClose size={30} />
+							</Button>
+							{(customClaims.admin || customClaims.agency) && (
+								<button // Home/Reports view
 									onClick={() => {
-										setContactHelpModal(true)
+										setTab(0)
 										closeDrawer()
 									}}
-									className={`${basicStyle} tooltip-contact-us-for-help`}>
-									<IoChatboxEllipsesOutline size={30} />
+									className={`${basicStyle} ${
+										tab === 0 ? 'text-indigo-500 bg-indigo-100' : ''
+									} tooltip-home`}>
+									<IoHomeOutline size={30} />
 									<Tooltip
-										anchorSelect=".tooltip-contact-us-for-help"
+										anchorSelect=".tooltip-home"
 										place="bottom"
 										delayShow={500}>
-										Contact for Help
+										Home
 									</Tooltip>
 								</button>
-								<button
+							)}
+							{customClaims.admin && (
+								<button // Agencies
+									onClick={() => {
+										setTab(4)
+										closeDrawer()
+									}}
+									className={`${basicStyle} ${
+										tab === 4 ? 'text-indigo-500 bg-indigo-100' : ''
+									} tooltip-agencies`}>
+									<IoBusinessOutline size={30} />
+									<Tooltip
+										anchorSelect=".tooltip-agencies"
+										place="bottom"
+										delayShow={500}>
+										Agencies
+									</Tooltip>
+								</button>
+							)}
+							{(customClaims.agency || customClaims.admin) && (
+								<button // Tags
 									onClick={() => {
-										setTab(1)
+										setTab(2)
 										closeDrawer()
 									}}
 									className={`${basicStyle} ${
-										tab === 1 ? ' text-indigo-500 bg-indigo-100' : ''
-									} tooltip-profile`}>
-									<IoPersonOutline size={30} />
+										tab === 2 ? ' text-indigo-500 bg-indigo-100' : ''
+									} tooltip-tags`}>
+									<IoPricetagsOutline size={30} />
+									<Tooltip
+										anchorSelect=".tooltip-tags"
+										place="bottom"
+										delayShow={500}>
+										Tagging Systems
+									</Tooltip>
+								</button>
+							)}
+							{customClaims.agency && ( // if admin user or agency user show the add report & users icons
+								<button //  Agency user create report
+									onClick={(e) => {
+										handleNewReportClick(e)
+										closeDrawer()
+									}}
+									className={`${basicStyle} tooltip-new-report`}>
+									<IoAddCircleOutline size={30} />
+									<Tooltip
+										anchorSelect=".tooltip-new-report"
+										place="bottom"
+										delayShow={500}>
+										New Report
+									</Tooltip>
+								</button>
+							)}
+							{customClaims.admin && (
+								<button // Users
+									onClick={() => {
+										setTab(3)
+										closeDrawer()
+									}}
+									className={`${basicStyle} ${
+										tab === 3 ? ' text-indigo-500 bg-indigo-100' : ''
+									} tooltip-users`}>
+									<IoPeopleOutline size={30} />
+									<Tooltip
+										anchorSelect=".tooltip-users"
+										place="bottom"
+										delayShow={500}>
+										Users
+									</Tooltip>
+								</button>
+							)}
+							{!customClaims.admin && !customClaims.agency && (
+								<button // General User create report
+									onClick={(e) => {
+										onReportTabClick(e)
+										closeDrawer()
+									}}
+									className={`${basicStyle} tooltip-create-report`}>
+									<HiOutlineDocumentPlus size={30} />
+									<Tooltip
+										anchorSelect=".tooltip-create-report"
+										place="bottom"
+										delayShow={500}>
+										Create Report
+									</Tooltip>
+								</button>
+							)}
+						</div>
+						<div className="self-end">
+							{(customClaims.admin || customClaims.agency) && (
+								<button
+									onClick={() => {
+										setHelpModal(true)
+										closeDrawer()
+									}}
+									className={`${basicStyle} tooltip-help`}>
+									<IoHelpCircleOutline size={30} />
 									<Tooltip
-										anchorSelect=".tooltip-profile"
+										anchorSelect=".tooltip-help"
 										place="bottom"
 										delayShow={500}>
-										Profile
+										Help
 									</Tooltip>
 								</button>
-							</div>
+							)}
+							<button
+								onClick={() => {
+									setContactHelpModal(true)
+									closeDrawer()
+								}}
+								className={`${basicStyle} tooltip-contact-us-for-help`}>
+								<IoChatboxEllipsesOutline size={30} />
+								<Tooltip
+									anchorSelect=".tooltip-contact-us-for-help"
+									place="bottom"
+									delayShow={500}>
+									Contact for Help
+								</Tooltip>
+							</button>
+							<button
+								onClick={() => {
+									setTab(1)
+									closeDrawer()
+								}}
+								className={`${basicStyle} ${
+									tab === 1 ? ' text-indigo-500 bg-indigo-100' : ''
+								} tooltip-profile`}>
+								<IoPersonOutline size={30} />
+								<Tooltip
+									anchorSelect=".tooltip-profile"
+									place="bottom"
+									delayShow={500}>
+									Profile
+								</Tooltip>
+							</button>
 						</div>
 					</div>
 				</div>