diff --git a/python_docs_theme/static/menu.js b/python_docs_theme/static/menu.js
index c7ab03e..3d39c62 100644
--- a/python_docs_theme/static/menu.js
+++ b/python_docs_theme/static/menu.js
@@ -1,57 +1,45 @@
 document.addEventListener("DOMContentLoaded", function () {
+    // Make tables responsive
+    document.querySelectorAll("table.docutils").forEach((table) => {
+        table.outerHTML = `<div class="responsive-table__container">${table.outerHTML}</div>`;
+    });
 
-    // Make tables responsive by wrapping them in a div and making them scrollable
-    const tables = document.querySelectorAll("table.docutils")
-    tables.forEach(function(table){
-        table.outerHTML = '<div class="responsive-table__container">' + table.outerHTML + "</div>"
-    })
+    const togglerInput = document.querySelector(".toggler__input");
+    const togglerLabel = document.querySelector(".toggler__label");
+    const sideMenu = document.querySelector(".menu-wrapper");
+    const body = document.body;
 
-    const togglerInput = document.querySelector(".toggler__input")
-    const togglerLabel = document.querySelector(".toggler__label")
-    const sideMenu = document.querySelector(".menu-wrapper")
-    const menuItems = document.querySelectorAll(".menu")
-    const doc = document.querySelector(".document")
-    const body = document.querySelector("body")
+    const closeMenu = () => {
+        togglerInput.checked = false;
+        sideMenu.setAttribute("aria-expanded", "false");
+        sideMenu.setAttribute("aria-hidden", "true");
+        togglerLabel.setAttribute("aria-pressed", "false");
+        body.style.overflow = "visible";
+    };
 
-    function closeMenu() {
-        togglerInput.checked = false
-        sideMenu.setAttribute("aria-expanded", "false")
-        sideMenu.setAttribute("aria-hidden", "true")
-        togglerLabel.setAttribute("aria-pressed", "false")
-        body.style.overflow = "visible"
-    }
-    function openMenu() {
-        togglerInput.checked = true
-        sideMenu.setAttribute("aria-expanded", "true")
-        sideMenu.setAttribute("aria-hidden", "false")
-        togglerLabel.setAttribute("aria-pressed", "true")
-        body.style.overflow = "hidden"
-    }
+    const openMenu = () => {
+        togglerInput.checked = true;
+        sideMenu.setAttribute("aria-expanded", "true");
+        sideMenu.setAttribute("aria-hidden", "false");
+        togglerLabel.setAttribute("aria-pressed", "true");
+        body.style.overflow = "hidden";
+    };
 
-    // Close menu when link on the sideMenu is clicked
-    sideMenu.addEventListener("click", function (event) {
-        let target = event.target
-        if (target.tagName.toLowerCase() !== "a") {
-            return
-        }
-        closeMenu()
-    })
-    // Add accessibility data when sideMenu is opened/closed
-    togglerInput.addEventListener("change", function (_event) {
-        togglerInput.checked ? openMenu() : closeMenu()
-    })
-    // Make sideMenu links tabbable only when visible
-    for(let menuItem of menuItems) {
-        if(togglerInput.checked) {
-          menuItem.setAttribute("tabindex", "0")
-        } else {
-          menuItem.setAttribute("tabindex", "-1")
-        }
-    }
-    // Close sideMenu when document body is clicked
-    doc.addEventListener("click", function () {
-        if (togglerInput.checked) {
-            closeMenu()
-        }
-    })
-})
+    // Toggle menu accessibility attributes
+    togglerInput.addEventListener("change", () => {
+        togglerInput.checked ? openMenu() : closeMenu();
+        sideMenu.querySelectorAll(".menu").forEach((menuItem) => {
+            menuItem.setAttribute("tabindex", togglerInput.checked ? "0" : "-1");
+        });
+    });
+
+    // Close menu when a link inside the sideMenu is clicked
+    sideMenu.addEventListener("click", (event) => {
+        if (event.target.closest("a")) closeMenu();
+    });
+
+    // Close menu when the document body is clicked
+    document.querySelector(".document").addEventListener("click", () => {
+        if (togglerInput.checked) closeMenu();
+    });
+});
diff --git a/python_docs_theme/static/pydoctheme_dark.css b/python_docs_theme/static/pydoctheme_dark.css
index 4509960..e73a7f9 100644
--- a/python_docs_theme/static/pydoctheme_dark.css
+++ b/python_docs_theme/static/pydoctheme_dark.css
@@ -1,178 +1,332 @@
-/* Common colours */
+/* Updated Common colors */
 :root {
-    --good-color: rgb(79 196 100);
-    --good-border: var(--good-color);
-    --middle-color: rgb(244, 227, 76);
-    --middle-border: var(--middle-color);
-    --bad-color: rgb(244, 76, 78);
-    --bad-border: var(--bad-color);
+
+  --good-color: rgb(79, 196, 100);
+  --good-color: rgb(79 196 100);
+  --good-border: var(--good-color);
+  --middle-color: rgb(244, 227, 76);
+  --middle-border: var(--middle-color);
+  --bad-color: rgb(244, 76, 78);
+  --bad-border: var(--bad-color);
 }
 
 
 /* Browser elements */
 :root {
-    scrollbar-color: #616161 transparent;
-    color-scheme: dark;
+  scrollbar-color: #616161 transparent;
+  color-scheme: dark;
 }
 
 html,
 body {
-    background-color: #222;
-    color: rgba(255, 255, 255, 0.87);
+  background-color: #222;
+  color: rgba(255, 255, 255, 0.87);
 }
 
 div.related {
-    color: rgba(255, 255, 255, 0.7); /* classic overwrite */
-    border-color: #424242;
+
+  color: rgba(255, 255, 255, 0.7);
+
+  color: rgba(255, 255, 255, 0.7); /* classic overwrite */
+
+  border-color: #424242;
 }
 
 /* SIDEBAR */
+
+.sidebar {
+  background-color: #424242; /* Dark background for sidebar */
+  border-color: #616161;
+  width: 250px;
+  transition: width 0.3s ease, background-color 0.3s ease;
+  overflow-x: hidden; /* Ensure smooth scrolling on long content */
+}
+
+.sidebar.collapsed {
+  width: 0;
+  border: none;
+}
+
+/* Make sidebar responsive */
+@media screen and (max-width: 768px) {
+  .sidebar {
+    width: 200px;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .sidebar {
+    display: none;
+  }
+
+  #sidebarbutton {
+    display: block;
+  }
+}
+
+/* Sidebar button style */
+#sidebarbutton {
+  background-color: #555;
+  color: inherit;
+  padding: 10px;
+  cursor: pointer;
+  display: none;
+}
+
+/* Sidebar hover and transitions */
+.sidebar:hover {
+  background-color: #555;
+}
 div.sphinxsidebar, .menu-wrapper {
-    background-color: #333;
-    color: inherit;
+  background-color: #414141;  /* Sidebar background color */
+  color: inherit;
 }
 
 #sidebarbutton {
-    /* important to overwrite style attribute */
-    background-color: #555 !important;
-    color: inherit !important;
+  background-color: #555 !important;
+  color: inherit !important;
 }
 
 div.sidebar, aside.sidebar {
-    background-color: #424242;
-    border-color: #616161;
+  background-color: #414141;  /* Sidebar background color */
+  border-color: #616161;
+  width: 300px;  /* Sidebar width increased */
+  resize: horizontal;  /* Make it resizable */
+  overflow: auto;
+  position: fixed;  /* Fixed position to keep sidebar in place */
+  top: 0;
+  left: 0;
+  height: 100%;
+  z-index: 100;
+  transition: left 400ms ease;
 }
 
+/* Sidebar Open State */
+div.sidebar.open {
+  left: 0;
+
+}
+
+.menu-wrapper {
+  padding: 40px 10px 30px 20px;
+}
+
+.menu-wrapper h3,
+.menu-wrapper h4 {
+  margin-bottom: 0;
+  font-weight: normal;
+}
+
+.menu-wrapper h4 {
+  font-size: 1.3em;
+}
+
+.menu-wrapper h3 {
+  font-size: 1.4em;
+}
+
+.menu-wrapper h3 + p,
+.menu-wrapper h4 + p {
+  margin-top: 0.5rem;
+}
+
+.menu a {
+  font-size: smaller;
+  text-decoration: none;
+}
+
+.menu ul {
+  list-style: none;
+  line-height: 1.4;
+  overflow-wrap: break-word;
+  padding-left: 0;
+}
+
+.menu ul ul {
+  margin-left: 20px;
+  list-style: square;
+}
+
+.menu ul li {
+  margin-bottom: 0.5rem;
+}
+
+.language_switcher_placeholder {
+  margin-top: 2rem;
+}
+
+.language_switcher_placeholder select {
+  width: 100%;
+}
+
+.document {
+  position: relative;
+  z-index: 0;
+}
+
+/* Responsive tables */
+.responsive-table__container {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.menu .theme-selector-label {
+  margin-top: .5em;
+  display: flex;
+  width: 100%;
+}
+
+.menu .theme-selector {
+  flex: auto;
+}
+
+
+
+
 /* ANCHORS AND HIGHLIGHTS */
+
+a {
+  color: #7af;
+}
+
+a:visited {
+  color: #7af;
+}
+
 div.body a {
-    color: #7af;
+  color: #7af;
 }
 
 div.body a:visited {
-    color: #09e;
+  color: #09e;
 }
 
 a.headerlink:hover {
-    background-color: #424242;
+  background-color: #424242;
 }
 
 div.related a {
-    color: currentColor;
+  color: currentColor;
 }
 
 div.footer,
 div.footer a {
-    color: currentColor; /* classic overwrites */
+
+  color: currentColor;
+
+  color: currentColor; /* classic overwrites */
+
 }
 
 dt:target,
 span.highlighted {
-    background-color: #616161;
+  background-color: #616161;
 }
 
 .footnote:target {
-    background-color: #2c3e50;
+  background-color: #2c3e50;
 }
 
 /* Below for most things in text */
 
 dl.field-list > dt {
-    background-color: #434;
+  background-color: #434;
 }
 
 table.docutils td,
 table.docutils th {
-    border-color: #616161 !important;
+  border-color: #616161 !important;
 }
 
 table.docutils th {
-    background-color: #424242;
+  background-color: #424242;
 }
 
 .stableabi {
-    color: #bbf;
+  color: #bbf;
 }
 
+pre {
+  border-color: #616161;
+}
 div.body pre {
-    border-color: #616161;
+  border-color: #616161;
 }
 
 code {
-    background-color: #424242;
+  background-color: #424242;
 }
 
-div.body div.seealso {
-    background-color: rgba(255, 255, 0, 0.1);
+div.seealso {
+  background-color: rgba(255, 255, 0, 0.1);
 }
 
+
 div.warning {
-    background-color: rgba(255, 0, 0, 0.2);
+  background-color: rgba(255, 0, 0, 0.2);
 }
 
 .warning code {
-    background-color: rgba(255, 0, 0, 0.5);
+  background-color: rgba(255, 0, 0, 0.5);
 }
 
 /* Admonitions */
 :root {
-    --admonition-background: #ffffff1a;
-    --admonition-border: currentColor;
-    --admonition-color: #ffffffde;
-    --attention-background: #ffffff1a;
-    --attention-border: currentColor;
-    --caution-background: #ffff001a;
-    --caution-border: #dd6;
-    --danger-background: #f003;
-    --danger-border: #f66;
-    --error-background: #f003;
-    --error-border: #f66;
-    --hint-background: #0044117a;
-    --hint-border: green;
-    --seealso-background: #ffff001a;
-    --seealso-border: #dd6;
-    --tip-background: #0044117a;
-    --tip-border: green;
-    --warning-background: #ff000033;
-    --warning-border: #ff6666;
+  --admonition-background: #ffffff1a;
+  --admonition-border: currentColor;
+  --admonition-color: #ffffffde;
+  --attention-background: #ffffff1a;
+  --attention-border: currentColor;
+  --caution-background: #ffff001a;
+  --caution-border: #dd6;
+  --danger-background: #f003;
+  --danger-border: #f66;
+  --error-background: #f003;
+  --error-border: #f66;
+  --hint-background: #0044117a;
+  --hint-border: green;
+  --seealso-background: #ffff001a;
+  --seealso-border: #dd6;
+  --tip-background: #0044117a;
+  --tip-border: green;
+  --warning-background: #ff000033;
+  --warning-border: #ff6666;
 }
 
 aside.topic,
 div.topic,
 div.note,
 nav.contents {
-    background-color: rgba(255, 255, 255, 0.1);
-    border-color: currentColor;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-color: currentColor;
 }
 
 .note code {
-    background-color: rgba(255, 255, 255, 0.1);
+  background-color: rgba(255, 255, 255, 0.1);
 }
 
 .mobile-nav {
-    box-shadow: rgba(255, 255, 255, 0.25) 0 0 2px 0;
+  box-shadow: rgba(255, 255, 255, 0.25) 0 0 2px 0;
 }
 
 .nav-content {
-    background-color: black;
+  background-color: black;
 }
 
 img.invert-in-dark-mode {
-    filter: invert(1) hue-rotate(.5turn);
+  filter: invert(1) hue-rotate(.5turn);
 }
 
-/* -- object description styles --------------------------------------------- */
-
+/* Object description styles */
 /* C++ specific styling */
-
-/* Override Sphinx's basic.css to fix colour contrast */
-.sig.c   .k, .sig.c   .kt,
+.sig.c .k, .sig.c .kt,
 .sig.cpp .k, .sig.cpp .kt {
-    color: #5283ff;
+  color: #5283ff;
 }
 
 /* Version change directives */
 :root {
-    --versionadded: var(--good-color);
-    --versionchanged: var(--middle-color);
-    --deprecated: var(--bad-color);
-}
+  --versionadded: var(--good-color);
+  --versionchanged: var(--middle-color);
+  --deprecated: var(--bad-color);
+}
\ No newline at end of file