From a17cf166ef5d38505a22d8bf80236e395ee0eac1 Mon Sep 17 00:00:00 2001
From: Jeremy Walton <jeremy.walton@rolemodelsoftware.com>
Date: Sat, 14 Dec 2024 17:41:06 -0500
Subject: [PATCH] [OP#162] Use the correct z index for the sidebar (#234)

This PR updates the sidebar to use the correct Z Index. It also renames the drawer token to be sidebar specific.
---
 src/addons/panel.scss            | 2 +-
 src/components/sidebar.scss      | 1 +
 src/core/tokens/base_tokens.scss | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/addons/panel.scss b/src/addons/panel.scss
index 57de7408..d114fa3a 100644
--- a/src/addons/panel.scss
+++ b/src/addons/panel.scss
@@ -2,7 +2,7 @@
   --op-panel-width: 40%;
 
   position: absolute;
-  z-index: var(--op-z-index-drawer);
+  z-index: var(--op-z-index-sidebar);
   right: calc(-1 * var(--op-panel-width)); // this pushes the panel off the sceen to the right
   width: var(--op-panel-width);
   height: 100vh;
diff --git a/src/components/sidebar.scss b/src/components/sidebar.scss
index 884a10a7..35091415 100644
--- a/src/components/sidebar.scss
+++ b/src/components/sidebar.scss
@@ -69,6 +69,7 @@
   --__op-sidebar-width: var(--_op-sidebar-drawer-width);
   --__op-sidebar-brand-width: var(--_op-sidebar-drawer-brand-width);
 
+  z-index: var(--op-z-index-sidebar);
   display: flex;
   width: var(--__op-sidebar-width);
   min-width: var(--__op-sidebar-width);
diff --git a/src/core/tokens/base_tokens.scss b/src/core/tokens/base_tokens.scss
index 3382ff57..ad1ca521 100644
--- a/src/core/tokens/base_tokens.scss
+++ b/src/core/tokens/base_tokens.scss
@@ -297,7 +297,7 @@ $breakpoint-x-large: 1440px; // medium laptop
   */
   --op-z-index-header: 500;
   --op-z-index-footer: 500;
-  --op-z-index-drawer: 700;
+  --op-z-index-sidebar: 700;
   --op-z-index-dialog: 800;
   --op-z-index-dialog-backdrop: 801;
   --op-z-index-dialog-content: 802;