diff options
Diffstat (limited to 'src/components/organisms/toolbar')
17 files changed, 866 insertions, 0 deletions
diff --git a/src/components/organisms/toolbar/main-nav.module.scss b/src/components/organisms/toolbar/main-nav.module.scss new file mode 100644 index 0000000..76af935 --- /dev/null +++ b/src/components/organisms/toolbar/main-nav.module.scss @@ -0,0 +1,88 @@ +@use "@styles/abstracts/functions" as fun; +@use "@styles/abstracts/mixins" as mix; + +.item { + @include mix.media("screen") { + @include mix.dimensions("md") { + .checkbox, + .label { + display: none; + } + + .modal { + position: relative; + } + } + } + + .modal { + @include mix.media("screen") { + @include mix.dimensions(null, "md") { + padding: var(--spacing-2xs); + background: var(--color-bg-secondary); + border-top: fun.convert-px(4) solid; + border-bottom: fun.convert-px(4) solid; + border-image: radial-gradient( + ellipse at top, + var(--color-primary-lighter) 20%, + var(--color-primary) 100% + ) + 1; + box-shadow: fun.convert-px(2) fun.convert-px(-2) fun.convert-px(3) + fun.convert-px(-1) var(--color-shadow-dark); + } + + @include mix.dimensions("sm", "md") { + border-left: fun.convert-px(4) solid; + border-right: fun.convert-px(4) solid; + } + + @include mix.dimensions("md") { + top: unset; + } + } + } + + .modal__list { + display: flex; + + @include mix.media("screen") { + @include mix.dimensions("sm", "md") { + flex-flow: column; + } + } + } + + .checkbox { + &:checked { + ~ .label .icon { + background: transparent; + border: transparent; + + &::before { + top: 0; + transform-origin: 50% 50%; + transform: rotate(-45deg); + } + + &::after { + bottom: 0; + transform-origin: 50% 50%; + transform: rotate(45deg); + } + } + } + + &:not(:checked) { + @include mix.media("screen") { + @include mix.dimensions("md") { + ~ .modal { + opacity: 1; + visibility: visible; + transform: none; + } + } + } + } + } +} diff --git a/src/components/organisms/toolbar/main-nav.stories.tsx b/src/components/organisms/toolbar/main-nav.stories.tsx new file mode 100644 index 0000000..27387c0 --- /dev/null +++ b/src/components/organisms/toolbar/main-nav.stories.tsx @@ -0,0 +1,75 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { useState } from 'react'; +import { IntlProvider } from 'react-intl'; +import MainNavComponent from './main-nav'; + +export default { + title: 'Organisms/Toolbar', + component: MainNavComponent, + argTypes: { + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the main nav wrapper.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, + isActive: { + control: { + type: null, + }, + description: 'Determine if the main nav is open or not.', + type: { + name: 'boolean', + required: true, + }, + }, + items: { + description: 'The main nav items.', + type: { + name: 'object', + required: true, + value: {}, + }, + }, + setIsActive: { + control: { + type: null, + }, + description: 'A callback function to change main nav state.', + type: { + name: 'function', + required: true, + }, + }, + }, +} as ComponentMeta<typeof MainNavComponent>; + +const Template: ComponentStory<typeof MainNavComponent> = ({ + isActive, + setIsActive: _setIsActive, + ...args +}) => { + const [isOpen, setIsOpen] = useState<boolean>(isActive); + + return ( + <IntlProvider locale="en"> + <MainNavComponent isActive={isOpen} setIsActive={setIsOpen} {...args} /> + </IntlProvider> + ); +}; + +export const MainNav = Template.bind({}); +MainNav.args = { + isActive: false, + items: [ + { id: 'home', label: 'Home', href: '#' }, + { id: 'contact', label: 'Contact', href: '#' }, + ], +}; diff --git a/src/components/organisms/toolbar/main-nav.test.tsx b/src/components/organisms/toolbar/main-nav.test.tsx new file mode 100644 index 0000000..6e50562 --- /dev/null +++ b/src/components/organisms/toolbar/main-nav.test.tsx @@ -0,0 +1,33 @@ +import { render, screen } from '@test-utils'; +import MainNav from './main-nav'; + +const items = [ + { id: 'home', label: 'Home', href: '/' }, + { id: 'blog', label: 'Blog', href: '/blog' }, + { id: 'contact', label: 'Contact', href: '/contact' }, +]; + +describe('MainNav', () => { + it('renders a checkbox to open main nav', () => { + render(<MainNav items={items} isActive={false} setIsActive={() => null} />); + expect(screen.getByRole('checkbox')).toHaveAccessibleName('Open menu'); + }); + + it('renders a checkbox to close main nav', () => { + render(<MainNav items={items} isActive={true} setIsActive={() => null} />); + expect(screen.getByRole('checkbox')).toHaveAccessibleName('Close menu'); + }); + + it('renders the correct number of items', () => { + render(<MainNav items={items} isActive={true} setIsActive={() => null} />); + expect(screen.getAllByRole('listitem')).toHaveLength(items.length); + }); + + it('renders some links with the right label', () => { + render(<MainNav items={items} isActive={true} setIsActive={() => null} />); + expect(screen.getByRole('link', { name: items[0].label })).toHaveAttribute( + 'href', + items[0].href + ); + }); +}); diff --git a/src/components/organisms/toolbar/main-nav.tsx b/src/components/organisms/toolbar/main-nav.tsx new file mode 100644 index 0000000..50bbe8b --- /dev/null +++ b/src/components/organisms/toolbar/main-nav.tsx @@ -0,0 +1,74 @@ +import Checkbox, { type CheckboxProps } from '@components/atoms/forms/checkbox'; +import Label from '@components/atoms/forms/label'; +import Hamburger from '@components/atoms/icons/hamburger'; +import Nav, { type NavItem } from '@components/molecules/nav/nav'; +import { VFC } from 'react'; +import { useIntl } from 'react-intl'; +import sharedStyles from './toolbar-items.module.scss'; +import mainNavStyles from './main-nav.module.scss'; + +export type MainNavProps = { + /** + * Set additional classnames to the nav element. + */ + className?: string; + /** + * The button state. + */ + isActive: CheckboxProps['value']; + /** + * The main nav items. + */ + items: NavItem[]; + /** + * A callback function to handle button state. + */ + setIsActive: CheckboxProps['setValue']; +}; + +const MainNav: VFC<MainNavProps> = ({ + className = '', + isActive, + items, + setIsActive, +}) => { + const intl = useIntl(); + const label = isActive + ? intl.formatMessage({ + defaultMessage: 'Close menu', + description: 'MainNav: Close label', + id: 'aJC7D2', + }) + : intl.formatMessage({ + defaultMessage: 'Open menu', + description: 'MainNav: Open label', + id: 'GTbGMy', + }); + + return ( + <div className={`${sharedStyles.item} ${mainNavStyles.item}`}> + <Checkbox + id="main-nav-button" + name="main-nav-button" + value={isActive} + setValue={setIsActive} + className={`${sharedStyles.checkbox} ${mainNavStyles.checkbox}`} + /> + <Label + htmlFor="main-nav-button" + aria-label={label} + className={`${sharedStyles.label} ${mainNavStyles.label}`} + > + <Hamburger iconClassName={mainNavStyles.icon} /> + </Label> + <Nav + kind="main" + items={items} + className={`${sharedStyles.modal} ${mainNavStyles.modal} ${className}`} + listClassName={mainNavStyles.modal__list} + /> + </div> + ); +}; + +export default MainNav; diff --git a/src/components/organisms/toolbar/search.module.scss b/src/components/organisms/toolbar/search.module.scss new file mode 100644 index 0000000..c310594 --- /dev/null +++ b/src/components/organisms/toolbar/search.module.scss @@ -0,0 +1,3 @@ +.modal { + padding-bottom: var(--spacing-md); +} diff --git a/src/components/organisms/toolbar/search.stories.tsx b/src/components/organisms/toolbar/search.stories.tsx new file mode 100644 index 0000000..8c2e871 --- /dev/null +++ b/src/components/organisms/toolbar/search.stories.tsx @@ -0,0 +1,63 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { useState } from 'react'; +import { IntlProvider } from 'react-intl'; +import SearchComponent from './search'; + +export default { + title: 'Organisms/Toolbar', + component: SearchComponent, + argTypes: { + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the modal wrapper.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, + isActive: { + control: { + type: null, + }, + description: 'Define the modal state: either opened or closed.', + type: { + name: 'boolean', + required: true, + }, + }, + setIsActive: { + control: { + type: null, + }, + description: 'A callback function to update modal state.', + type: { + name: 'function', + required: true, + }, + }, + }, +} as ComponentMeta<typeof SearchComponent>; + +const Template: ComponentStory<typeof SearchComponent> = ({ + isActive, + setIsActive: _setIsActive, + ...args +}) => { + const [isOpen, setIsOpen] = useState<boolean>(isActive); + + return ( + <IntlProvider locale="en"> + <SearchComponent isActive={isOpen} setIsActive={setIsOpen} {...args} /> + </IntlProvider> + ); +}; + +export const Search = Template.bind({}); +Search.args = { + isActive: false, +}; diff --git a/src/components/organisms/toolbar/search.test.tsx b/src/components/organisms/toolbar/search.test.tsx new file mode 100644 index 0000000..0ce09d8 --- /dev/null +++ b/src/components/organisms/toolbar/search.test.tsx @@ -0,0 +1,19 @@ +import { render, screen } from '@test-utils'; +import Search from './search'; + +describe('Search', () => { + it('renders a button to open search modal', () => { + render(<Search isActive={false} setIsActive={() => null} />); + expect(screen.getByRole('checkbox')).toHaveAccessibleName('Open search'); + }); + + it('renders a button to close search modal', () => { + render(<Search isActive={true} setIsActive={() => null} />); + expect(screen.getByRole('checkbox')).toHaveAccessibleName('Close search'); + }); + + it('renders a search form', () => { + render(<Search isActive={true} setIsActive={() => null} />); + expect(screen.getByRole('searchbox')).toBeInTheDocument(); + }); +}); diff --git a/src/components/organisms/toolbar/search.tsx b/src/components/organisms/toolbar/search.tsx new file mode 100644 index 0000000..070bce0 --- /dev/null +++ b/src/components/organisms/toolbar/search.tsx @@ -0,0 +1,66 @@ +import Checkbox, { CheckboxProps } from '@components/atoms/forms/checkbox'; +import Label from '@components/atoms/forms/label'; +import MagnifyingGlass from '@components/atoms/icons/magnifying-glass'; +import { VFC } from 'react'; +import { useIntl } from 'react-intl'; +import SearchModal from '../modals/search-modal'; +import sharedStyles from './toolbar-items.module.scss'; +import searchStyles from './search.module.scss'; + +export type SearchProps = { + /** + * Set additional classnames to the modal wrapper. + */ + className?: string; + /** + * The button state. + */ + isActive: CheckboxProps['value']; + /** + * A callback function to handle button state. + */ + setIsActive: CheckboxProps['setValue']; +}; + +const Search: VFC<SearchProps> = ({ + className = '', + isActive, + setIsActive, +}) => { + const intl = useIntl(); + const label = isActive + ? intl.formatMessage({ + defaultMessage: 'Close search', + id: 'LDDUNO', + description: 'Search: Close label', + }) + : intl.formatMessage({ + defaultMessage: 'Open search', + id: 'Xj+WXB', + description: 'Search: Open label', + }); + + return ( + <div className={`${sharedStyles.item} ${searchStyles.item}`}> + <Checkbox + id="search-button" + name="search-button" + value={isActive} + setValue={setIsActive} + className={`${sharedStyles.checkbox} ${searchStyles.checkbox}`} + /> + <Label + htmlFor="search-button" + aria-label={label} + className={`${sharedStyles.label} ${searchStyles.label}`} + > + <MagnifyingGlass /> + </Label> + <SearchModal + className={`${sharedStyles.modal} ${searchStyles.modal} ${className}`} + /> + </div> + ); +}; + +export default Search; diff --git a/src/components/organisms/toolbar/settings.module.scss b/src/components/organisms/toolbar/settings.module.scss new file mode 100644 index 0000000..08c8cd4 --- /dev/null +++ b/src/components/organisms/toolbar/settings.module.scss @@ -0,0 +1,10 @@ +@use "@styles/abstracts/functions" as fun; +@use "@styles/abstracts/mixins" as mix; + +.modal { + @include mix.media("screen") { + @include mix.dimensions("sm") { + width: 120%; + } + } +} diff --git a/src/components/organisms/toolbar/settings.stories.tsx b/src/components/organisms/toolbar/settings.stories.tsx new file mode 100644 index 0000000..f01e772 --- /dev/null +++ b/src/components/organisms/toolbar/settings.stories.tsx @@ -0,0 +1,76 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { useState } from 'react'; +import { IntlProvider } from 'react-intl'; +import SettingsComponent from './settings'; + +export default { + title: 'Organisms/Toolbar', + component: SettingsComponent, + argTypes: { + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the modal wrapper.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, + isActive: { + control: { + type: null, + }, + description: 'Define the modal state: either opened or closed.', + type: { + name: 'boolean', + required: true, + }, + }, + setIsActive: { + control: { + type: null, + }, + description: 'A callback function to update modal state.', + type: { + name: 'function', + required: true, + }, + }, + tooltipClassName: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the tooltip wrapper.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, + }, +} as ComponentMeta<typeof SettingsComponent>; + +const Template: ComponentStory<typeof SettingsComponent> = ({ + isActive, + setIsActive: _setIsActive, + ...args +}) => { + const [isOpen, setIsOpen] = useState<boolean>(isActive); + + return ( + <IntlProvider locale="en"> + <SettingsComponent isActive={isOpen} setIsActive={setIsOpen} {...args} /> + </IntlProvider> + ); +}; + +export const Settings = Template.bind({}); +Settings.args = { + isActive: false, +}; diff --git a/src/components/organisms/toolbar/settings.test.tsx b/src/components/organisms/toolbar/settings.test.tsx new file mode 100644 index 0000000..96a32c9 --- /dev/null +++ b/src/components/organisms/toolbar/settings.test.tsx @@ -0,0 +1,18 @@ +import { render, screen } from '@test-utils'; +import Settings from './settings'; + +describe('Settings', () => { + it('renders a button to open settings modal', () => { + render(<Settings isActive={false} setIsActive={() => null} />); + expect( + screen.getByRole('checkbox', { name: 'Open settings' }) + ).toBeInTheDocument(); + }); + + it('renders a button to close settings modal', () => { + render(<Settings isActive={true} setIsActive={() => null} />); + expect( + screen.getByRole('checkbox', { name: 'Close settings' }) + ).toBeInTheDocument(); + }); +}); diff --git a/src/components/organisms/toolbar/settings.tsx b/src/components/organisms/toolbar/settings.tsx new file mode 100644 index 0000000..88539fb --- /dev/null +++ b/src/components/organisms/toolbar/settings.tsx @@ -0,0 +1,72 @@ +import Checkbox, { CheckboxProps } from '@components/atoms/forms/checkbox'; +import Label from '@components/atoms/forms/label'; +import Cog from '@components/atoms/icons/cog'; +import { VFC } from 'react'; +import { useIntl } from 'react-intl'; +import SettingsModal from '../modals/settings-modal'; +import sharedStyles from './toolbar-items.module.scss'; +import settingsStyles from './settings.module.scss'; + +export type SettingsProps = { + /** + * Set additional classnames to the modal wrapper. + */ + className?: string; + /** + * The button state. + */ + isActive: CheckboxProps['value']; + /** + * A callback function to handle button state. + */ + setIsActive: CheckboxProps['setValue']; + /** + * Set additional classnames to the tooltip wrapper. + */ + tooltipClassName?: string; +}; + +const Settings: VFC<SettingsProps> = ({ + className = '', + isActive, + setIsActive, + tooltipClassName = '', +}) => { + const intl = useIntl(); + const label = isActive + ? intl.formatMessage({ + defaultMessage: 'Close settings', + id: '+viX9b', + description: 'Settings: Close label', + }) + : intl.formatMessage({ + defaultMessage: 'Open settings', + id: 'QCW3cy', + description: 'Settings: Open label', + }); + + return ( + <div className={`${sharedStyles.item} ${settingsStyles.item}`}> + <Checkbox + id="settings-button" + name="settings-button" + value={isActive} + setValue={setIsActive} + className={`${sharedStyles.checkbox} ${settingsStyles.checkbox}`} + /> + <Label + htmlFor="settings-button" + aria-label={label} + className={`${sharedStyles.label} ${settingsStyles.label}`} + > + <Cog /> + </Label> + <SettingsModal + className={`${sharedStyles.modal} ${settingsStyles.modal} ${className}`} + tooltipClassName={tooltipClassName} + /> + </div> + ); +}; + +export default Settings; diff --git a/src/components/organisms/toolbar/toolbar-items.module.scss b/src/components/organisms/toolbar/toolbar-items.module.scss new file mode 100644 index 0000000..fd526d6 --- /dev/null +++ b/src/components/organisms/toolbar/toolbar-items.module.scss @@ -0,0 +1,96 @@ +@use "@styles/abstracts/functions" as fun; +@use "@styles/abstracts/mixins" as mix; +@use "@styles/abstracts/placeholders"; + +.item { + --btn-size: #{fun.convert-px(65)}; + + display: flex; + position: relative; + + @include mix.media("screen") { + @include mix.dimensions("sm") { + justify-content: flex-end; + } + + @include mix.dimensions("md") { + justify-content: flex-end; + } + } +} + +.modal { + position: absolute; + top: var(--toolbar-size, calc(var(--btn-size) + var(--spacing-2xs))); + transition: all 0.8s ease-in-out 0s; + + @include mix.media("screen") { + @include mix.dimensions(null, "sm") { + left: 0; + right: 0; + } + } +} + +.label { + --draw-border-thickness: #{fun.convert-px(4)}; + --draw-border-color1: var(--color-primary-light); + --draw-border-color2: var(--color-primary-lighter); + + display: flex; + place-content: center; + place-items: center; + width: var(--btn-size); + height: var(--btn-size); + padding: var(--spacing-2xs); + + &:hover, + &:focus { + @extend %draw-borders; + } + + &:focus { + color: var(--color-primary-light); + } + + &:active { + --draw-border-color1: var(--color-primary-dark); + --draw-border-color2: var(--color-primary-light); + + @extend %draw-borders; + } +} + +.checkbox { + position: absolute; + top: calc(var(--btn-size) / 2); + left: calc(var(--btn-size) / 2); + opacity: 0; + cursor: pointer; + + &:hover, + &:focus { + ~ .label { + @extend %draw-borders; + } + } + + &:not(:checked) { + ~ .modal { + opacity: 0; + visibility: hidden; + + @include mix.media("screen") { + @include mix.dimensions(null, "sm") { + transform: translateX(-100vw); + } + + @include mix.dimensions("sm") { + transform: perspective(#{fun.convert-px(400)}) + translate3d(0, 0, #{fun.convert-px(-400)}); + transform-origin: 100% -50%; + } + } + } + } +} diff --git a/src/components/organisms/toolbar/toolbar.module.scss b/src/components/organisms/toolbar/toolbar.module.scss new file mode 100644 index 0000000..bb0a91f --- /dev/null +++ b/src/components/organisms/toolbar/toolbar.module.scss @@ -0,0 +1,80 @@ +@use "@styles/abstracts/functions" as fun; +@use "@styles/abstracts/mixins" as mix; +@use "@styles/abstracts/placeholders"; + +.wrapper { + --toolbar-size: #{fun.convert-px(75)}; + + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: space-around; + width: 100%; + height: var(--toolbar-size); + position: relative; + background: var(--color-bg); + border-top: fun.convert-px(4) solid; + border-image: radial-gradient( + ellipse at top, + var(--color-primary-lighter) 20%, + var(--color-primary) 100% + ) + 1; + box-shadow: 0 fun.convert-px(-2) fun.convert-px(3) fun.convert-px(-1) + var(--color-shadow-dark); + + .modal { + &--search, + &--settings { + min-width: 30ch; + } + } + + @include mix.media("screen") { + @include mix.dimensions(null, "2xs", "height") { + --toolbar-size: #{fun.convert-px(70)}; + } + + @include mix.dimensions(null, "sm") { + position: fixed; + bottom: 0; + left: 0; + z-index: 5; + + .modal { + top: unset; + bottom: calc(var(--toolbar-size) - #{fun.convert-px(4)}); + max-height: calc(100vh - var(--toolbar-size)); + } + + .tooltip { + top: unset; + bottom: calc(100% + var(--spacing-xs)); + transform-origin: bottom right; + } + } + + @include mix.dimensions("sm", "md") { + .modal { + top: calc(var(--toolbar-size) + var(--spacing-2xs)); + bottom: unset; + } + } + + @include mix.dimensions("sm") { + justify-content: flex-end; + gap: var(--spacing-sm); + + .tooltip { + transform-origin: top right; + } + } + + @include mix.dimensions("md") { + .tooltip { + width: 120%; + right: -10%; + } + } + } +} diff --git a/src/components/organisms/toolbar/toolbar.stories.tsx b/src/components/organisms/toolbar/toolbar.stories.tsx new file mode 100644 index 0000000..75d70d8 --- /dev/null +++ b/src/components/organisms/toolbar/toolbar.stories.tsx @@ -0,0 +1,26 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { IntlProvider } from 'react-intl'; +import ToolbarComponent from './toolbar'; + +export default { + title: 'Organisms/Toolbar', + component: ToolbarComponent, +} as ComponentMeta<typeof ToolbarComponent>; + +const Template: ComponentStory<typeof ToolbarComponent> = (args) => ( + <IntlProvider locale="en"> + <ToolbarComponent {...args} /> + </IntlProvider> +); + +const nav = [ + { id: 'home-link', href: '#', label: 'Home' }, + { id: 'blog-link', href: '#', label: 'Blog' }, + { id: 'cv-link', href: '#', label: 'CV' }, + { id: 'contact-link', href: '#', label: 'Contact' }, +]; + +export const Toolbar = Template.bind({}); +Toolbar.args = { + nav, +}; diff --git a/src/components/organisms/toolbar/toolbar.test.tsx b/src/components/organisms/toolbar/toolbar.test.tsx new file mode 100644 index 0000000..4bfe8a8 --- /dev/null +++ b/src/components/organisms/toolbar/toolbar.test.tsx @@ -0,0 +1,16 @@ +import { render, screen } from '@test-utils'; +import Toolbar from './toolbar'; + +const nav = [ + { id: 'home-link', href: '/', label: 'Home' }, + { id: 'blog-link', href: '/blog', label: 'Blog' }, + { id: 'cv-link', href: '/cv', label: 'CV' }, + { id: 'contact-link', href: '/contact', label: 'Contact' }, +]; + +describe('Toolbar', () => { + it('renders a navigation menu', () => { + render(<Toolbar nav={nav} />); + expect(screen.getByRole('navigation')).toBeInTheDocument(); + }); +}); diff --git a/src/components/organisms/toolbar/toolbar.tsx b/src/components/organisms/toolbar/toolbar.tsx new file mode 100644 index 0000000..81e80cf --- /dev/null +++ b/src/components/organisms/toolbar/toolbar.tsx @@ -0,0 +1,51 @@ +import { useState, VFC } from 'react'; +import MainNav, { type MainNavProps } from '../toolbar/main-nav'; +import Search from '../toolbar/search'; +import Settings from '../toolbar/settings'; +import styles from './toolbar.module.scss'; + +export type ToolbarProps = { + /** + * Set additional classnames to the toolbar wrapper. + */ + className?: string; + /** + * The main nav items. + */ + nav: MainNavProps['items']; +}; + +/** + * Toolbar component + * + * Render the website toolbar. + */ +const Toolbar: VFC<ToolbarProps> = ({ className = '', nav }) => { + const [isNavOpened, setIsNavOpened] = useState<boolean>(false); + const [isSettingsOpened, setIsSettingsOpened] = useState<boolean>(false); + const [isSearchOpened, setIsSearchOpened] = useState<boolean>(false); + + return ( + <div className={`${styles.wrapper} ${className}`}> + <MainNav + items={nav} + isActive={isNavOpened} + setIsActive={setIsNavOpened} + className={styles.modal} + /> + <Search + isActive={isSearchOpened} + setIsActive={setIsSearchOpened} + className={`${styles.modal} ${styles['modal--search']}`} + /> + <Settings + isActive={isSettingsOpened} + setIsActive={setIsSettingsOpened} + className={`${styles.modal} ${styles['modal--settings']}`} + tooltipClassName={styles.tooltip} + /> + </div> + ); +}; + +export default Toolbar; |