From b55f3a694652895ffee10eb454c2e8b77ed75736 Mon Sep 17 00:00:00 2001
From: Deluan <deluan@navidrome.org>
Date: Sun, 12 Sep 2021 21:24:07 -0400
Subject: [PATCH] Add paddingBottom to the whole sidebar menu, to avoid
 playlists to be covered by the player

---
 ui/src/layout/Menu.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/ui/src/layout/Menu.js b/ui/src/layout/Menu.js
index 23adb8d49..db5b82472 100644
--- a/ui/src/layout/Menu.js
+++ b/ui/src/layout/Menu.js
@@ -21,6 +21,7 @@ const useStyles = makeStyles((theme) => ({
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.leavingScreen,
     }),
+    paddingBottom: (props) => (props.addPadding ? '80px' : '20px'),
   },
   open: {
     width: 240,
@@ -49,7 +50,8 @@ const translatedResourceName = (resource, translate) =>
 const Menu = ({ dense = false }) => {
   const open = useSelector((state) => state.admin.ui.sidebarOpen)
   const translate = useTranslate()
-  const classes = useStyles()
+  const queue = useSelector((state) => state.player?.queue)
+  const classes = useStyles({ addPadding: queue.length > 0 })
   const resources = useSelector(getResources)
 
   // TODO State is not persisted in mobile when you close the sidebar menu. Move to redux?