From 28f86fa2d09342959a71ec209ea3ba3963d1fecc Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Fri, 11 Feb 2022 14:09:54 -0800
Subject: [PATCH] Fix sidebar item hide prop

---
 src/components/layout/Sidebar.tsx | 22 +++++++++++-----------
 src/components/layout/styled.tsx  |  4 ++--
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index d950f7e..9f8fc99 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -153,7 +153,7 @@ const Sidebar = ({
                         history.push('/');
                       }
                     }}
-                    hide={!config.lookAndFeel.sidebar.selected.includes('dashboard')}
+                    $show={config.lookAndFeel.sidebar.selected.includes('dashboard')}
                   >
                     {t('Dashboard')}
                   </SidebarNavItem>
@@ -168,7 +168,7 @@ const Sidebar = ({
                         history.push('/nowplaying');
                       }
                     }}
-                    hide={!config.lookAndFeel.sidebar.selected.includes('nowplaying')}
+                    $show={config.lookAndFeel.sidebar.selected.includes('nowplaying')}
                   >
                     {t('Now Playing')}
                   </SidebarNavItem>
@@ -184,7 +184,7 @@ const Sidebar = ({
                         history.push('/starred');
                       }
                     }}
-                    hide={!config.lookAndFeel.sidebar.selected.includes('favorites')}
+                    $show={config.lookAndFeel.sidebar.selected.includes('favorites')}
                   >
                     {t('Favorites')}
                   </SidebarNavItem>
@@ -200,7 +200,7 @@ const Sidebar = ({
                           history.push('/library/music');
                         }
                       }}
-                      hide={!config.lookAndFeel.sidebar.selected.includes('songs')}
+                      $show={config.lookAndFeel.sidebar.selected.includes('songs')}
                     >
                       Songs
                     </SidebarNavItem>
@@ -216,7 +216,7 @@ const Sidebar = ({
                         history.push('/library/album');
                       }
                     }}
-                    hide={!config.lookAndFeel.sidebar.selected.includes('albums')}
+                    $show={config.lookAndFeel.sidebar.selected.includes('albums')}
                   >
                     {t('Albums')}
                   </SidebarNavItem>
@@ -231,7 +231,7 @@ const Sidebar = ({
                         history.push('/library/artist');
                       }
                     }}
-                    hide={!config.lookAndFeel.sidebar.selected.includes('artists')}
+                    $show={config.lookAndFeel.sidebar.selected.includes('artists')}
                   >
                     {t('Artists')}
                   </SidebarNavItem>
@@ -246,7 +246,7 @@ const Sidebar = ({
                         history.push('/library/genre');
                       }
                     }}
-                    hide={!config.lookAndFeel.sidebar.selected.includes('genres')}
+                    $show={config.lookAndFeel.sidebar.selected.includes('genres')}
                   >
                     {t('Genres')}
                   </SidebarNavItem>
@@ -263,7 +263,7 @@ const Sidebar = ({
                             history.push('/library/folder');
                           }
                         }}
-                        hide={!config.lookAndFeel.sidebar.selected.includes('folders')}
+                        $show={config.lookAndFeel.sidebar.selected.includes('folders')}
                       >
                         {t('Folders')}
                       </SidebarNavItem>
@@ -280,7 +280,7 @@ const Sidebar = ({
                         history.push('/config');
                       }
                     }}
-                    hide={!config.lookAndFeel.sidebar.selected.includes('config')}
+                    $show={config.lookAndFeel.sidebar.selected.includes('config')}
                   >
                     {t('Config')}
                   </SidebarNavItem>
@@ -294,7 +294,7 @@ const Sidebar = ({
                         handleToggle();
                       }
                     }}
-                    hide={!config.lookAndFeel.sidebar.selected.includes('collapse')}
+                    $show={config.lookAndFeel.sidebar.selected.includes('collapse')}
                   >
                     {expand ? t('Collapse') : t('Expand')}
                   </SidebarNavItem>
@@ -310,7 +310,7 @@ const Sidebar = ({
                           history.push('/playlist');
                         }
                       }}
-                      hide={!config.lookAndFeel.sidebar.selected.includes('playlists')}
+                      $show={config.lookAndFeel.sidebar.selected.includes('playlists')}
                     >
                       {t('Playlists')}
                     </SidebarNavItem>
diff --git a/src/components/layout/styled.tsx b/src/components/layout/styled.tsx
index 42f6052..413ed00 100644
--- a/src/components/layout/styled.tsx
+++ b/src/components/layout/styled.tsx
@@ -191,10 +191,10 @@ export const FixedSidebar = styled(Sidebar)<{ font: string; $titleBar: string }>
   }
 `;
 
-export const SidebarNavItem = styled(Nav.Item)<{ hide?: boolean }>`
+export const SidebarNavItem = styled(Nav.Item)<{ $show: boolean }>`
   padding-right: 5px;
   user-select: none;
-  display: ${(props) => (props.hide ? 'none' : 'block')};
+  display: ${(props) => (props.$show ? 'block' : 'none')};
 
   a {
     color: ${(props) => props.theme.colors.layout.sideBar.button.color} !important;