From 5c7e2cc7af4aab056ea59627fdbf5abf40bd70a8 Mon Sep 17 00:00:00 2001
From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com>
Date: Thu, 28 Oct 2021 22:19:35 +0300
Subject: [PATCH] Adjust nav style

---
 frontend/components/layout.tsx                |  52 +++++++++++++-----
 .../img/nav-icons/{sr.png => badges.png}      | Bin
 .../img/nav-icons/{builds.png => browse.png}  | Bin
 .../{tournaments.png => rankings.png}         | Bin
 .../img/nav-icons/{t.png => rotations.png}    | Bin
 .../img/nav-icons/{xsearch.png => top500.png} | Bin
 6 files changed, 38 insertions(+), 14 deletions(-)
 rename frontend/public/img/nav-icons/{sr.png => badges.png} (100%)
 rename frontend/public/img/nav-icons/{builds.png => browse.png} (100%)
 rename frontend/public/img/nav-icons/{tournaments.png => rankings.png} (100%)
 rename frontend/public/img/nav-icons/{t.png => rotations.png} (100%)
 rename frontend/public/img/nav-icons/{xsearch.png => top500.png} (100%)

diff --git a/frontend/components/layout.tsx b/frontend/components/layout.tsx
index d31644374..ad903acf4 100644
--- a/frontend/components/layout.tsx
+++ b/frontend/components/layout.tsx
@@ -8,14 +8,22 @@ import { Avatar } from "./common/Avatar";
 import { Button } from "./common/Button";
 
 const navItems = [
-  "builds",
-  "gear",
-  "analyzer",
-  "calendar",
-  "battle",
-  "leaderboards",
-  "planner",
-  "links",
+  {
+    title: "builds",
+    items: ["browse", "gear", "analyzer"],
+  },
+  {
+    title: "play",
+    items: ["calendar", "battle", "Rankings"],
+  },
+  {
+    title: "tools",
+    items: ["planner", "rotations", "top 500"],
+  },
+  {
+    title: "misc",
+    items: ["badges", "links"],
+  },
 ];
 
 export function Layout({ children }: { children: ReactNode }) {
@@ -38,10 +46,15 @@ export function Layout({ children }: { children: ReactNode }) {
       <S.Nav>
         <S.NavItems>
           {navItems.map((navItem) => (
-            <a key={navItem} href="/">
-              <img src={`/img/nav-icons/${navItem}.png`} />
-              {navItem}
-            </a>
+            <S.NavItemColumn>
+              <S.NavGroupTitle>{navItem.title}</S.NavGroupTitle>
+              {navItem.items.map((item) => (
+                <a key={item} href="/">
+                  <img src={`/img/nav-icons/${item.replace(" ", "")}.png`} />
+                  {item}
+                </a>
+              ))}
+            </S.NavItemColumn>
           ))}
         </S.NavItems>
       </S.Nav>
@@ -82,9 +95,14 @@ const S = {
   NavItems: styled.div`
     display: flex;
     justify-content: center;
-    gap: 2rem;
+    gap: 3rem;
     grid-template-columns: repeat(4, 100px);
     padding: 1rem 0;
+  `,
+  NavItemColumn: styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
 
     > a {
       display: flex;
@@ -100,9 +118,15 @@ const S = {
     // + if not using next image do some adjusting of the image size, format etc.
     > a > img {
       width: 1.75rem;
-      margin-right: 0.2rem;
+      margin-right: 0.5rem;
     }
   `,
+  NavGroupTitle: styled.div`
+    text-transform: uppercase;
+    font-weight: bold;
+    color: var(--colors-text-lighter);
+    font-size: 0.75rem;
+  `,
   Main: styled.main`
     padding-top: 2rem;
   `,
diff --git a/frontend/public/img/nav-icons/sr.png b/frontend/public/img/nav-icons/badges.png
similarity index 100%
rename from frontend/public/img/nav-icons/sr.png
rename to frontend/public/img/nav-icons/badges.png
diff --git a/frontend/public/img/nav-icons/builds.png b/frontend/public/img/nav-icons/browse.png
similarity index 100%
rename from frontend/public/img/nav-icons/builds.png
rename to frontend/public/img/nav-icons/browse.png
diff --git a/frontend/public/img/nav-icons/tournaments.png b/frontend/public/img/nav-icons/rankings.png
similarity index 100%
rename from frontend/public/img/nav-icons/tournaments.png
rename to frontend/public/img/nav-icons/rankings.png
diff --git a/frontend/public/img/nav-icons/t.png b/frontend/public/img/nav-icons/rotations.png
similarity index 100%
rename from frontend/public/img/nav-icons/t.png
rename to frontend/public/img/nav-icons/rotations.png
diff --git a/frontend/public/img/nav-icons/xsearch.png b/frontend/public/img/nav-icons/top500.png
similarity index 100%
rename from frontend/public/img/nav-icons/xsearch.png
rename to frontend/public/img/nav-icons/top500.png