Better Sidebar/更好的侧边栏 / Discussion

This is the discussion related to the wiki page Better Sidebar/更好的侧边栏.

G2Lighter 17 Sep 2024 09:33

[[module listPages]] and [[module Watchers]] may break the sidebar because of their length

+ a grid layout may help if you really need to use Watchers module in your sidebar

[[module CSS]]
.forwatchers {
    display: grid;
    grid-template-columns: 20% 0 20% 0 20% 0 20% 0 20% 0;
}

.forwatchers .printuser a {
    font-size:0;
}
[[/module]]

[[div class="forwatchers"]]
[[module Watchers]]
[[/div]]

Top left hovering sidebar

Director Erzahler 17 Sep 2024 18:17

This is the slightly altered code to make the sidebar be on the top left instead of bottom right:

[[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;
    left: 5%;
    top: 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;
    top: 5%;
    left: 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;
    top: 5%;
    left: 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]]

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."

Re: Top left hovering sidebar

Director Erzahler 17 Sep 2024 19:50

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."

G2Lighter 20 Sep 2024 12:50

this might help ↓

+ show block

[[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;
    left: 1vh;
    top: 3vh;
    height: 4vh;
    width: 4vh;
    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;
    left: 1vh;
    top: 3vh;
    transition: .2s ease;
    z-index: 11;
}

div#side-bar:hover {
    height: max-content;
    width: max-content;
    scrollbar-width: none;
    margin: 0;
    padding: 1rem;
    overflow: scroll;
    position: fixed;
    left: 1vh;
    top: 3vh;
    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;
}

div#header {
    padding-left: 6vh;
    z-index: -1;
}
[[/module]]

Last edited on 21 Sep 2024 06:48 by G2Lighter Show more

Sidebar toggle

Director Erzahler 21 Sep 2024 01:30

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."

NoRaNetaN 21 Jan 2025 15:31

随机到你了

---

I'm Be Creeping Day And Night！

G2Lighter 22 Jan 2025 10:51

awa

挺久之前搞的没什么用的组件，兼容好差