#side-nav resize handle

[r0ckarong]

I wanted to have a resize handle for my theme because I found it wasn't immediately obvious that the sidebar could be resized and the 1px width was very easy to miss with the mouse.

After banging my head against it for a while because of the HTML limitations of Doxygen (whatever I added moved the decorative lines for the doc content header or jumped around), I finally found something that looks good enough and works as intended.

The handle dots are to the left of the actual handle line which is accented by a very very light shadow that gives an idea where the draggable area is. The handle dots are taken straight from Confluence CSS (base64 encoded png with transparent background -works in darkmode!) and set as the background image of #nav-tree.

There are some minor quirks that I haven't managed to iron out. The scrollbar is offset a little and is displayed on top of the handle icon. I think this is negligible but if someone finds a better way to do this I'm happy to learn.

/* added to :root element */
--shadow-color: #FBFBFB;

/* Add to darkmode overrides */
--shadow-color: #242424;

/* Add handle icon to resizable navtree handle */

/* This restores the padding from the original doxygen css because otherwise the alignment jumps around by the width
 * of your "shadow" drag-area when you move the handle. */
#side-nav {
  padding-right: 6px !important;
}

/* Spaces the "panel synchronization icon" a little more generously for the scroll bar */
#nav-tree img {
  margin-right: 8px;
}

/* Left border becomes the "draggable" area */
.ui-resizable-e {
  background-color: var(--page-background-color);
  border-left: 4px solid var(--shadow-color);
  border-right: 1px solid var(--separator-color);
  cursor: col-resize;
}

#nav-tree {
  scrollbar-width: thin;
  overflow-x: hidden;
  background-color: var(--page-background-color);
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAMCAQAAADitaTfAAAAFUlEQVQIW2O++j+bkWUTAwZgJiwBAB9kCOy+u0d3AAAAAElFTkSuQmCC);
  background-position: right center;
  background-repeat: no-repeat;
}

Handle:

Scrollbar visible:

Darkmode:

[jothepro]

Wow, I like that, it's beautiful & super intuitive!
Only thing that could be improved is the look on tablet (touch) devices. On touch devices doxygen by default provides a wider separator for usability:

It also seems like the nice resize handle is hidden by the enlarged separator.

[r0ckarong]

I hadn't checked for that screen size. The solution is probably a bit hack-y but it works. I just move the handle icon into the now visible and enlarged "handle" and simulate the behavior of where it was just the background for nav-tree. It should work the same. This makes it a little more complicated but this should work:

/* added to :root element */
--shadow-color: #FBFBFB;

--handle-icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAMCAQAAADitaTfAAAAFUlEQVQIW2O++j+bkWUTAwZgJiwBAB9kCOy+u0d3AAAAAElFTkSuQmCC);

/* Add to darkmode overrides */
--shadow-color: #242424;

/* Add to custom CSS */
#nav-tree img {
  margin-right: 8px;
}

#nav-tree {
  scrollbar-width: thin;
  overflow-x: hidden;
  background-color: var(--page-background-color);
}

.ui-resizable-e {
  background-color: transparent;
  border-left: 4px solid var(--shadow-color);
  border-right: 1px solid var(--separator-color);
  cursor: col-resize;
}

@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1112px)
  and (-webkit-min-device-pixel-ratio: 1) {
    #side-nav {
      padding-right: 20px !important;
    }
  .ui-resizable .ui-resizable-handle {
    background-color: var(--shadow-color);
    background-image: var(--handle-icon);
    background-repeat: no-repeat;
    background-position: right 4px center;
  }
}

@media screen and (min-width: 1024px) {
  #side-nav {
    padding-right: 6px !important;
  }
  #nav-tree {
    background-image: var(--handle-icon);
    background-repeat: no-repeat;
    background-position: right center;
  }
}

I just tested this simulating an iPad on Chrome and the sidebar disappeared because it was sized "0". The whole way that doxygen handles the calculation of the sizings via JavaScript is a bit of a mystery to me at the moment. I would just recommend sticking to Desktop with this idea. I'm open for any suggestions on how to improve this.