Replacing UI Sidebar in Sugarcube

Authoring Twine
1

Hi,

So, what I’d really like to do is to replace the whole sidebar with a button in the top left of the screen. When I click the button, it opens the sidebar.

I’ve seen a lot of stuff about how to move or style the sidebar and add stuff to it, but am wondering whether anyone has any ideas/links on how to put it behind a button…

Thank you!!

2

How would this be any different then the built-in toggle button?

3

As Janos noted, the UI bar in SugarCube basically already does that. If you want to start the game with it stowed, then you can just add this to your JavaScript section:

Config.ui.stowBarInitially = true;

See the Config.ui.stowBarInitially documentation for details.

If you really do want to create your own user interface, then take a look at the documentation on the StoryInterface passage for how to get started doing that.

Hope that helps! :slight_smile:

1 Like
4

If your issue with the existing left side-bar is that you don’t want to see the right edge (border) and background of that panel’s body when the side-bar is in a “stowed” state, then you can use CSS to “hide” the parts of the side-bar you don’t want to see.

The following example results in only the toggle button being shown during the side-bar’s “stowed” state, you can use it as a starting point for how you want that button to look during that state.

#ui-bar.stowed {
	background-color: transparent;
	border-right: none;
}
#ui-bar.stowed #ui-bar-tray {
	background-color: #222;
	border-right: 1px solid #444;
}
5

Thanks to all for replies! I think I have it now! :slight_smile: