SidebarSlider plugin - slide your sidebar!

I agree - lots of great options for a full revamp of the mobile layout and UI. I wasn’t thinking this tweak was that ambitious is all, so was writing with that in mind.

A full UI revamp (both desktop and mobile) would be great though. I have my node base TW as a webapp and it gets a guaranteed edit daily (wordle emoji grid), and always feels a tad clunky

1 Like

Hi @BurningTreeC, Is this now replaced by YAR - yet another resizer ?
I think this now has the flexibilty I desired but I still search a way to implement a left sidebar.

I know work has been done to make the hamburger (the button that toggles the sidebar’s visibility) into a side button, but is it possible to make an option for this in themetweaks to toggle if it should be used over the default option, or possibly the ability to disable it on mobile and use the default style of button?

i do like how it also respects which side you choose to have the sidebar on though, I did a similar function with my attempt at a left sidebar plugin, but it just inverts the hamburger and moves it to the left at the same height and padding as it was on the right.

Easy-peasy. But what you gonna do without a sidebar?

I dunno.

I mean to use the baked in button, as I use JD’s mobile plugin :grin: I would imagine the checkbox to toggle if it should be used would reenable the default style, no?

1 Like

Take a look at TiddlyTools/Slidebars, which gives you the ability to create as many general-purpose “Slidebars” as you like. Each slidebar appears as a button or icon and has a definition tiddler that lets you specify where that slidebar button should appear, the dimensions of the slidebar “panel”, how it slides (from the left, right, top or bottom), and what the slidebar content should display.

Examples of slidebars appear on TiddlyTools.com along the right edge of the window, and includes definitions for a sliding SideBar, as well as a sliding $:/ControlPanel, a sliding TiddlyTools Catalog and a sliding TiddlyTools Help panel.

Note that the TiddlyTools/Slidebars also requires TiddlyTools/Slidebars/PageTemplate, which is responsible for rendering the slidebars in the TiddlyWiki page template.

Let me know what you think.

enjoy,
-e

3 Likes

I may be misunderstanding how to use it, as i only see there is the ability to pin it above the demo tiddler…
EDIT: oh I see, onHover of the icons on the far right will show different modals such as the cotrol panel and slidebar demo, and clicking the icons swap them out.

I think it’s a nice UI feature, but I don’t believe I have a usecase for this, so it would be wasted on me. I will say once I figured out what was going on, I did like the idea of togglable sidebars, it reminds me of earlier plans I made for making a desktop and mobile theme, where the bottom toolbar in mobile (like the one seen in JD’s mobile plugin) would be the same as the toolbar present on the left/right side of the tiddler in desktop view.

Anyhow, I’m getting off topic. I think it could prove useful for users looking for that sort of functionality :grin:

. . .

(For SidebarSlider Plugin)
Oh also! I noticed that when used on the left side with a palette that shows the divider to tabs, the divider border, wiki title, and other elements* will go through the slider’s divider.

i threw together this conditional stylesheet that resolves this, but I’m not sure if it would need to be optimized better or not.

$__themes_tiddlywiki_vanilla_metrics_sidebar-tab-divider-width.json (798 Bytes)

Hi @JanJo

Well not fully, this has some modifications specifically for the sidebar placement (it can also be placed at the left) which the YAR - yet another resizer doesn’t have

On the other hand, the YAR makes it much easier to implement custom sliders and panels

1 Like