fix: update Sidebar styles

Author: tanerengiiin

packages/@primereact/styles/src/sidebar/Sidebar.style.ts

@@ -2,13 +2,12 @@ import { createStyles } from '@primereact/styles/utils';
 import type { SidebarRootInstance } from '@primereact/types/primitive/sidebar';
 
 const theme = /*css*/ `
-    .p-sidebar { position: relative; z-index: 20; display: none; color: light-dark(var(--p-surface-700), var(--p-surface-200)); }
+    .p-sidebar { position: relative; z-index: 20; color: light-dark(var(--p-surface-700), var(--p-surface-200)); }
     .p-sidebar[data-overlay] { z-index: 30; }
-    @media (min-width: 768px) { .p-sidebar { display: block; } }
     .p-sidebar[data-collapsible-mode="none"] { display: flex; width: var(--sidebar-width); flex-direction: column; background-color: light-dark(var(--p-surface-0), var(--p-surface-950)); }
     .p-sidebar[data-collapsible-mode="none"][data-variant="inset"] { background-color: light-dark(var(--p-surface-50), var(--p-surface-900)); }
     
-    .p-sidebar-spacer { position: relative; background: transparent; transition: width 250ms cubic-bezier(.4, 0, .2, 1); }
+    .p-sidebar-spacer { position: relative; flex-shrink: 0; background: transparent; transition: width 250ms cubic-bezier(.4, 0, .2, 1); }
     .p-sidebar:not([data-overlay]) > .p-sidebar-spacer { width: var(--sidebar-width); }
     .p-sidebar[data-collapsible="offcanvas"]:not([data-overlay]) > .p-sidebar-spacer { width: 0; }
     .p-sidebar[data-collapsible="icon"]:not([data-overlay]) > .p-sidebar-spacer { width: var(--sidebar-width-icon); }
@@ -20,8 +19,7 @@ const theme = /*css*/ `
     .p-sidebar[data-overlay][data-variant="inset"]:not([data-collapsible-mode="offcanvas"]) > .p-sidebar-spacer { width: calc(var(--sidebar-width-icon) + 0.5rem); }
     .p-sidebar[data-side="right"] > .p-sidebar-spacer { transform: rotate(180deg); }
     
-    .p-sidebar-panel { position: absolute; inset-block: 0; z-index: 10; display: none; height: 100%; width: var(--sidebar-width); transition: left 250ms cubic-bezier(.4, 0, .2, 1), right 250ms cubic-bezier(.4, 0, .2, 1), width 250ms cubic-bezier(.4, 0, .2, 1); }
-    @media (min-width: 768px) { .p-sidebar-panel { display: flex; } }
+    .p-sidebar-panel { position: absolute; inset-block: 0; z-index: 10; display: flex; height: 100%; width: var(--sidebar-width); transition: left 250ms cubic-bezier(.4, 0, .2, 1), right 250ms cubic-bezier(.4, 0, .2, 1), width 250ms cubic-bezier(.4, 0, .2, 1); }
     .p-sidebar[data-overlay] .p-sidebar-panel { z-index: 20; }
     .p-sidebar[data-side="left"] .p-sidebar-panel { left: 0; }
     .p-sidebar[data-side="left"][data-collapsible="offcanvas"] .p-sidebar-panel { left: calc(var(--sidebar-width) * -1); }

packages/tailwind/src/sidebar.tsx

@@ -37,8 +37,7 @@ function Sidebar({ className, ...props }: SidebarRootProps) {
     return (
         <PRSidebar.Root
             className={cn(
-                `group/sidebar relative z-20 hidden text-surface-700 dark:text-surface-200
-                md:block
+                `group/sidebar relative z-20 text-surface-700 dark:text-surface-200
                 data-overlay:z-30
                 data-[collapsible-mode=none]:flex! data-[collapsible-mode=none]:w-(--sidebar-width) data-[collapsible-mode=none]:flex-col data-[collapsible-mode=none]:bg-surface-0 dark:data-[collapsible-mode=none]:bg-surface-950
                 data-[collapsible-mode=none]:data-[variant=inset]:bg-surface-50 dark:data-[collapsible-mode=none]:data-[variant=inset]:bg-surface-900
@@ -54,7 +53,7 @@ function SidebarSpacer({ className, ...props }: SidebarSpacerProps) {
     return (
         <PRSidebar.Spacer
             className={cn(
-                `relative bg-transparent transition-[width] duration-250 ease-in-out
+                `relative shrink-0 bg-transparent transition-[width] duration-250 ease-in-out
                 w-(--sidebar-width)
                 group-data-[side=right]/sidebar:rotate-180
                 group-data-[collapsible=offcanvas]/sidebar:w-0
@@ -74,7 +73,7 @@ function SidebarPanel({ className, ...props }: SidebarPanelProps) {
     return (
         <PRSidebar.Panel
             className={cn(
-                `absolute inset-y-0 z-10 hidden h-full w-(--sidebar-width) md:flex
+                `absolute inset-y-0 z-10 flex h-full w-(--sidebar-width)
                 transition-[left,right,width] duration-250 ease-in-out
                 group-data-overlay/sidebar:z-20
                 group-data-[side=left]/sidebar:left-0