Home
1. Create a container that contain all your "Big Sidebar State" buttons
2. Set the container width in pixels
3. Add Multi-State Box
4. Drag the "Big Sidebar State" container into one of the states
5. Duplicate that state
6. Create different buttons design for the "Small Sidebar State"
7. Set the buttons container width in pixels for the small version
8. make sure you gave the right id foreach state
9. create vertical section
10. Add container into the vertical section
11. Set the container width to 100%, the height to auto and the min-height to 100vh
12. Set the overflow scroll to scroll > vertical
13. Set the container to be sticky with top offset: 0
14. Drag the Multi-State Box into the Sticky container
15. Set the vertical section width as max-content (if it is not fit to the current state width you did something wrong)
16. Add Button in the Header to change the sidebar states and give him the right id
17. Copy & Paste the code inside the masterPage.js
============================
Code (masterPage.js)
============================
import { session } from 'wix-storage';
$w.onReady(function () {
initSidebar();
});
function initSidebar() {
getUserSidebarSettings();
$w('#menuButton').onClick(() => {
const currentState = $w('#sidebarMultiStateBox').currentState.id;
toggleSidebar(currentState)
})
}
function toggleSidebar(currentState) {
const sidebarMSB = $w('#sidebarMultiStateBox');
console.log(sidebarMSB)
if (currentState === 'mainSidebarState') {
sidebarMSB.changeState('miniSidebarState')
setUserSidebarSettings('miniSidebarState')
} else {
sidebarMSB.changeState('mainSidebarState')
setUserSidebarSettings('mainSidebarState')
}
}
function setUserSidebarSettings(currentState) {
session.setItem("sidebarState", currentState);
}
function getUserSidebarSettings() {
const currentState = session.getItem("sidebarState");
console.log('currentState: ', currentState)
if (currentState) {
$w('#sidebarMultiStateBox').changeState(currentState)
}
}