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

#1

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

1 Like
Workflow Customizations in TiddlyWiki
#2

here, give this a try, this was given to me by another member (I think it was mario…? I’m not too sure :sweat_smile:) 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 :grin:

\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"
-->
1 Like
#3

The coding style looks like my stuff.

-e

3 Likes
#4

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

#5

image
image2235Ă—1247 163 KB

image
image2235Ă—1247 156 KB

Only for notebook theme

#6

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 :slight_smile:

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

#7

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.

1 Like