Grayscale disabled nav icons Closes #740

app/components/Layout/MobileNav.tsx

@@ -24,20 +24,22 @@ export function MobileNav({
             </div>
             {navGroup.items.map((navItem, i) => (
               <Link
-                key={navItem}
+                key={navItem.name}
                 className={clsx("layout__mobile-nav__link", {
                   first: i === 0,
                   last: i + 1 === navGroup.items.length,
                 })}
-                to={navItem}
+                to={navItem.disabled ? "/" : navItem.name}
                 onClick={closeMenu}
                 data-cy={`mobile-nav-link-${navItem}`}
               >
                 <img
-                  className="layout__mobile-nav__link__icon"
-                  src={`/img/layout/${navItem.replace(" ", "")}.webp`}
+                  className={clsx("layout__mobile-nav__link__icon", {
+                    disabled: navItem.disabled,
+                  })}
+                  src={`/img/layout/${navItem.name.replace(" ", "")}.webp`}
                 />
-                <div>{navItem}</div>
+                <div>{navItem.name}</div>
               </Link>
             ))}
           </Fragment>

app/components/Layout/index.tsx

@@ -7,6 +7,7 @@ import { UserItem } from "./UserItem";
 import { Link } from "remix";
 import { navItems } from "~/constants";
 import { layoutIcon } from "~/utils";
+import clsx from "clsx";
 
 export const Layout = React.memo(function Layout({
   children,
@@ -45,18 +46,20 @@ export const Layout = React.memo(function Layout({
               <div className="layout__nav__column__title">{navGroup.title}</div>
               {navGroup.items.map((navItem) => (
                 <Link
-                  key={navItem}
-                  className="layout__nav__link"
-                  to={navItem}
+                  key={navItem.name}
+                  className={clsx("layout__nav__link", {
+                    disabled: navItem.disabled,
+                  })}
+                  to={navItem.disabled ? "/" : navItem.name}
                   data-cy={`nav-link-${navItem}`}
                 >
                   <img
-                    src={layoutIcon(navItem.replace(" ", ""))}
+                    src={layoutIcon(navItem.name.replace(" ", ""))}
                     className="layout__nav__link__icon"
                     width="32"
                     height="32"
                   />
-                  {navItem}
+                  {navItem.name}
                 </Link>
               ))}
             </div>

app/constants.ts

@@ -22,19 +22,34 @@ export const checkInClosesDate = (startTime: string): Date => {
 export const navItems = [
   {
     title: "builds",
-    items: ["browse", "gear", "analyzer"],
+    items: [
+      { name: "browse", disabled: true },
+      { name: "gear", disabled: true },
+      { name: "analyzer", disabled: true },
+    ],
   },
   {
     title: "play",
-    items: ["calendar", "play", "Rankings"],
+    items: [
+      { name: "calendar", disabled: true },
+      { name: "play", disabled: false },
+      { name: "rankings", disabled: true },
+    ],
   },
   {
     title: "tools",
-    items: ["planner", "rotations", "top 500"],
+    items: [
+      { name: "planner", disabled: true },
+      { name: "rotations", disabled: true },
+      { name: "top 500", disabled: true },
+    ],
   },
   {
     title: "misc",
-    items: ["badges", "links"],
+    items: [
+      { name: "badges", disabled: true },
+      { name: "links", disabled: true },
+    ],
   },
 ] as const;
 

app/styles/layout.css

@@ -91,6 +91,10 @@
   transition: 0.2s transform;
 }
 
+.layout__nav__link.disabled {
+  filter: grayscale(100%);
+}
+
 .layout__nav__link:hover {
   transform: translateX(2px);
 }
@@ -198,6 +202,10 @@
   height: 2rem;
 }
 
+.layout__mobile-nav__link__icon.disabled {
+  filter: grayscale(100%);
+}
+
 .layout__mobile-nav__links {
   display: grid;
   justify-content: center;

package.json

@@ -18,6 +18,7 @@
     "seed:reset": "npx prisma migrate reset --force --skip-generate",
     "lint:ts": "eslint . --ext .ts,.tsx",
     "lint:styles": "stylelint \"app/styles/**/*.css\"",
+    "lsf": "npm run lint:styles -- --fix",
     "prettier:check": "prettier --check .",
     "typecheck": "tsc --noEmit",
     "cy:open": "npx cypress open",