From fa9fabeae90c72fbe340fcb2c68765f1d7bc5c59 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sun, 20 Feb 2022 15:03:05 +0200
Subject: [PATCH] Grayscale disabled nav icons Closes #740

---
 app/components/Layout/MobileNav.tsx | 12 +++++++-----
 app/components/Layout/index.tsx     | 13 ++++++++-----
 app/constants.ts                    | 23 +++++++++++++++++++----
 app/styles/layout.css               |  8 ++++++++
 package.json                        |  1 +
 5 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/app/components/Layout/MobileNav.tsx b/app/components/Layout/MobileNav.tsx
index 8954fc734..312310bd7 100644
--- a/app/components/Layout/MobileNav.tsx
+++ b/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>
diff --git a/app/components/Layout/index.tsx b/app/components/Layout/index.tsx
index ceabb55d1..75e10ab7b 100644
--- a/app/components/Layout/index.tsx
+++ b/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>
diff --git a/app/constants.ts b/app/constants.ts
index 5dd687049..d025152a6 100644
--- a/app/constants.ts
+++ b/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;
 
diff --git a/app/styles/layout.css b/app/styles/layout.css
index 9eea67c33..c25bbbc48 100644
--- a/app/styles/layout.css
+++ b/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;
diff --git a/package.json b/package.json
index 06ab9d3b4..9f5ff626f 100644
--- a/package.json
+++ b/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",