diff --git a/src/ext/extension-page/App.svelte b/src/ext/extension-page/App.svelte
index 90d396b4..98106604 100644
--- a/src/ext/extension-page/App.svelte
+++ b/src/ext/extension-page/App.svelte
@@ -66,6 +66,10 @@
 	const editorMinWidth = "20rem";
 
 	function sidebarSwitch() {
+		if (!sidebarHidden && !$items.find((i) => i.active)) {
+			log.add("Please select or create a new item first.", "info", true);
+			return;
+		}
 		sidebarHidden = !sidebarHidden;
 	}
 
@@ -168,7 +172,7 @@
 		cursor: col-resize;
 		position: fixed;
 		inset: 0;
-		z-index: 200;
+		z-index: 20;
 	}
 
 	.splitter {
@@ -182,7 +186,7 @@
 		left: calc(var(--sidebar-fixed-width) - var(--splitter-offset));
 		width: var(--splitter-width);
 		height: 100svh;
-		z-index: 201;
+		z-index: 21;
 		transition: background-color 0.2s ease-in-out;
 
 		&:hover,
diff --git a/src/ext/extension-page/Components/Sidebar/Sidebar.svelte b/src/ext/extension-page/Components/Sidebar/Sidebar.svelte
index cc382adc..c5af6b55 100644
--- a/src/ext/extension-page/Components/Sidebar/Sidebar.svelte
+++ b/src/ext/extension-page/Components/Sidebar/Sidebar.svelte
@@ -81,8 +81,8 @@
 	}
 
 	async function activate(item) {
-		// if not in ready state or the item is already active
-		if (!$v4state.includes("ready") || item.active) return;
+		// if item is empty or already active
+		if (!item || item.active) return;
 
 		// check if there's a temp item and it's not the item to be activated
 		// can occur when user clicks a non-temp item while a temp item exists
@@ -228,7 +228,7 @@
 			title="Open settings"
 			{disabled}
 		/>
-		<Dropdown icon={iconPlus} title="New item" {disabled} right>
+		<Dropdown icon={iconPlus} title="New item" {disabled}>
 			<button on:click={() => newItem("js")}>New JS</button>
 			<button on:click={() => newItem("css")}>New CSS</button>
 			<button on:click={newRemote}>New Remote</button>