Merge pull request #60 from the-collab-lab/ec-issue-29-bug-fix

Ec issue #29 bug fix - Lists in the Nav Bar throw error when local storage is empty

src/components/NavigationBarSingleList.jsx

@@ -22,16 +22,19 @@ export function NavigationBarSingleList({
  window.location.pathname.substring(
  window.location.pathname.lastIndexOf('/') + 1,
  ) === 'list';
- const localStorageListName = localStorage
- .getItem('tcl-shopping-list-path')
- .substring(
- localStorage.getItem('tcl-shopping-list-path').lastIndexOf('/') + 1,
- );
+
+ const localStorageListName =
+ localStorage
+ ?.getItem('tcl-shopping-list-path')
+ ?.substring(
+ localStorage.getItem('tcl-shopping-list-path').lastIndexOf('/') + 1,
+ ) || '';
 
  return (
  <li
- className={`flex-grow justify-between xsm:px-2 sm:pl-4 mx-1 h-12 xsm:bg-appBg sm:bg-list rounded-lg shadow-sm mt-4 hover:bg-[#EBF5FF] hover:bg-opacity-85 ${windowLocationListPath && localStorageListName === name ? 'bg-[#EBF5FF] bg-opacity-85' : null}`}
+ className={`flex-grow justify-between px-6 h-12 bg-list rounded-lg shadow-sm mt-4 hover:bg-[#ebf5ff] hover:bg-opacity-85 ${windowLocationListPath && localStorageListName === name ? 'bg-[#ebf5ff] bg-opacity-85' : null}`}
  >
+ {/*The above hex code (#ebf5ff) only worked in the ternary operator in lowercase format, not uppercase.*/}
  {/* Using Link instead of button */}
  <Link
  to="/list"
@@ -48,5 +51,3 @@ export function NavigationBarSingleList({
  </li>
  );
 }
-
-// <... className={`flex items-center space-x-2 px-4 py-5 transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110 border-l-4 border-white ${window.location.pathname === '/' ? 'border-red-200' : ''}`}>