From c40e232ac67e7bc1ced3775060beb835efff46b9 Mon Sep 17 00:00:00 2001
From: Dan Ribbens <dan.ribbens@gmail.com>
Date: Mon, 12 Sep 2022 13:51:24 -0400
Subject: [PATCH] feat: hide nav labels with no un-grouped collections

---
 src/admin/components/elements/Nav/index.scss   |  1 +
 src/admin/components/elements/Nav/index.tsx    |  6 +++++-
 .../components/elements/NavGroup/index.scss    | 18 ++++++++++++++++--
 test/admin/config.ts                           | 14 ++++++++++++++
 4 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/src/admin/components/elements/Nav/index.scss b/src/admin/components/elements/Nav/index.scss
index 12ff494e36..1f77ed993e 100644
--- a/src/admin/components/elements/Nav/index.scss
+++ b/src/admin/components/elements/Nav/index.scss
@@ -98,6 +98,7 @@
 
   nav {
     margin: base(.25) 0 $baseline;
+    width: 100%;
 
     a {
       position: relative;
diff --git a/src/admin/components/elements/Nav/index.tsx b/src/admin/components/elements/Nav/index.tsx
index 046e6acfe8..abadb8c4bd 100644
--- a/src/admin/components/elements/Nav/index.tsx
+++ b/src/admin/components/elements/Nav/index.tsx
@@ -89,7 +89,9 @@ const DefaultNav = () => {
         </header>
         <div className={`${baseClass}__wrap`}>
           {Array.isArray(beforeNavLinks) && beforeNavLinks.map((Component, i) => <Component key={i} />)}
-          <span className={`${baseClass}__label`}>Collections</span>
+          { groupedCollections[''].length > 0 && (
+            <span className={`${baseClass}__label`}>Collections</span>
+          ) }
           <nav className={`${baseClass}__collections`}>
             {Object.entries(groupedCollections)
               .map(([group, groupCollections]) => (
@@ -122,7 +124,9 @@ const DefaultNav = () => {
           </nav>
           {(globals && globals.length > 0) && (
             <React.Fragment>
+              { groupedGlobals[''].length > 0 && (
               <span className={`${baseClass}__label`}>Globals</span>
+              ) }
               <nav className={`${baseClass}__globals`}>
                 {Object.entries(groupedGlobals)
                   .map(([group, globalsGroup]) => (
diff --git a/src/admin/components/elements/NavGroup/index.scss b/src/admin/components/elements/NavGroup/index.scss
index e79fa08b9e..3675558ed4 100644
--- a/src/admin/components/elements/NavGroup/index.scss
+++ b/src/admin/components/elements/NavGroup/index.scss
@@ -1,20 +1,34 @@
 @import '../../../scss/styles.scss';
 
 .nav-group {
+  width: 100%;
+
   &__toggle {
     cursor: pointer;
-    color: var(--theme-elevation-600);
+    color: var(--theme-elevation-400);
     background: transparent;
     padding-left: 0;
     border: 0;
     margin-top: base(.25);
+    width: 100%;
+    text-align: left;
+    display: flex;
+    align-items: center;
+
+    &:hover {
+      color: var(--theme-elevation-1000);
+      .stroke {
+        stroke: var(--theme-elevation-1000);
+      }
+    }
   }
 
   &__indicator {
     transform: rotate(.5turn);
+    margin-left: auto;
 
     .stroke {
-      stroke: var(--theme-elevation-600);
+      stroke: var(--theme-elevation-400);
     }
   }
 
diff --git a/test/admin/config.ts b/test/admin/config.ts
index 92d2e4463e..6743006e71 100644
--- a/test/admin/config.ts
+++ b/test/admin/config.ts
@@ -48,8 +48,19 @@ export default buildConfig({
     },
   },
   collections: [
+    {
+      slug: 'users',
+      admin: {
+        group: 'One',
+      },
+      auth: true,
+      fields: [],
+    },
     {
       slug,
+      admin: {
+        group: 'One',
+      },
       fields: [
         {
           name: 'title',
@@ -113,6 +124,9 @@ export default buildConfig({
   globals: [
     {
       slug: globalSlug,
+      admin: {
+        group: 'Group',
+      },
       fields: [
         {
           name: 'title',