feat(snippets): add a Dynamic Left Sidebar (#791)

* feat: add snippets to Hide `Open miniPlayer`, `Full screen` buttons. * feat: update snippets preview of `Hide Open miniPlayer`, ` Hide Full screen` buttons * chore: lint with biome * fix(snippets): fix left margin of `Hover Panels` Now all sides have equal margins. * feat(snippets): add a `New Hover Panel` 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. * feat(snippets): add a `Dynamic Left Sidebar` Makes the left sidebar dynamic, so it only shows when you hover over it and pushes the main content to the right. * fix(snippets): fix padding on the left * fix(snippets): refine padding animation * Update Dynamic-Left-Sidebar.gif * feat(snippets): disable draggle opt * fix(snippets): fix custom app icon&text glitch during animation * Update Dynamic-Left-Sidebar.gif * fix(snippets): update description --------- Co-authored-by: ririxi <[email protected]> Co-authored-by: Isaac <[email protected]>
spicetify · Jul 5, 2024 · 28ae0c6 · 28ae0c6
1 parent 43dab98
commit 28ae0c6
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/resources/assets/snippets/Dynamic-Left-Sidebar.gif b/resources/assets/snippets/Dynamic-Left-Sidebar.gif
diff --git a/resources/snippets.json b/resources/snippets.json
@@ -71,6 +71,12 @@
     "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": "Dynamic Left Sidebar",
+    "description": "Make the left sidebar dynamic, so it only shows when you hover over it and pushes the main content to the right.",
+    "code": "#Desktop_LeftSidebar_Id {\n  width: 0px;\n  transition: width 0.5s ease, padding-left 0.5s ease;\n  z-index: 12;\n}\n#Desktop_LeftSidebar_Id:hover {\n  padding-left: 8px;\n  width: 280px;\n}\n:root {\n  margin-left: -8px;\n}\nsvg[data-encore-id='icon']{\n  overflow: visible;\n}\nspan{\n  white-space: nowrap;\n}",
+    "preview": "resources/assets/snippets/Dynamic-Left-Sidebar.gif"
+  },
   {
     "title": "Hide Made For YOU",
     "description": "Hide the 'Made For YOU' section on the home page.",