Refactored Sidebar

components/lib/sidebar/style/SidebarStyle.js

@@ -22,8 +22,7 @@ const classes = {
             'p-sidebar-mask',
             {
                 'p-component-overlay p-component-overlay-enter': props.modal,
-                'p-sidebar-mask-scrollblocker': props.blockScroll,
+                'p-sidebar-open': instance.containerVisible,
-                'p-sidebar-visible': instance.containerVisible,
                 'p-sidebar-full': instance.fullScreen
             },
             pos ? `p-sidebar-${pos}` : ''
@@ -37,9 +36,8 @@ const classes = {
         }
     ],
     header: 'p-sidebar-header',
-    title: 'p-sidebar-header-content',
+    title: 'p-sidebar-title',
-    closeButton: 'p-sidebar-close p-sidebar-icon p-link',
+    closeButton: 'p-sidebar-close-button',
-    closeIcon: 'p-sidebar-close-icon',
     content: 'p-sidebar-content'
 };
 

components/lib/themes/primeone/base/sidebar/index.js

@@ -27,37 +27,11 @@ export default {
     padding: 1.125rem;
 }
 
-.p-sidebar-header-content {
+.p-sidebar-title {
     font-weight: 600;
     font-size: 1.25rem;
 }
 
-.p-sidebar-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    position: relative;
-    width: 1.75rem;
-    height: 1.75rem;
-    color: ${dt('sidebar.header.icon.color')};
-    border: 0 none;
-    background: transparent;
-    border-radius: 50%;
-    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
-    outline-color: transparent;
-}
-
-.p-sidebar-icon:enabled:hover {
-    background: ${dt('sidebar.header.icon.hover.background')};
-    color: ${dt('sidebar.header.icon.hover.color')};
-}
-
-.p-sidebar-icon:focus-visible {
-    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
-    outline-offset: ${dt('focus.ring.offset')};
-}
-
 .p-sidebar-full .p-sidebar {
     transition: none;
     transform: none;
@@ -170,7 +144,7 @@ export default {
     }
 }
 
-.p-sidebar-visible {
+.p-sidebar-open {
     display: flex;
 }
 `

components/lib/themes/primeone/presets/aura/sidebar/index.js

@@ -5,11 +5,6 @@ export default {
                 background: '{surface.0}',
                 borderColor: '{surface.200}',
                 color: '{surface.700}'
-            },
-            headerIcon: {
-                color: '{surface.500}',
-                hoverColor: '{surface.600}',
-                hoverBackground: '{surface.100}'
             }
         },
         dark: {
@@ -17,11 +12,6 @@ export default {
                 background: '{surface.900}',
                 borderColor: '{surface.700}',
                 color: '{surface.0}'
-            },
-            headerIcon: {
-                color: '{surface.400}',
-                hoverColor: '{surface.300}',
-                hoverBackground: '{surface.800}'
             }
         }
     }