feat(NavigationDrawer): added option to close

TheComputerM · Sep 1, 2020 · 6c19455 · 6c19455 · vercel · Sep 1, 2020
1 parent 5e4f108
commit 6c19455
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 16 deletions.
diff --git a/packages/api-generator/dist/index.js b/packages/api-generator/dist/index.js
diff --git a/packages/api-generator/src/NavigationDrawer.json b/packages/api-generator/src/NavigationDrawer.json
@@ -17,6 +17,21 @@
       },
       "defaultValue": "256px"
     },
+    {
+      "visibility": "public",
+      "description": null,
+      "keywords": [],
+      "name": "active",
+      "kind": "let",
+      "static": false,
+      "readonly": false,
+      "type": {
+        "kind": "type",
+        "text": "boolean",
+        "type": "boolean"
+      },
+      "defaultValue": true
+    },
     {
       "visibility": "public",
       "description": null,

diff --git a/packages/docs/src/helpers/Navigation/SiteNavigation.svelte b/packages/docs/src/helpers/Navigation/SiteNavigation.svelte
@@ -64,7 +64,8 @@
 </AppBar>
 
 <NavigationDrawer
-  style="height:100vh;{!(navigation || sidenav) ? 'transform:translateX(-100%)' : ''}"
+  active={navigation || sidenav}
+  style="height:100vh;"
   fixed
   clipped>
   <br />

diff --git a/packages/svelte-materialify/src/components/NavigationDrawer/NavigationDrawer.scss b/packages/svelte-materialify/src/components/NavigationDrawer/NavigationDrawer.scss
@@ -1,5 +1,20 @@
 @import "./variables";
 
+.s-navigation-drawer__border {
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 100%;
+  width: $navigation-drawer-border-width;
+  background-color: var(--theme-dividers);
+}
+
+.s-navigation-drawer__content {
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
 .s-navigation-drawer {
   background-color: var(--theme-navigation-drawer);
   -webkit-overflow-scrolling: touch;
@@ -17,19 +32,8 @@
   will-change: transform;
   transition-property: transform, visibility, width;
 
-  .s-navigation-drawer__border {
-    position: absolute;
-    right: 0;
-    top: 0;
-    height: 100%;
-    width: $navigation-drawer-border-width;
-    background-color: var(--theme-dividers);
-  }
-
-  .s-navigation-drawer__content {
-    height: 100%;
-    overflow-y: auto;
-    overflow-x: hidden;
+  &:not(.active) {
+    transform: translateX(-100%);
   }
 
   &.fixed {
@@ -51,6 +55,10 @@
       right: initial;
     }
 
+    &:not(.active) {
+      transform: translate(100%);
+    }
+
     .s-navigation-drawer__border {
       right: auto;
       left: 0;

diff --git a/packages/svelte-materialify/src/components/NavigationDrawer/NavigationDrawer.svelte b/packages/svelte-materialify/src/components/NavigationDrawer/NavigationDrawer.svelte
@@ -3,6 +3,7 @@
 
   let klass = '';
   export let width = '256px';
+  export let active = true;
   export let fixed = false;
   export let absolute = false;
   export let right = false;
@@ -11,7 +12,7 @@
   export let noBorder = false;
   export let miniWidth = '56px';
   export let clippedHeight = '56px';
-  export let style = '';
+  export let style = null;
   export { klass as class };
 
   if (mini) width = miniWidth;
@@ -23,6 +24,7 @@
 
 <aside
   class="s-navigation-drawer {klass}"
+  class:active
   class:fixed
   class:absolute
   class:right