@cyber-harbour/ui 1.0.64 → 1.0.65

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyber-harbour/ui",
-  "version": "1.0.64",
+  "version": "1.0.65",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

package/src/Core/Sidebar/Sidebar.tsx

@@ -1,35 +1,39 @@
 import { styled } from 'styled-components';
 import React from 'react';
 import { SidebarContext } from './SidebarContext';
+import { createComponent } from '../../Theme';
 
 export interface SidebarProps {
   defaultCollapsed?: boolean;
   children: any;
+  canGrow: boolean;
 }
 
 interface StyledProps {
   $collapsed: boolean;
+  $canGrow: boolean;
 }
 
-export const Sidebar = ({ defaultCollapsed, children }: SidebarProps) => {
+export const Sidebar = createComponent<SidebarProps>(({ defaultCollapsed, canGrow, children }) => {
   const [collapsed, setCollapsed] = React.useState(!!defaultCollapsed);
 
   return (
-    <StyledContainer $collapsed={collapsed}>
+    <StyledContainer $collapsed={collapsed} $canGrow={canGrow}>
       <SidebarContext.Provider
         value={{
           collapsed,
           setCollapsed,
+          canGrow,
         }}
       >
         {children}
       </SidebarContext.Provider>
     </StyledContainer>
   );
-};
+});
 
 const StyledContainer = styled.aside<StyledProps>(
-  ({ theme, $collapsed }) => `
+  ({ theme, $collapsed, $canGrow }) => `
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -40,10 +44,11 @@ const StyledContainer = styled.aside<StyledProps>(
     width: ${theme.sidebar.width};
     padding: 12px;
     height: 100%;
+    overflow: hidden auto;
     border-right: 1px solid ${theme.sidebar.border};
     background: ${theme.sidebar.background};
     ${
-      $collapsed
+      $collapsed || !$canGrow
         ? `
           width: 65px;
         `
@@ -64,7 +69,7 @@ const StyledContainer = styled.aside<StyledProps>(
 
       width: ${theme.sidebar.width};
       ${
-        $collapsed
+        $collapsed || !$canGrow
           ? `
           width: 65px;
         `

package/src/Core/Sidebar/SidebarContext.tsx

@@ -3,9 +3,11 @@ import { createContext } from 'react';
 interface SidebarContext {
   collapsed: boolean;
   setCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
+  canGrow: boolean;
 }
 
 export const SidebarContext = createContext<SidebarContext>({
   collapsed: false,
   setCollapsed: () => {},
+  canGrow: false,
 });

package/src/Core/Sidebar/SidebarDelimeter.tsx

@@ -4,15 +4,16 @@ import { styled } from 'styled-components';
 
 type StyledProps = {
   $collapsed: boolean;
+  $canGrow: boolean;
 };
 
 export const SidebarDelimeter = () => {
-  const { collapsed } = useContext(SidebarContext);
-  return <StyledDelimeter $collapsed={collapsed} />;
+  const { collapsed, canGrow } = useContext(SidebarContext);
+  return <StyledDelimeter $collapsed={collapsed} $canGrow={canGrow} />;
 };
 
 const StyledDelimeter = styled.div<StyledProps>(
-  ({ $collapsed, theme }) => `
+  ({ $collapsed, $canGrow, theme }) => `
         min-width: 32px;
         width: 0;
 
@@ -22,6 +23,7 @@ const StyledDelimeter = styled.div<StyledProps>(
 
     ${
       !$collapsed &&
+      $canGrow &&
       `
         & {
             width: 100%;

package/src/Core/Sidebar/SidebarItem.tsx

@@ -17,6 +17,7 @@ interface SidebarItemAnchor {
 type StyledProps = {
   $active: SidebarItemBase['active'];
   $collapsed: boolean;
+  $canGrow: boolean;
 };
 
 interface SidebarItemButton {
@@ -27,7 +28,7 @@ interface SidebarItemButton {
 export type SidebarItemProps = SidebarItemBase & (SidebarItemAnchor | SidebarItemButton);
 
 export const SidebarItem = ({ active, icon: Icon, label, ...props }: SidebarItemProps) => {
-  const { collapsed } = useContext(SidebarContext);
+  const { collapsed, canGrow } = useContext(SidebarContext);
 
   const isAnchor = 'href' in props;
 
@@ -37,10 +38,11 @@ export const SidebarItem = ({ active, icon: Icon, label, ...props }: SidebarItem
       as={isAnchor ? 'a' : 'button'}
       $collapsed={collapsed}
       $active={active}
+      $canGrow={canGrow}
       {...props}
     >
       {Icon && <Icon aria-label={label} width={16} height={16} />}
-      <StyledText $collapsed={collapsed} $active={active}>
+      <StyledText $collapsed={collapsed} $active={active} $canGrow={canGrow}>
         {label}
       </StyledText>
     </StyledItem>
@@ -48,7 +50,7 @@ export const SidebarItem = ({ active, icon: Icon, label, ...props }: SidebarItem
 };
 
 const StyledText = styled.span<StyledProps>(
-  ({ $collapsed }) => `
+  ({ $collapsed, $canGrow }) => `
   margin-top: 2px;
   overflow: hidden;
   white-space: nowrap;
@@ -62,18 +64,19 @@ const StyledText = styled.span<StyledProps>(
   font-family: Inter;
 
   ${
-    $collapsed &&
-    `
+    $collapsed || !$canGrow
+      ? `
     & {
       width: 0;
     }
     `
+      : ''
   }
 `
 );
 
 const StyledItem = styled.a<StyledProps>(
-  ({ $active, $collapsed, theme }) => `
+  ({ $active, $collapsed, $canGrow, theme }) => `
     display: flex;
     align-items: center;
     gap: 12px;
@@ -96,7 +99,7 @@ const StyledItem = styled.a<StyledProps>(
        `
         : ''
     }
-    ${$collapsed ? `gap: 0;` : ''}
+    ${$collapsed || !$canGrow ? `gap: 0;` : ''}