sidebar.css

/* Auto Hide Tree Style Tab */

/* Hide splitter, when using Tree Style Tab. This rule removes the sidebar splitter when Tree Style Tab is active. */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] + #sidebar-splitter {
  display: none !important;
}

/* Hide sidebar header, when using Tree Style Tab. This rule hides the header of the sidebar when Tree Style Tab is active. */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
  visibility: collapse;
}

/* Shrink sidebar until hovered, when using Tree Style Tab. */
#sidebar-box:not([sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]) {
  min-width: var(--wide-tab-width) !important;  /* Set a minimum width for the sidebar */
  max-width: none !important;  /* Remove any maximum width restrictions */
}

/* Configure sidebar appearance when Tree Style Tab is active. */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] {
  overflow: hidden !important;  /* Prevents overflow */
  position: relative !important;  /* Positions the sidebar relative to the parent */
  transition: all 200ms !important;  /* Smooth transition for changes */
  min-width: var(--thin-tab-width) !important;  /* Set a minimum width for the sidebar */
  max-width: var(--thin-tab-width) !important;  /* Set a maximum width for the sidebar */
  z-index: 3;  /* Layering order to ensure visibility */
}

/* Expand the sidebar when hovered. */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover,
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar {
  transition: all 200ms !important;  /* Smooth transition for changes */
  min-width: var(--wide-tab-width) !important;  /* Expand the sidebar width */
  max-width: var(--wide-tab-width) !important;  /* Expand the sidebar width */
  margin-right: calc((var(--wide-tab-width) - var(--thin-tab-width)) * -1) !important;  /* Adjust positioning */
  z-index: 3;  /* Layering order to ensure visibility */
}

/* Define custom width variables */
:root {
  --thin-tab-width: 35px;  /* Width of the sidebar when not hovered */
  --wide-tab-width: 250px;  /* Width of the sidebar when hovered */
}

/* Auto Hide Tree Style Tab Finished */