Looking for a simple possibility to switch the sidebar from right to left and back?

[stefan_from_germany]

Hello Experts,

After reading 3 hours of topics with sidebar in it, and after trying Tutorial: a basic alternative layout from @Brian_Radspinner I am still at the beginning of my question.

I want to offer the user a simple possibility to switch the sidebar, as it is, from right to left and back. No changes to other settings of the story river it has to stay zoomin, classic or pop, whatever the user has set.
Maybe in a button within a tiddler named USER SETTINGS and each user can switch as wanted (until no reload is done of course).

Is that possible? Maybe with a really small macro or plugin. I checked also other layouts but they are overloaded with functions. I need it simple as it is.

Thank you for your support
Stefan

[Justin_H]

here, give this a try, this was given to me by another member (I think it was mario…? I’m not too sure ) awhile back.

Something to note is that you’ll need to adjust the hamburger icon, but I like to think it’s a good KISS solution

\define config() $:/config/left-sidebar

\define controls()
<h2><$link to=<<config>>>Sidebar on left</$link></h2>
<$checkbox tiddler=<<config>>  tag="$:/tags/Stylesheet"> Side bar on left</$checkbox>
\end

\define styles()
<$let sidebarwidth={{{ [{$:/state/sidebar}match[no]then[0px]] ~[{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}] }}}>
.tc-sidebar-scrollable { left:0; margin:0; }
.tc-story-river { left:<<sidebarwidth>>; padding-right:42px; }
</$let>
\end

<$list filter="[<storyTiddler>!match[]]"><<controls>></$list>
<div style={{{ [<storyTiddler>!match[]then[display:none;]] }}}><<styles>></div>

<!--
"Title"="$:/config/left-sidebar"
"Tags"="$:/tags/ControlPanel/Settings"
-->

[EricShulman]

The coding style looks like my stuff.

-e

[Justin_H]

@EricShulman

The coding style looks like my stuff.

Might have been, thinking about it- and thank you again, I found it while digging through old backups named SidebarOnLeft

[oeyoews]

Only for notebook theme

[stefan_from_germany]

Hi @Justin_H , @EricShulman ,

excellent, exactly what I was looking for.
Maybe it would be a good idea to change the code of the “hamburger icon” to toggle from left, right and off mode for the sidebar. Only an idea

What I was able to to was to add another icon to the menu and to change the chevrons to hide and show the side bar

\whitespace trim
<$list filter="[[$:/state/sidebar]get[text]] +[else[yes]!match[no]]" variable="ignore">
<$button set="$:/state/sidebar" setTo="no" tooltip={{$:/language/Buttons/HideSideBar/Hint}} aria-label={{$:/language/Buttons/HideSideBar/Caption}} class="tc-btn-invisible tc-hide-sidebar-btn">{{$:/core/images/chevron-up}}</$button>
</$list>
<$list filter="[[$:/state/sidebar]get[text]] +[else[yes]match[no]]" variable="ignore">
<$button set="$:/state/sidebar" setTo="yes" tooltip={{$:/language/Buttons/ShowSideBar/Hint}} aria-label={{$:/language/Buttons/ShowSideBar/Caption}} class="tc-btn-invisible tc-show-sidebar-btn">{{$:/core/images/chevron-down}}</$button>
</$list>

<$tiddler tiddler="$:/config/left-sidebar">
<$button actions="""<$action-listops $tags="+[toggle[$:/tags/Stylesheet]]"/>""" tooltip="Toggle sidebar left/right" class="tc-btn-invisible tc-hide-sidebar-btn">
<$list filter="[{!!title}tag[$:/tags/Stylesheet]]" emptyMessage={{$:/core/images/chevron-left}}>{{$:/core/images/chevron-right}}</$list>
</$button>
</$tiddler>

<!--
name : $:/core/ui/TopBar/menu
tags : $:/tags/TopRightBar
-->

Thank you so far
Stefan

[Justin_H]

So, been a minute since I replied to this thread, but I finally finished my plugin for this specific feature, hamburger button and all!

$__plugins_tuna_sidebar-placement.json (6.2 KB)

Edit: Did not think about fluid-fixed, so this will likely be updated in the near future.

[QLXR]

i am new to Tiddly, sorry to ask, but where to put those code? create a new tiddler?

[Justin_H]

welcome to tiddlywiki then

well, Instead of making a new tiddler, I would recommend clicking on the link in my latest reply, it should download all the needed tiddlers

https://talk.tiddlywiki.org/uploads/short-url/8Sy9aJXjIpqdOn9joenfYaOUnaD.json