From 7830bad80c3c88180f54a3fe6c3ccdf270da33bf Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Wed, 13 May 2020 01:05:50 +0300
Subject: [PATCH] Fixed sidebar close icon position

---
 src/components/sidebar/Sidebar.vue | 30 +++++++++++++++++++-----------
 src/views/sidebar/SidebarDemo.vue  |  6 ++++++
 2 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/components/sidebar/Sidebar.vue b/src/components/sidebar/Sidebar.vue
index 378bf27b2..6b0f718fa 100755
--- a/src/components/sidebar/Sidebar.vue
+++ b/src/components/sidebar/Sidebar.vue
@@ -1,10 +1,12 @@
 <template>
     <transition name="p-sidebar" @enter="onEnter" @leave="onLeave">
         <div :class="containerClass" v-if="visible" ref="container" role="complementary" :aria-modal="modal">
-            <button class="p-sidebar-close p-link" @click="hide" :aria-label="ariaCloseLabel" v-if="showCloseIcon" type="button">
-                <span class="p-sidebar-close-icon pi pi-times" />
-            </button>
-            <slot></slot>
+            <div class="p-sidebar-content">
+                <button class="p-sidebar-close p-link" @click="hide" :aria-label="ariaCloseLabel" v-if="showCloseIcon" type="button">
+                    <span class="p-sidebar-close-icon pi pi-times" />
+                </button>
+                <slot></slot>
+            </div>
         </div>
     </transition>
 </template>
@@ -141,6 +143,19 @@ export default {
     transition: transform .3s;
 }
 
+.p-sidebar-content {
+    position: relative;
+}
+
+.p-sidebar-close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
 .p-sidebar-mask {
     background-color: transparent;
     transition-property: background-color;
@@ -247,13 +262,6 @@ export default {
     height: 30em;
 }
 
-.p-sidebar-close.p-link {
-    margin-left: auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
 @media screen and (max-width: 64em) {
     .p-sidebar-left.p-sidebar-lg,
     .p-sidebar-left.p-sidebar-md,
diff --git a/src/views/sidebar/SidebarDemo.vue b/src/views/sidebar/SidebarDemo.vue
index e33b4602e..94c0743a1 100755
--- a/src/views/sidebar/SidebarDemo.vue
+++ b/src/views/sidebar/SidebarDemo.vue
@@ -67,3 +67,9 @@ export default {
     }
 }
 </script>
+
+<style lang="scss" scoped>
+h1 {
+    margin-top: 0;
+}
+</style>
\ No newline at end of file