Simplified how NavOption are declared

src/components/PanelComponents/NavOption.tsx

@@ -22,42 +22,25 @@ export default function NavOption(props: NavOptionProps): JSX.Element {
     props.border ? border : ""
   } ${isActive ? divActive : ""}`;
 
-  if (props.icon) {
+  return (
-    if (props.reduced) {
+    <Link href={props.url} passHref>
-      return (
+      <div
-        <Link href={props.url} passHref>
+        onClick={props.onClick}
-          <div onClick={props.onClick} className={`grid ${divCommon}`}>
+        className={`grid grid-flow-col grid-cols-[auto] auto-cols-fr justify-center ${
-            <span className="place-self-center material-icons mt-[.1em]">
+          props.icon ? "text-left" : "text-center"
-              {props.icon}
+        } ${divCommon}`}
-            </span>
+      >
-          </div>
+        {props.icon && (
-        </Link>
+          <span className="material-icons mt-[.1em]">{props.icon}</span>
-      );
+        )}
-    } else {
+
-      return (
+        {!props.reduced && (
-        <Link href={props.url} passHref>
+          <div>
-          <div
-            onClick={props.onClick}
-            className={`grid grid-cols-[auto_1fr] text-left ${divCommon}`}
-          >
-            <span className="material-icons mt-[.1em]">{props.icon}</span>
             <h3 className="text-2xl">{props.title}</h3>
             {props.subtitle && <p className="col-start-2">{props.subtitle}</p>}
           </div>
-        </Link>
+        )}
-      );
+      </div>
-    }
+    </Link>
-  } else {
+  );
-    return (
-      <Link href={props.url} passHref>
-        <div
-          onClick={props.onClick}
-          className={`grid text-center ${divCommon}`}
-        >
-          <h3 className="text-2xl">{props.title}</h3>
-          {props.subtitle && <p>{props.subtitle}</p>}
-        </div>
-      </Link>
-    );
-  }
 }