From 36c5cd16c75fe9b6415c979d7e60e68083414b15 Mon Sep 17 00:00:00 2001
From: Sean Hatfield <seanhatfield5@gmail.com>
Date: Thu, 11 Jul 2024 15:57:41 -0700
Subject: [PATCH] [REFACTOR] Refactor window path location for settings sidebar
 (#1856)

use useLocation hook instead of href for window location
---
 .../components/SettingsSidebar/MenuOption/index.jsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/SettingsSidebar/MenuOption/index.jsx b/frontend/src/components/SettingsSidebar/MenuOption/index.jsx
index 20924d53..38be4883 100644
--- a/frontend/src/components/SettingsSidebar/MenuOption/index.jsx
+++ b/frontend/src/components/SettingsSidebar/MenuOption/index.jsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { CaretRight } from "@phosphor-icons/react";
-import { Link } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 
 export default function MenuOption({
   btnText,
@@ -14,14 +14,14 @@ export default function MenuOption({
   isChild = false,
 }) {
   const storageKey = generateStorageKey({ key: btnText });
-  const location = window.location.pathname;
+  const location = useLocation();
   const hasChildren = childOptions.length > 0;
   const hasVisibleChildren = hasVisibleOptions(user, childOptions);
   const { isExpanded, setIsExpanded } = useIsExpanded({
     storageKey,
     hasVisibleChildren,
     childOptions,
-    location,
+    location: location.pathname,
   });
 
   if (hidden) return null;
@@ -43,9 +43,10 @@ export default function MenuOption({
   }
 
   const isActive = hasChildren
-    ? (!isExpanded && childOptions.some((child) => child.href === location)) ||
-      location === href
-    : location === href;
+    ? (!isExpanded &&
+        childOptions.some((child) => child.href === location.pathname)) ||
+      location.pathname === href
+    : location.pathname === href;
 
   const handleClick = (e) => {
     if (hasChildren) {