Better Sidebar
By G2Lighter
Description
A better sidebar, hover over the arrow in the bottom right corner of the page to show it.
Code
[[module CSS]]
div#side-bar span.printuser a:nth-child(1) {
pointer-events: none;
}
div#side-bar::before {
content: '';
background-color: #eee;
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='55%25' font-size='15' fill='%23a2a9b6' font-family='system-ui, sans-serif' text-anchor='middle' dominant-baseline='middle'%3E⇱%3C/text%3E%3C/svg%3E");
background-size:cover;
position: fixed;
right: 5%;
bottom: 5%;
height: 5vh;
width: 5vh;
display:block;
border-radius: 1rem 0 0;
transition: .2s ease;
box-shadow: #eee 5px 5px 13px;
border: .1rem solid #ccc;
}
div#side-bar {
height: 0%;
border: unset;
margin: 0;
padding: 0;
overflow: hidden;
position: fixed;
bottom: 5%;
right: 5%;
transition: .2s ease;
}
div#side-bar:hover {
height: max-content;
width: max-content;
scrollbar-width: none;
margin: 0;
padding: 1rem;
overflow: scroll;
position: fixed;
bottom: 5%;
right: 5%;
background-color: #f8f8f8cc;
border: 1px solid #ccc;
border-radius: 1rem 0;
box-shadow: #555 5px 5px 13px;
}
div#side-bar:hover::before {
border-radius: 1rem 0;
background-color: #3339;
box-shadow: #555 5px 5px 13px;
}
[[/module]]In action
link to the implemented solution on a Wikidot site or put a working example here
Thanks to tsangk for this great snippet: conditional-blocks
text above inserted with:
[[include :snippets:if START |unique=1|type=equal|var1=%%name%%|var2=conditional-blocks]]
**##red|Thanks to tsangk for this great snippet:##** [[[code:conditional-blocks]]]
[[include :snippets:if END]]
Other snippets posted by G2Lighter
Rate this solution
If you think this solution is useful — rate it up!
page revision: 6, last edited: 28 Sep 2024 04:40
This is the slightly altered code to make the sidebar be on the top left instead of bottom right:
You can see an example of this at http://s-a-p.wikidot.com/. It should also be noted that to implement said sidebar, you need to make a custom theme and put this into the CSS code, which was not stated with the original post.
"But as for me and my house, we shall serve the Lord."
I apologize but I have changed the sidebar on the site to be bottom left, as being top left caused issues with the wiki title. So the link I provided as an example of the upper code working is no longer valid.
"But as for me and my house, we shall serve the Lord."
this might help ↓
My thanks. Though what I've really been trying to do is add a "sidebar toggle". If you have an information on the subject, that would be greatly appreciated.
"But as for me and my house, we shall serve the Lord."
[[module listPages]] and [[module Watchers]] may break the sidebar because of their length