How to hide sidebar when Story River changes

#1

On small screens I want the sidebar to hide/close if the story river ($:/StoryList) changes. ie while user navigates within sidebar the sidebar remains open. When a link/navigation occurs to the river the sidebar closes.

I haven’t found an appropriate hook. tm-navigation looks promising, where I thought I might cache the river list and check upon navigation, but I suspect the list will not have been updated yet. Any other ideas?

Aside: I already have a browser startup action tiddler that hides the sidebar on startup on small screens.

Craig

1 Like
#2

That’s a cool idea, I’ve had the same experience on mobile :slight_smile: would be interested in knowing how to achieve the same thing

1 Like
#3

@well-noted It would appear, but I’d like confirmation, that th-navigating hook gets triggered only when the Story River is going to be updated. With that in mind this code appears to provide the functionality:

$tw.hooks.addHook("th-navigating",function(event) {
	var screen = $tw.wiki.getTiddler("$:/info/browser/screen/width");
	if(!isNaN(screen.fields.text)) {
		var x = Number(screen.fields.text);
		if (x < 1000) {
			var tiddler = $tw.wiki.getTiddler("$:/state/sidebar");
			var newFields = {};
			newFields["text"] = "no";
			$tw.wiki.addTiddler(new $tw.Tiddler(tiddler, newFields));
		}
	}
    return event;
});

Note this is hardcoded to check the screen width of < 1000.

To implement, create a tiddler with type of application/javascript and set field module-type to startup.

Can others confirm correct or ill behaviour? Also, feel free to comment on any aspect of the code.

Craig