feat(snippets): add a New Hover Panel (#778)

resources/snippets.json

@@ -62,9 +62,15 @@
   {
     "title": "Hover Panels",
     "description": "Have your playlist, right sidebar, and controls bar be hoverable.",
-    "code": ".Root__nav-bar {\n  position: absolute;\n  width: 35px;\n  opacity: 0;\n  bottom: 0;\n  left: 0;\n  top: 0;\n  z-index: 12;\n  transition: width 400ms, opacity 250ms ease-out;\n}\n.main-yourLibraryX-entryPoints {\n  background: var(--spice-sidebar);\n}\n.Root__nav-bar:hover {\n  width: 250px;\n  opacity: 1;\n  transition: width 250ms, opacity 400ms ease-in;\n}\n.LayoutResizer__resize-bar {\n  cursor: none;\n}\n.Root__top-bar {\n  opacity: 0;\n  transition: visibility 5s, opacity 1s linear;\n}\n.Root__top-bar:hover {\n  transition-delay: 0.5s;\n  opacity: 1;\n  transition: visibility 5s, opacity 0.5s linear;\n}\n.main-topBar-container {\n  -webkit-padding-end: 32px;\n  padding: 16px 85px;\n  padding-inline-end: 32px;\n  max-width: none;\n}\n.main-buddyFeed-container:hover {\n  width: 350px !important;\n  opacity: 1 !important;\n  transition: width 250ms, opacity 400ms ease-in;\n}\n.main-buddyFeed-container {\n  position: absolute;\n  right: -5px;\n  top: 0;\n  bottom: 84px;\n  width: 50px !important;\n  opacity: 0 !important;\n  transition: width 400ms, opacity 250ms ease-out;\n}\n.main-trackList-trackListHeader {\n  top: 0 !important;\n}\n.main-yourLibraryX-navItem {\n  overflow: hidden;\n}\n.main-coverSlotCollapsed-navAltContainer {\n  overflow: visible;\n}\n.LayoutResizer__resize-bar {\n  display: none;\n}\n:root {\n  --left-sidebar-width: 35px !important;\n  --right-sidebar-width: 50px !important;\n}",
+    "code": ".Root__nav-bar {\n  position: absolute;\n  width: 35px;\n  opacity: 0;\n  bottom: 0;\n  left: 0;\n  top: 0;\n  z-index: 12;\n  transition: width 400ms, opacity 250ms ease-out;\n}\n.main-yourLibraryX-entryPoints {\n  background: var(--spice-sidebar);\n}\n.Root__nav-bar:hover {\n  width: 250px;\n  opacity: 1;\n  transition: width 250ms, opacity 400ms ease-in;\n}\n.LayoutResizer__resize-bar {\n  cursor: none;\n}\n.Root__top-bar {\n  opacity: 0;\n  transition: visibility 5s, opacity 1s linear;\n}\n.Root__top-bar:hover {\n  transition-delay: 0.5s;\n  opacity: 1;\n  transition: visibility 5s, opacity 0.5s linear;\n}\n.main-topBar-container {\n  -webkit-padding-end: 32px;\n  padding: 16px 85px;\n  padding-inline-end: 32px;\n  max-width: none;\n}\n.main-buddyFeed-container:hover {\n  width: 350px !important;\n  opacity: 1 !important;\n  transition: width 250ms, opacity 400ms ease-in;\n}\n.main-buddyFeed-container {\n  position: absolute;\n  right: -5px;\n  top: 0;\n  bottom: 84px;\n  width: 50px !important;\n  opacity: 0 !important;\n  transition: width 400ms, opacity 250ms ease-out;\n}\n.main-trackList-trackListHeader {\n  top: 0 !important;\n}\n.main-yourLibraryX-navItem {\n  overflow: hidden;\n}\n.main-coverSlotCollapsed-navAltContainer {\n  overflow: visible;\n}\n.LayoutResizer__resize-bar {\n  display: none;\n}\n:root {\n  --left-sidebar-width: 35px !important;\n  --right-sidebar-width: 50px !important;\n  margin-left:-8px;\n}",
     "preview": "resources/assets/snippets/hover-panels.png"
   },
+  {
+    "title": "New Hover Panel",
+    "description": "A New Hover Panel that servers the same purpose as the legacy 'Hover Panels', but only for the left sidebar and without modifying any other elements.",
+    "code": "#Desktop_LeftSidebar_Id {\n  position: absolute;\n  left: -280px;\n  width: 288px;\n  height: 100%;\n  background-color: black;\n  opacity: 0;\n  visibility: visible;\n  transition: left 0.5s ease, opacity 0.5s ease;\n  z-index: 12;\n}\n#Desktop_LeftSidebar_Id:hover {\n  left: 0;\n  opacity: 1;\n  visibility: visible;\n}\n:root {\n  margin-left: -8px;\n}",
+    "preview": "resources/assets/snippets/new-hover-panel.png"
+  },
   {
     "title": "Fix progress bar displacement",
     "description": "Fixes the progress bar displacement for a few themes. Better version of @CharlieS1103 Snippet",