correct toggle methods namings

packages/app/src/layout/bottombar/index.jsx

@@ -19,18 +19,18 @@ export default class BottomBar extends EviteComponent {
 
     handleBusEvents = {
         "app.render_initialization": () => {
-            this.toogle(false)
+            this.toggle(false)
         },
         "app.render_initialization_done": () => {
             if (this.isAllowed()) {
-                this.toogle(true)
+                this.toggle(true)
             }
         },
         "app.crash": () => {
-            this.toogle(false)
+            this.toggle(false)
         },
         "locationChange": () => {
-            this.toogle(this.isAllowed())
+            this.toggle(this.isAllowed())
         }
     }
 
@@ -38,7 +38,7 @@ export default class BottomBar extends EviteComponent {
         this._loadBusEvents()
 
         window.app.BottomBarController = {
-            toogleVisible: this.toogle,
+            toogleVisible: this.toggle,
             isVisible: () => this.state.visible,
             render: (fragment) => {
                 this.setState({ render: fragment })
@@ -58,7 +58,7 @@ export default class BottomBar extends EviteComponent {
         return app.pageStatement?.bottomBarAllowed !== "undefined" && app.pageStatement?.bottomBarAllowed !== false
     }
 
-    toogle = (to) => {
+    toggle = (to) => {
         if (!window.isMobile) {
             to = false
         } else {

packages/app/src/layout/sidebar/components/editor/index.jsx

@@ -65,11 +65,11 @@ export default class SidebarEditor extends React.Component {
 
 	onSave = () => {
 		window.app.settings.set("sidebarKeys", this.state.items)
-		window.app.SidebarController.toogleEdit(false)
+		window.app.SidebarController.toggleEdit(false)
 	}
 
 	onDiscard = () => {
-		window.app.SidebarController.toogleEdit(false)
+		window.app.SidebarController.toggleEdit(false)
 	}
 
 	onSetDefaults = () => {

packages/app/src/layout/sidebar/index.jsx

@@ -25,7 +25,7 @@ export default class Sidebar extends React.Component {
 
 		this.state = {
 			editMode: false,
-			visible: true,
+			visible: false,
 			loading: true,
 			collapsed: window.app.settings.get("collapseOnLooseFocus") ?? false,
 			pathResolve: {},
@@ -37,26 +37,31 @@ export default class Sidebar extends React.Component {
 		}
 
 		this.SidebarController = {
-			toogleVisible: (to) => {
+			toggleVisibility: this.toggleVisibility,
-				this.setState({ visible: to ?? !this.state.visible })
+			toggleEdit: this.toggleEditMode,
-			},
-			toogleEdit: this.toogleEditMode,
 			isVisible: () => this.state.visible,
 			isEditMode: () => this.state.visible,
 			isCollapsed: () => this.state.collapsed,
 		}
 
 		window.app["SidebarController"] = this.SidebarController
-		window.app.eventBus.on("edit_sidebar", () => this.toogleEditMode())
+
+		window.app.eventBus.on("edit_sidebar", () => this.toggleEditMode())
+
 		window.app.eventBus.on("settingChanged.sidebar_collapse", (value) => {
-			this.toogleCollapse(value)
+			this.toggleCollapse(value)
 		})
 	}
 
 	collapseDebounce = null
 
-	componentDidMount = () => {
+	componentDidMount = async () => {
-		this.loadSidebarItems()
+		await this.loadSidebarItems()
+
+		// create a cool debounced animation
+		setTimeout(() => {
+			this.toggleVisibility(true)
+		}, 400)
 	}
 
 	getStoragedKeys = () => {
@@ -206,7 +211,7 @@ export default class Sidebar extends React.Component {
 		return window.app.setLocation(`/${e.key}`, 150)
 	}
 
-	toogleEditMode = (to) => {
+	toggleEditMode = (to) => {
 		if (typeof to === "undefined") {
 			to = !this.state.editMode
 		}
@@ -222,12 +227,16 @@ export default class Sidebar extends React.Component {
 		this.setState({ editMode: to, collapsed: false })
 	}
 
-	toogleCollapse = (to) => {
+	toggleCollapse = (to) => {
 		if (!this.state.editMode) {
 			this.setState({ collapsed: to ?? !this.state.collapsed })
 		}
 	}
 
+	toggleVisibility = (to) => {
+		this.setState({ visible: to ?? !this.state.visible })
+	}
+
 	onMouseEnter = () => {
 		if (window.app.settings.is("collapseOnLooseFocus", false)) {
 			return false
@@ -237,7 +246,7 @@ export default class Sidebar extends React.Component {
 		this.collapseDebounce = null
 
 		if (this.state.collapsed) {
-			this.toogleCollapse(false)
+			this.toggleCollapse(false)
 		}
 	}
 
@@ -247,7 +256,7 @@ export default class Sidebar extends React.Component {
 		}
 
 		if (!this.state.collapsed) {
-			this.collapseDebounce = setTimeout(() => { this.toogleCollapse(true) }, window.app.settings.get("autoCollapseDelay") ?? 500)
+			this.collapseDebounce = setTimeout(() => { this.toggleCollapse(true) }, window.app.settings.get("autoCollapseDelay") ?? 500)
 		}
 	}
 

packages/app/src/pages/streams/viewer/index.jsx

@@ -61,7 +61,7 @@ export default class StreamViewer extends React.Component {
         // make the interface a bit confortable for a video player
         app.ThemeController.applyVariant("dark")
         app.eventBus.emit("toogleCompactMode", true)
-        app.SidebarController.toogleVisible(false)
+        app.SidebarController.tooggleVisibility(false)
         app.HeaderController.toogleVisible(false)
 
         // fetch user info in the background
@@ -80,7 +80,7 @@ export default class StreamViewer extends React.Component {
     componentWillUnmount = () => {
         app.ThemeController.applyVariant(app.settings.get("themeVariant"))
         app.eventBus.emit("toogleCompactMode", false)
-        app.SidebarController.toogleVisible(true)
+        app.SidebarController.toggleVisibility(true)
         app.HeaderController.toogleVisible(true)
         app.HeaderController.toogleVisible(true)