Skip to content

Commit

Permalink
feat(type): Add Sidebar to FlowbiteTheme
Browse files Browse the repository at this point in the history
```js
sidebar: {
    base: string;
    collapsed: FlowbiteBoolean;
    inner: string;
    collapse: {
      button: string;
      icon: {
        base: string;
        open: FlowbiteBoolean;
      };
      label: {
        base: string;
        icon: string;
      };
      list: string;
    };
    cta: {
      base: string;
      color: SidebarCTAColors;
    };
    item: {
      active: FlowbiteBoolean;
      base: string;
      collapsed: {
        insideCollapse: string;
      };
      content: {
        base: string;
        collapsed: string;
      };
      icon: {
        base: string;
        active: string;
      };
    };
    items: string;
    itemGroup: string;
    logo: {
      base: string;
      collapsed: FlowbiteBoolean;
      img: string;
    };
  };
```
  • Loading branch information
tulup-conner committed Jun 6, 2022
1 parent 957ea45 commit 36ad659
Show file tree
Hide file tree
Showing 2 changed files with 114 additions and 0 deletions.
48 changes: 48 additions & 0 deletions src/lib/components/Flowbite/FlowbiteTheme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import type { DeepPartial } from '../../helpers/deep-partial';
import type { PositionInButtonGroup } from '../Button/ButtonGroup';
import type { StarSizes } from '../Rating';
import type { ModalPositions, ModalSizes } from '../Modal';
import type { SidebarCTAColors } from '../Sidebar/SidebarCTA';

export type CustomFlowbiteTheme = DeepPartial<FlowbiteTheme>;

Expand Down Expand Up @@ -212,6 +213,49 @@ export interface FlowbiteTheme {
};
};
};
sidebar: {
base: string;
collapsed: FlowbiteBoolean;
inner: string;
collapse: {
button: string;
icon: {
base: string;
open: FlowbiteBoolean;
};
label: {
base: string;
icon: string;
};
list: string;
};
cta: {
base: string;
color: SidebarCTAColors;
};
item: {
active: string;
base: string;
collapsed: {
insideCollapse: string;
};
content: {
base: string;
collapsed: string;
};
icon: {
base: string;
active: string;
};
};
items: string;
itemGroup: string;
logo: {
base: string;
collapsed: FlowbiteBoolean;
img: string;
};
};
spinner: {
base: string;
color: SpinnerColors;
Expand Down Expand Up @@ -265,19 +309,23 @@ export interface FlowbiteBoolean {
}

export interface FlowbiteColors {
blue: string;
cyan: string;
dark: string;
failure: string;
gray: string;
green: string;
indigo: string;
info: string;
light: string;
lime: string;
pink: string;
purple: string;
red: string;
success: string;
teal: string;
warning: string;
yellow: string;
}

export interface FlowbiteGradientColors {
Expand Down
66 changes: 66 additions & 0 deletions src/lib/theme/default.ts
Original file line number Diff line number Diff line change
Expand Up @@ -357,6 +357,72 @@ export default {
},
},
},
sidebar: {
base: 'h-full',
inner: 'h-full overflow-y-auto overflow-x-hidden rounded bg-white py-4 px-3 dark:bg-gray-800',
collapsed: {
on: 'w-16',
off: 'w-64',
},
collapse: {
button:
'group flex w-full items-center rounded-lg p-2 text-base font-normal text-gray-900 transition duration-75 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700',
icon: {
base: 'h-6 w-6 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white',
open: {
off: '',
on: 'text-gray-900',
},
},
label: {
base: 'ml-3 flex-1 whitespace-nowrap text-left',
icon: 'h-6 w-6',
},
list: 'space-y-2 py-2',
},
cta: {
base: 'mt-6 rounded-lg p-4',
color: {
blue: 'bg-blue-50 dark:bg-blue-900',
dark: 'bg-dark-50 dark:bg-dark-900',
failure: 'bg-red-50 dark:bg-red-900',
gray: 'bg-alternative-50 dark:bg-alternative-900',
green: 'bg-green-50 dark:bg-green-900',
light: 'bg-light-50 dark:bg-light-900',
red: 'bg-red-50 dark:bg-red-900',
purple: 'bg-purple-50 dark:bg-purple-900',
success: 'bg-green-50 dark:bg-green-900',
yellow: 'bg-yellow-50 dark:bg-yellow-900',
warning: 'bg-yellow-50 dark:bg-yellow-900',
},
},
item: {
base: 'flex items-center rounded-lg p-2 text-base font-normal text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700',
active: 'bg-gray-100 dark:bg-gray-700',
collapsed: {
insideCollapse: 'group w-full pl-8 transition duration-75',
},
content: {
base: 'ml-3 flex-1 whitespace-nowrap',
collapsed: 'hidden',
},
icon: {
base: 'h-6 w-6 flex-shrink-0 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white',
active: 'text-gray-700 dark:text-gray-100',
},
},
items: '',
itemGroup:
'mt-4 space-y-2 border-t border-gray-200 pt-4 first:mt-0 first:border-t-0 first:pt-0 dark:border-gray-700',
logo: {
base: 'mb-5 flex items-center pl-2.5',
collapsed: {
on: 'hidden',
off: 'self-center whitespace-nowrap text-xl font-semibold dark:text-white',
},
img: 'mr-3 h-6 sm:h-7',
},
},
spinner: {
base: 'inline animate-spin text-gray-200',
color: {
Expand Down

0 comments on commit 36ad659

Please sign in to comment.