From 872e4d2cc7afd6bb5390833885a89fb564e464d7 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Fri, 21 Aug 2020 11:12:42 +0200
Subject: [PATCH] Nav menu shadowed (#3468)

* Nav menu shadowed

* Simplify
---
 packages/apps/src/Menu/Grouping.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/apps/src/Menu/Grouping.tsx b/packages/apps/src/Menu/Grouping.tsx
index e4d016a132..370fa4d282 100644
--- a/packages/apps/src/Menu/Grouping.tsx
+++ b/packages/apps/src/Menu/Grouping.tsx
@@ -14,6 +14,9 @@ interface Props extends Group {
   className?: string;
 }
 
+const SHA_COL = 'rgba(34, 36, 38, 0.12)';
+const SHA_OFF = '5px';
+
 function Grouping ({ className = '', name, routes }: Props): React.ReactElement<Props> {
   if (routes.length === 1) {
     return (
@@ -57,6 +60,7 @@ export default React.memo(styled(Grouping)`
 
   .groupMenu {
     border-radius: 0 0 0.25rem 0.25rem;
+    box-shadow: 0 ${SHA_OFF} ${SHA_OFF} -${SHA_OFF} , ${SHA_OFF} 0 ${SHA_OFF} -${SHA_OFF} ${SHA_COL}, -${SHA_OFF} 0 ${SHA_OFF} -${SHA_OFF} ${SHA_COL};
     display: none;
     margin: 0;
     overflow: hidden;
@@ -76,7 +80,11 @@ export default React.memo(styled(Grouping)`
   &:hover {
     .groupHdr,
     .groupMenu li {
-      background: rgba(255, 255, 255, 0.5);
+      background: rgba(255, 255, 255, 0.85);
+    }
+
+    .groupHdr {
+      box-shadow: 0 -${SHA_OFF} ${SHA_OFF} -${SHA_OFF} ${SHA_COL}, ${SHA_OFF} 0 ${SHA_OFF} -${SHA_OFF} ${SHA_COL}, -${SHA_OFF} 0 ${SHA_OFF} -${SHA_OFF} ${SHA_COL};
     }
 
     .groupMenu {