diff options
7 files changed, 243 insertions, 63 deletions
diff --git a/src/components/organisms/layout/footer.module.scss b/src/components/organisms/layout/footer.module.scss index a809d3c..c180e86 100644 --- a/src/components/organisms/layout/footer.module.scss +++ b/src/components/organisms/layout/footer.module.scss @@ -11,6 +11,8 @@ @include mix.media("screen") { @include mix.dimensions("sm") { + --toolbar-size: 0px; + flex-flow: row wrap; font-size: var(--font-size-sm); } diff --git a/src/components/organisms/toolbar/main-nav.module.scss b/src/components/organisms/toolbar/main-nav.module.scss index 2aac85d..76af935 100644 --- a/src/components/organisms/toolbar/main-nav.module.scss +++ b/src/components/organisms/toolbar/main-nav.module.scss @@ -1,87 +1,87 @@ @use "@styles/abstracts/functions" as fun; @use "@styles/abstracts/mixins" as mix; -.modal { +.item { @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; + .checkbox, + .label { + display: none; + } - @include mix.media("screen") { - @include mix.dimensions("sm", "md") { - flex-flow: column; + .modal { + position: relative; + } } } -} -.checkbox { - &:checked { - ~ .label .icon { - background: transparent; - border: transparent; + .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); + } - &::before { - top: 0; - transform-origin: 50% 50%; - transform: rotate(-45deg); + @include mix.dimensions("sm", "md") { + border-left: fun.convert-px(4) solid; + border-right: fun.convert-px(4) solid; } - &::after { - bottom: 0; - transform-origin: 50% 50%; - transform: rotate(45deg); + @include mix.dimensions("md") { + top: unset; } } } - &:not(:checked) { + .modal__list { + display: flex; + @include mix.media("screen") { - @include mix.dimensions("md") { - ~ .modal { - opacity: 1; - visibility: visible; - transform: none; - } + @include mix.dimensions("sm", "md") { + flex-flow: column; } } } -} -.item { - @include mix.media("screen") { - @include mix.dimensions("md") { - .checkbox, - .label { - display: none; + .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); + } } + } - .modal { - position: relative; + &:not(:checked) { + @include mix.media("screen") { + @include mix.dimensions("md") { + ~ .modal { + opacity: 1; + visibility: visible; + transform: none; + } + } } } } diff --git a/src/components/organisms/toolbar/toolbar-items.module.scss b/src/components/organisms/toolbar/toolbar-items.module.scss index 86ff48e..fd526d6 100644 --- a/src/components/organisms/toolbar/toolbar-items.module.scss +++ b/src/components/organisms/toolbar/toolbar-items.module.scss @@ -6,10 +6,15 @@ --btn-size: #{fun.convert-px(65)}; display: flex; + position: relative; @include mix.media("screen") { @include mix.dimensions("sm") { - justify-content: center; + justify-content: flex-end; + } + + @include mix.dimensions("md") { + justify-content: flex-end; } } } @@ -83,7 +88,7 @@ @include mix.dimensions("sm") { transform: perspective(#{fun.convert-px(400)}) translate3d(0, 0, #{fun.convert-px(-400)}); - transform-origin: 50% -50%; + 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; |