feat: add NavDrawer z-index prop

Signed-off-by: Florian-Schoenherr <[email protected]>

Author: Florian-Schoenherr

packages/api-generator/src/NavigationDrawer.json

@@ -195,6 +195,21 @@
         "type": "any"
       }
     },
+    {
+      "visibility": "public",
+      "description": null,
+      "keywords": [],
+      "name": "index",
+      "kind": "let",
+      "static": false,
+      "readonly": false,
+      "type": {
+        "kind": "type",
+        "text": "number",
+        "type": "number"
+      },
+      "defaultValue": 4
+    },
     {
       "visibility": "public",
       "description": null,

packages/svelte-materialify/@types/NavigationDrawer.d.ts

@@ -28,6 +28,8 @@ interface NavigationDrawerProps {
   transition?: (node: Element, options: any) => TransitionConfig;
   /** options for the transition */
   transitionOpts?: any;
+  /** The z-index of the drawer */
+  index?: number;
   /** styles added to the drawer */
   style?: string;
 }

packages/svelte-materialify/src/components/NavigationDrawer/NavigationDrawer.scss

@@ -38,12 +38,10 @@
 
   &.fixed {
     position: fixed;
-    z-index: 6;
   }
 
   &.absolute {
     position: absolute;
-    z-index: 2;
   }
 
   &.right {
@@ -66,7 +64,6 @@
   }
 
   &.clipped {
-    z-index: 4;
     top: var(--s-nav-clipped-height);
     max-height: calc(100% - var(--s-nav-clipped-height));
   }

packages/svelte-materialify/src/components/NavigationDrawer/NavigationDrawer.svelte

@@ -16,6 +16,7 @@
   export let clippedHeight = '56px';
   export let transition = fade;
   export let transitionOpts = {};
+  export let index = 4;
   export let style = null;
 </script>
 
@@ -32,8 +33,12 @@
   class:mini
   class:clipped
   on:hover
-  use:Style={{ 'nav-width': width, 'nav-min-width': miniWidth, 'nav-clipped-height': clippedHeight }}
-  {style}>
+  use:Style={{
+    'nav-width': width,
+    'nav-min-width': miniWidth,
+    'nav-clipped-height': clippedHeight,
+  }}
+  style="z-index:{index};{style}">
   <slot name="prepend" />
   <div class="s-navigation-drawer__content">
     <slot />