Change sidebar toggle position about docsify-themeable HOT 3 CLOSED

Hi @marcobambini.

Changing the sidebar toggle position/behavior to match docsify's "Vue" theme isn't easily done with CSS custom properties, but you can always write your own custom CSS to override the docsify-themeable CSS.

Include this CSS in a <style> tag after the theme <link>:

.sidebar-toggle .sidebar-toggle-button {
    top: auto;
    bottom: 0;
    transition: transform var(--sidebar-transition-duration) ease-out;
}

body.close .sidebar-toggle .sidebar-toggle-button {
    transform: translate(calc(0px - var(--sidebar-width)));
}


@media (min-width: 48em) {
    .sidebar-toggle .sidebar-toggle-button {
        transform: translate(calc(0px - var(--sidebar-width)));
    }

    body.close .sidebar-toggle .sidebar-toggle-button {
        transform: translate(0);
    }
}

FWIW, the position of the sidebar toggle was changed for docisfy-themeable to address a handful of issues with docsify's "bottom-left" positioning. Specifically, the toggle is more discoverable, won't overlap sidebar content (when visible) or markdown content (when sidebar is hidden), and wont cause iOS's bottom-navigation bar to appear when tapped (thereby requiring two taps to actually toggle the sidebar).

Hope this helps.

from docsify-themeable.

It helps a lot.
Thank you very much!

from docsify-themeable.

The above no longer works. Use this instead:

.sidebar-toggle {
	background-color: unset;
	position: fixed !important;
	top: 0 !important;
	bottom: auto !important;
	padding: 10px 10px 10px 10px !important;
}

@media screen and (max-width: 768px) {
	.markdown-section {
		padding: 16px 16px 16px 36px !important;
	}
}

from docsify-themeable.