pl-fe: tailwind->scss migrations
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
@ -63,25 +63,25 @@ interface ISidebarLink {
|
||||
|
||||
const SidebarLink: React.FC<ISidebarLink> = React.memo(({ href, to, icon, text, onClick }) => {
|
||||
const body = (
|
||||
<HStack space={2} alignItems='center'>
|
||||
<div className='relative inline-flex rounded-lg bg-primary-100 p-2 dark:bg-gray-800'>
|
||||
<Icon src={icon} className='size-5 text-primary-500' />
|
||||
<>
|
||||
<div className='⁂-dropdown-navigation__icon'>
|
||||
<Icon src={icon} />
|
||||
</div>
|
||||
|
||||
<Text tag='span' weight='medium' theme='inherit'>{text}</Text>
|
||||
</HStack>
|
||||
</>
|
||||
);
|
||||
|
||||
if (to) {
|
||||
return (
|
||||
<NavLink className='group rounded-lg text-gray-900 hover:bg-gray-50 dark:text-gray-100 dark:hover:bg-gray-800' to={to} onClick={onClick}>
|
||||
<NavLink className='⁂-dropdown-navigation__link' to={to} onClick={onClick}>
|
||||
{body}
|
||||
</NavLink>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<a className='group rounded-lg text-gray-900 hover:bg-gray-50 dark:text-gray-100 dark:hover:bg-gray-800' href={href} target='_blank' onClick={onClick}>
|
||||
<a className='⁂-dropdown-navigation__link' href={href} target='_blank' onClick={onClick}>
|
||||
{body}
|
||||
</a>
|
||||
);
|
||||
@ -184,8 +184,9 @@ const SidebarMenu: React.FC = React.memo((): JSX.Element | null => {
|
||||
aria-expanded={isSidebarOpen}
|
||||
className={
|
||||
clsx({
|
||||
'z-[1000]': isSidebarOpen || sidebarVisible,
|
||||
hidden: !(isSidebarOpen || sidebarVisible),
|
||||
'⁂-dropdown-navigation__container': true,
|
||||
'⁂-dropdown-navigation__container--partially-visible': isSidebarOpen || sidebarVisible,
|
||||
'⁂-dropdown-navigation__container--visible': isSidebarOpen && sidebarVisible,
|
||||
})
|
||||
}
|
||||
ref={containerRef}
|
||||
@ -195,8 +196,8 @@ const SidebarMenu: React.FC = React.memo((): JSX.Element | null => {
|
||||
onTouchEnd={handleTouchEnd}
|
||||
>
|
||||
<div
|
||||
className={clsx('fixed inset-0 cursor-default bg-gray-500 black:bg-gray-900 no-reduce-motion:transition-opacity dark:bg-gray-700', {
|
||||
'no-reduce-motion:opacity-0': !(sidebarVisible && isSidebarOpen),
|
||||
className={clsx('⁂-dropdown-navigation__overlay', {
|
||||
'': !(sidebarVisible && isSidebarOpen),
|
||||
'opacity-20': (sidebarVisible && isSidebarOpen),
|
||||
})}
|
||||
role='button'
|
||||
@ -204,302 +205,293 @@ const SidebarMenu: React.FC = React.memo((): JSX.Element | null => {
|
||||
/>
|
||||
|
||||
<div
|
||||
className={
|
||||
clsx('fixed bottom-[60px] left-2 z-[1000] flex max-h-[calc(100dvh-68px)] w-full max-w-xs flex-1 origin-bottom-left flex-col overflow-hidden rounded-xl bg-white/90 shadow-lg backdrop-blur-md ease-in-out black:bg-black/90 no-reduce-motion:transition-transform dark:border dark:border-gray-800 dark:bg-primary-900/90 dark:shadow-none rtl:right-2 rtl:origin-bottom-right', {
|
||||
'scale-100': sidebarVisible && isSidebarOpen,
|
||||
'no-reduce-motion:scale-0': !(sidebarVisible && isSidebarOpen),
|
||||
})
|
||||
}
|
||||
className='⁂-dropdown-navigation'
|
||||
>
|
||||
<div className='relative size-full overflow-auto'>
|
||||
<div className='p-4'>
|
||||
{account ? (
|
||||
<Stack space={4}>
|
||||
<Link to={`/@${account.acct}`} onClick={closeSidebar}>
|
||||
<Account account={account} showAccountHoverCard={false} withLinkToProfile={false} />
|
||||
</Link>
|
||||
{account ? (
|
||||
<div>
|
||||
<Link to={`/@${account.acct}`} onClick={closeSidebar}>
|
||||
<Account account={account} showAccountHoverCard={false} withLinkToProfile={false} />
|
||||
</Link>
|
||||
|
||||
{!settings.demetricator && (
|
||||
<ProfileStats
|
||||
account={account}
|
||||
onClickHandler={handleClose}
|
||||
/>
|
||||
)}
|
||||
{!settings.demetricator && (
|
||||
<ProfileStats
|
||||
account={account}
|
||||
onClickHandler={handleClose}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Stack space={4}>
|
||||
<Divider />
|
||||
<Stack space={4}>
|
||||
<Divider />
|
||||
|
||||
<SidebarLink
|
||||
to={`/@${account.acct}`}
|
||||
icon={require('@tabler/icons/outline/user.svg')}
|
||||
text={intl.formatMessage(messages.profile)}
|
||||
onClick={closeSidebar}
|
||||
/>
|
||||
|
||||
{(account.locked || followRequestsCount > 0) && (
|
||||
<SidebarLink
|
||||
to='/follow_requests'
|
||||
icon={require('@tabler/icons/outline/user-plus.svg')}
|
||||
text={intl.formatMessage(messages.followRequests)}
|
||||
onClick={closeSidebar}
|
||||
/>
|
||||
)}
|
||||
|
||||
{(interactionRequestsCount > 0) && (
|
||||
<SidebarLink
|
||||
to='/interaction_requests'
|
||||
icon={require('@tabler/icons/outline/flag-question.svg')}
|
||||
text={intl.formatMessage(messages.interactionRequests)}
|
||||
onClick={closeSidebar}
|
||||
/>
|
||||
)}
|
||||
|
||||
{features.conversations && (
|
||||
<SidebarLink
|
||||
to='/conversations'
|
||||
icon={require('@tabler/icons/outline/mail.svg')}
|
||||
text={intl.formatMessage(messages.conversations)}
|
||||
onClick={closeSidebar}
|
||||
/>
|
||||
)}
|
||||
|
||||
{features.bookmarks && (
|
||||
<SidebarLink
|
||||
to='/bookmarks'
|
||||
icon={require('@tabler/icons/outline/bookmark.svg')}
|
||||
text={intl.formatMessage(messages.bookmarks)}
|
||||
onClick={closeSidebar}
|
||||
/>
|
||||
)}
|
||||
|
||||
{features.groups && (
|
||||
<SidebarLink
|
||||
to='/groups'
|
||||
icon={require('@tabler/icons/outline/circles.svg')}
|
||||
text={intl.formatMessage(messages.groups)}
|
||||
onClick={closeSidebar}
|
||||
/>
|
||||
)}
|
||||
|
||||
{features.lists && (
|
||||
<SidebarLink
|
||||
to='/lists'
|
||||
icon={require('@tabler/icons/outline/list.svg')}
|
||||
text={intl.formatMessage(messages.lists)}
|
||||
onClick={closeSidebar}
|
||||
/>
|
||||
)}
|
||||
|
||||
{features.circles && (
|
||||
<SidebarLink
|
||||
to='/circles'
|
||||
icon={require('@tabler/icons/outline/chart-circles.svg')}
|
||||
text={intl.formatMessage(messages.circles)}
|
||||
onClick={closeSidebar}
|
||||
/>
|
||||
)}
|
||||
|
||||
{features.events && (
|
||||
<SidebarLink
|
||||
to='/events'
|
||||
icon={require('@tabler/icons/outline/calendar-event.svg')}
|
||||
text={intl.formatMessage(messages.events)}
|
||||
onClick={closeSidebar}
|
||||
/>
|
||||
)}
|
||||
|
||||
{features.profileDirectory && (
|
||||
<SidebarLink
|
||||
to='/directory'
|
||||
icon={require('@tabler/icons/outline/address-book.svg')}
|
||||
text={intl.formatMessage(messages.profileDirectory)}
|
||||
onClick={closeSidebar}
|
||||
/>
|
||||
)}
|
||||
|
||||
{scheduledStatusCount > 0 && (
|
||||
<SidebarLink
|
||||
to='/scheduled_statuses'
|
||||
icon={require('@tabler/icons/outline/calendar-stats.svg')}
|
||||
text={intl.formatMessage(messages.scheduledStatuses)}
|
||||
onClick={closeSidebar}
|
||||
/>
|
||||
)}
|
||||
|
||||
{draftCount > 0 && (
|
||||
<SidebarLink
|
||||
to='/draft_statuses'
|
||||
icon={require('@tabler/icons/outline/notes.svg')}
|
||||
text={intl.formatMessage(messages.drafts)}
|
||||
onClick={closeSidebar}
|
||||
/>
|
||||
)}
|
||||
|
||||
{features.publicTimeline && <>
|
||||
<Divider />
|
||||
|
||||
<SidebarLink
|
||||
to='/timeline/local'
|
||||
icon={features.federating ? require('@tabler/icons/outline/affiliate.svg') : require('@tabler/icons/outline/world.svg')}
|
||||
text={features.federating ? <FormattedMessage id='tabs_bar.local' defaultMessage='Local' /> : <FormattedMessage id='tabs_bar.all' defaultMessage='All' />}
|
||||
onClick={closeSidebar}
|
||||
/>
|
||||
|
||||
{features.bubbleTimeline && (
|
||||
<SidebarLink
|
||||
to='/timeline/bubble'
|
||||
icon={require('@tabler/icons/outline/chart-bubble.svg')}
|
||||
text={<FormattedMessage id='tabs_bar.bubble' defaultMessage='Bubble' />}
|
||||
onClick={closeSidebar}
|
||||
/>
|
||||
)}
|
||||
|
||||
{features.federating && (
|
||||
<SidebarLink
|
||||
to='/timeline/fediverse'
|
||||
icon={require('@tabler/icons/outline/topology-star-ring-3.svg')}
|
||||
text={<FormattedMessage id='tabs_bar.fediverse' defaultMessage='Fediverse' />}
|
||||
onClick={closeSidebar}
|
||||
/>
|
||||
)}
|
||||
</>}
|
||||
|
||||
<Divider />
|
||||
|
||||
<SidebarLink
|
||||
to='/settings/preferences'
|
||||
icon={require('@tabler/icons/outline/settings.svg')}
|
||||
text={intl.formatMessage(messages.preferences)}
|
||||
onClick={closeSidebar}
|
||||
/>
|
||||
|
||||
{features.followedHashtagsList && (
|
||||
<SidebarLink
|
||||
to='/followed_tags'
|
||||
icon={require('@tabler/icons/outline/hash.svg')}
|
||||
text={intl.formatMessage(messages.followedTags)}
|
||||
onClick={closeSidebar}
|
||||
/>
|
||||
)}
|
||||
|
||||
{(account.is_admin || account.is_moderator) && (
|
||||
<SidebarLink
|
||||
to='/admin'
|
||||
icon={require('@tabler/icons/outline/dashboard.svg')}
|
||||
text={intl.formatMessage(messages.dashboard)}
|
||||
onClick={closeSidebar}
|
||||
// count={dashboardCount} WIP
|
||||
/>
|
||||
)}
|
||||
|
||||
<Divider />
|
||||
|
||||
<SidebarLink
|
||||
to='/logout'
|
||||
icon={require('@tabler/icons/outline/logout.svg')}
|
||||
text={intl.formatMessage(messages.logout)}
|
||||
onClick={onClickLogOut}
|
||||
/>
|
||||
|
||||
<Divider />
|
||||
|
||||
<SidebarLink
|
||||
href={sourceCode.url}
|
||||
icon={require('@tabler/icons/outline/code.svg')}
|
||||
text={intl.formatMessage(messages.sourceCode)}
|
||||
onClick={closeSidebar}
|
||||
/>
|
||||
|
||||
<Divider />
|
||||
|
||||
<Stack space={4}>
|
||||
<button type='button' onClick={handleSwitcherClick} className='py-1'>
|
||||
<HStack alignItems='center' justifyContent='between'>
|
||||
<Text tag='span'>
|
||||
<FormattedMessage id='profile_dropdown.switch_account' defaultMessage='Switch accounts' />
|
||||
</Text>
|
||||
|
||||
<Icon
|
||||
src={require('@tabler/icons/outline/chevron-down.svg')}
|
||||
className={clsx('size-4 text-gray-900 transition-transform dark:text-gray-100', {
|
||||
'rotate-180': switcher,
|
||||
})}
|
||||
/>
|
||||
</HStack>
|
||||
</button>
|
||||
|
||||
{switcher && (
|
||||
<div className='border-t-2 border-solid border-gray-100 black:border-t dark:border-gray-800'>
|
||||
{otherAccounts.map(account => renderAccount(account))}
|
||||
|
||||
<NavLink className='flex items-center space-x-1 py-2' to='/login/add' onClick={handleClose}>
|
||||
<Icon className='size-4 text-primary-500' src={require('@tabler/icons/outline/plus.svg')} />
|
||||
<Text size='sm' weight='medium'>{intl.formatMessage(messages.addAccount)}</Text>
|
||||
</NavLink>
|
||||
</div>
|
||||
)}
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
) : (
|
||||
<Stack space={4}>
|
||||
{features.publicTimeline && !restrictUnauth.timelines.local && <>
|
||||
<SidebarLink
|
||||
to='/timeline/local'
|
||||
icon={features.federating ? require('@tabler/icons/outline/affiliate.svg') : require('@tabler/icons/outline/world.svg')}
|
||||
text={features.federating ? <FormattedMessage id='tabs_bar.local' defaultMessage='Local' /> : <FormattedMessage id='tabs_bar.all' defaultMessage='All' />}
|
||||
onClick={closeSidebar}
|
||||
/>
|
||||
|
||||
{features.bubbleTimeline && !restrictUnauth.timelines.bubble && (
|
||||
<SidebarLink
|
||||
to='/timeline/bubble'
|
||||
icon={require('@tabler/icons/outline/chart-bubble.svg')}
|
||||
text={<FormattedMessage id='tabs_bar.bubble' defaultMessage='Bubble' />}
|
||||
onClick={closeSidebar}
|
||||
/>
|
||||
)}
|
||||
|
||||
{features.federating && !restrictUnauth.timelines.federated && (
|
||||
<SidebarLink
|
||||
to='/timeline/fediverse'
|
||||
icon={require('@tabler/icons/outline/topology-star-ring-3.svg')}
|
||||
text={<FormattedMessage id='tabs_bar.fediverse' defaultMessage='Fediverse' />}
|
||||
onClick={closeSidebar}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Divider />
|
||||
</>}
|
||||
<SidebarLink
|
||||
to={`/@${account.acct}`}
|
||||
icon={require('@tabler/icons/outline/user.svg')}
|
||||
text={intl.formatMessage(messages.profile)}
|
||||
onClick={closeSidebar}
|
||||
/>
|
||||
|
||||
{(account.locked || followRequestsCount > 0) && (
|
||||
<SidebarLink
|
||||
to='/login'
|
||||
icon={require('@tabler/icons/outline/login.svg')}
|
||||
text={intl.formatMessage(messages.login)}
|
||||
to='/follow_requests'
|
||||
icon={require('@tabler/icons/outline/user-plus.svg')}
|
||||
text={intl.formatMessage(messages.followRequests)}
|
||||
onClick={closeSidebar}
|
||||
/>
|
||||
)}
|
||||
|
||||
{isOpen && (
|
||||
<SidebarLink
|
||||
to='/signup'
|
||||
icon={require('@tabler/icons/outline/user-plus.svg')}
|
||||
text={intl.formatMessage(messages.register)}
|
||||
onClick={closeSidebar}
|
||||
/>
|
||||
)}
|
||||
{(interactionRequestsCount > 0) && (
|
||||
<SidebarLink
|
||||
to='/interaction_requests'
|
||||
icon={require('@tabler/icons/outline/flag-question.svg')}
|
||||
text={intl.formatMessage(messages.interactionRequests)}
|
||||
onClick={closeSidebar}
|
||||
/>
|
||||
)}
|
||||
|
||||
{features.conversations && (
|
||||
<SidebarLink
|
||||
to='/conversations'
|
||||
icon={require('@tabler/icons/outline/mail.svg')}
|
||||
text={intl.formatMessage(messages.conversations)}
|
||||
onClick={closeSidebar}
|
||||
/>
|
||||
)}
|
||||
|
||||
{features.bookmarks && (
|
||||
<SidebarLink
|
||||
to='/bookmarks'
|
||||
icon={require('@tabler/icons/outline/bookmark.svg')}
|
||||
text={intl.formatMessage(messages.bookmarks)}
|
||||
onClick={closeSidebar}
|
||||
/>
|
||||
)}
|
||||
|
||||
{features.groups && (
|
||||
<SidebarLink
|
||||
to='/groups'
|
||||
icon={require('@tabler/icons/outline/circles.svg')}
|
||||
text={intl.formatMessage(messages.groups)}
|
||||
onClick={closeSidebar}
|
||||
/>
|
||||
)}
|
||||
|
||||
{features.lists && (
|
||||
<SidebarLink
|
||||
to='/lists'
|
||||
icon={require('@tabler/icons/outline/list.svg')}
|
||||
text={intl.formatMessage(messages.lists)}
|
||||
onClick={closeSidebar}
|
||||
/>
|
||||
)}
|
||||
|
||||
{features.circles && (
|
||||
<SidebarLink
|
||||
to='/circles'
|
||||
icon={require('@tabler/icons/outline/chart-circles.svg')}
|
||||
text={intl.formatMessage(messages.circles)}
|
||||
onClick={closeSidebar}
|
||||
/>
|
||||
)}
|
||||
|
||||
{features.events && (
|
||||
<SidebarLink
|
||||
to='/events'
|
||||
icon={require('@tabler/icons/outline/calendar-event.svg')}
|
||||
text={intl.formatMessage(messages.events)}
|
||||
onClick={closeSidebar}
|
||||
/>
|
||||
)}
|
||||
|
||||
{features.profileDirectory && (
|
||||
<SidebarLink
|
||||
to='/directory'
|
||||
icon={require('@tabler/icons/outline/address-book.svg')}
|
||||
text={intl.formatMessage(messages.profileDirectory)}
|
||||
onClick={closeSidebar}
|
||||
/>
|
||||
)}
|
||||
|
||||
{scheduledStatusCount > 0 && (
|
||||
<SidebarLink
|
||||
to='/scheduled_statuses'
|
||||
icon={require('@tabler/icons/outline/calendar-stats.svg')}
|
||||
text={intl.formatMessage(messages.scheduledStatuses)}
|
||||
onClick={closeSidebar}
|
||||
/>
|
||||
)}
|
||||
|
||||
{draftCount > 0 && (
|
||||
<SidebarLink
|
||||
to='/draft_statuses'
|
||||
icon={require('@tabler/icons/outline/notes.svg')}
|
||||
text={intl.formatMessage(messages.drafts)}
|
||||
onClick={closeSidebar}
|
||||
/>
|
||||
)}
|
||||
|
||||
{features.publicTimeline && <>
|
||||
<Divider />
|
||||
|
||||
<SidebarLink
|
||||
href={sourceCode.url}
|
||||
icon={require('@tabler/icons/outline/code.svg')}
|
||||
text={intl.formatMessage(messages.sourceCode)}
|
||||
to='/timeline/local'
|
||||
icon={features.federating ? require('@tabler/icons/outline/affiliate.svg') : require('@tabler/icons/outline/world.svg')}
|
||||
text={features.federating ? <FormattedMessage id='tabs_bar.local' defaultMessage='Local' /> : <FormattedMessage id='tabs_bar.all' defaultMessage='All' />}
|
||||
onClick={closeSidebar}
|
||||
/>
|
||||
|
||||
{features.bubbleTimeline && (
|
||||
<SidebarLink
|
||||
to='/timeline/bubble'
|
||||
icon={require('@tabler/icons/outline/chart-bubble.svg')}
|
||||
text={<FormattedMessage id='tabs_bar.bubble' defaultMessage='Bubble' />}
|
||||
onClick={closeSidebar}
|
||||
/>
|
||||
)}
|
||||
|
||||
{features.federating && (
|
||||
<SidebarLink
|
||||
to='/timeline/fediverse'
|
||||
icon={require('@tabler/icons/outline/topology-star-ring-3.svg')}
|
||||
text={<FormattedMessage id='tabs_bar.fediverse' defaultMessage='Fediverse' />}
|
||||
onClick={closeSidebar}
|
||||
/>
|
||||
)}
|
||||
</>}
|
||||
|
||||
<Divider />
|
||||
|
||||
<SidebarLink
|
||||
to='/settings/preferences'
|
||||
icon={require('@tabler/icons/outline/settings.svg')}
|
||||
text={intl.formatMessage(messages.preferences)}
|
||||
onClick={closeSidebar}
|
||||
/>
|
||||
|
||||
{features.followedHashtagsList && (
|
||||
<SidebarLink
|
||||
to='/followed_tags'
|
||||
icon={require('@tabler/icons/outline/hash.svg')}
|
||||
text={intl.formatMessage(messages.followedTags)}
|
||||
onClick={closeSidebar}
|
||||
/>
|
||||
)}
|
||||
|
||||
{(account.is_admin || account.is_moderator) && (
|
||||
<SidebarLink
|
||||
to='/admin'
|
||||
icon={require('@tabler/icons/outline/dashboard.svg')}
|
||||
text={intl.formatMessage(messages.dashboard)}
|
||||
onClick={closeSidebar}
|
||||
// count={dashboardCount} WIP
|
||||
/>
|
||||
)}
|
||||
|
||||
<Divider />
|
||||
|
||||
<SidebarLink
|
||||
to='/logout'
|
||||
icon={require('@tabler/icons/outline/logout.svg')}
|
||||
text={intl.formatMessage(messages.logout)}
|
||||
onClick={onClickLogOut}
|
||||
/>
|
||||
|
||||
<Divider />
|
||||
|
||||
<SidebarLink
|
||||
href={sourceCode.url}
|
||||
icon={require('@tabler/icons/outline/code.svg')}
|
||||
text={intl.formatMessage(messages.sourceCode)}
|
||||
onClick={closeSidebar}
|
||||
/>
|
||||
|
||||
<Divider />
|
||||
|
||||
<Stack space={4}>
|
||||
<button type='button' onClick={handleSwitcherClick} className='py-1'>
|
||||
<HStack alignItems='center' justifyContent='between'>
|
||||
<Text tag='span'>
|
||||
<FormattedMessage id='profile_dropdown.switch_account' defaultMessage='Switch accounts' />
|
||||
</Text>
|
||||
|
||||
<Icon
|
||||
src={require('@tabler/icons/outline/chevron-down.svg')}
|
||||
className={clsx('size-4 text-gray-900 transition-transform dark:text-gray-100', {
|
||||
'rotate-180': switcher,
|
||||
})}
|
||||
/>
|
||||
</HStack>
|
||||
</button>
|
||||
|
||||
{switcher && (
|
||||
<div className='border-t-2 border-solid border-gray-100 black:border-t dark:border-gray-800'>
|
||||
{otherAccounts.map(account => renderAccount(account))}
|
||||
|
||||
<NavLink className='flex items-center space-x-1 py-2' to='/login/add' onClick={handleClose}>
|
||||
<Icon className='size-4 text-primary-500' src={require('@tabler/icons/outline/plus.svg')} />
|
||||
<Text size='sm' weight='medium'>{intl.formatMessage(messages.addAccount)}</Text>
|
||||
</NavLink>
|
||||
</div>
|
||||
)}
|
||||
</Stack>
|
||||
)}
|
||||
</Stack>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
{features.publicTimeline && !restrictUnauth.timelines.local && <>
|
||||
<SidebarLink
|
||||
to='/timeline/local'
|
||||
icon={features.federating ? require('@tabler/icons/outline/affiliate.svg') : require('@tabler/icons/outline/world.svg')}
|
||||
text={features.federating ? <FormattedMessage id='tabs_bar.local' defaultMessage='Local' /> : <FormattedMessage id='tabs_bar.all' defaultMessage='All' />}
|
||||
onClick={closeSidebar}
|
||||
/>
|
||||
|
||||
{features.bubbleTimeline && !restrictUnauth.timelines.bubble && (
|
||||
<SidebarLink
|
||||
to='/timeline/bubble'
|
||||
icon={require('@tabler/icons/outline/chart-bubble.svg')}
|
||||
text={<FormattedMessage id='tabs_bar.bubble' defaultMessage='Bubble' />}
|
||||
onClick={closeSidebar}
|
||||
/>
|
||||
)}
|
||||
|
||||
{features.federating && !restrictUnauth.timelines.federated && (
|
||||
<SidebarLink
|
||||
to='/timeline/fediverse'
|
||||
icon={require('@tabler/icons/outline/topology-star-ring-3.svg')}
|
||||
text={<FormattedMessage id='tabs_bar.fediverse' defaultMessage='Fediverse' />}
|
||||
onClick={closeSidebar}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Divider />
|
||||
</>}
|
||||
|
||||
<SidebarLink
|
||||
to='/login'
|
||||
icon={require('@tabler/icons/outline/login.svg')}
|
||||
text={intl.formatMessage(messages.login)}
|
||||
onClick={closeSidebar}
|
||||
/>
|
||||
|
||||
{isOpen && (
|
||||
<SidebarLink
|
||||
to='/signup'
|
||||
icon={require('@tabler/icons/outline/user-plus.svg')}
|
||||
text={intl.formatMessage(messages.register)}
|
||||
onClick={closeSidebar}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Divider />
|
||||
|
||||
<SidebarLink
|
||||
href={sourceCode.url}
|
||||
icon={require('@tabler/icons/outline/code.svg')}
|
||||
text={intl.formatMessage(messages.sourceCode)}
|
||||
onClick={closeSidebar}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -11,14 +11,14 @@ interface IDivider {
|
||||
|
||||
/** Divider */
|
||||
const Divider = ({ text, textSize = 'md' }: IDivider) => (
|
||||
<div className='relative' data-testid='divider'>
|
||||
<div className='absolute inset-0 flex items-center' aria-hidden='true'>
|
||||
<div className='w-full border-t-2 border-solid border-gray-100 black:border-t dark:border-gray-800' />
|
||||
<div className='⁂-divider' data-testid='divider'>
|
||||
<div aria-hidden='true'>
|
||||
<div />
|
||||
</div>
|
||||
|
||||
{text && (
|
||||
<div className='relative flex justify-center'>
|
||||
<span className='bg-white px-2 text-gray-700 black:bg-black dark:bg-gray-900 dark:text-gray-600' data-testid='divider-text'>
|
||||
<div className='⁂-divider__text'>
|
||||
<span data-testid='divider-text'>
|
||||
<Text size={textSize} tag='span' theme='inherit'>{text}</Text>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -41,6 +41,26 @@
|
||||
}
|
||||
}
|
||||
|
||||
.⁂-divider {
|
||||
@apply relative;
|
||||
|
||||
> div::first-child {
|
||||
@apply absolute inset-0 flex items-center;
|
||||
|
||||
> div {
|
||||
@apply w-full border-t-2 border-solid border-gray-100 black:border-t dark:border-gray-800;
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
@apply relative flex justify-center;
|
||||
|
||||
> span {
|
||||
@apply bg-white px-2 text-gray-700 black:bg-black dark:bg-gray-900 dark:text-gray-600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.⁂-list {
|
||||
@apply space-y-0.5;
|
||||
}
|
||||
|
||||
@ -19,6 +19,50 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
.⁂-dropdown-navigation {
|
||||
@apply fixed bottom-[60px] left-2 z-[1000] flex max-h-[calc(100dvh-68px)] w-full max-w-xs flex-1 origin-bottom-left flex-col overflow-hidden rounded-xl bg-white/90 shadow-lg backdrop-blur-md ease-in-out black:bg-black/90 no-reduce-motion:transition-transform dark:border dark:border-gray-800 dark:bg-primary-900/90 dark:shadow-none rtl:right-2 rtl:origin-bottom-right;
|
||||
|
||||
&__overlay {
|
||||
@apply fixed inset-0 cursor-default bg-gray-500 black:bg-gray-900 no-reduce-motion:transition-opacity dark:bg-gray-700;
|
||||
}
|
||||
|
||||
&__container {
|
||||
@apply z-1000;
|
||||
|
||||
&:not(&--partially-visible) {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
&--visible {
|
||||
.⁂-dropdown-navigation__overlay {
|
||||
@apply opacity-20;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(&--visible) {
|
||||
.⁂-dropdown-navigation__overlay {
|
||||
@apply no-reduce-motion:opacity-0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__link {
|
||||
@apply group rounded-lg text-gray-900 hover:bg-gray-50 dark:text-gray-100 dark:hover:bg-gray-800 flex flex-col gap-2 items-center;
|
||||
|
||||
&__icon {
|
||||
@apply relative inline-flex rounded-lg bg-primary-100 p-2 dark:bg-gray-800;
|
||||
|
||||
> div {
|
||||
@apply size-5 text-primary-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> div {
|
||||
@apply flex flex-col gap-y-4 relative size-full overflow-auto p-4;
|
||||
}
|
||||
}
|
||||
|
||||
.⁂-thumb-navigation {
|
||||
@apply fixed inset-x-0 bottom-0 z-50 flex w-full overflow-x-auto border-t border-solid border-gray-200 bg-white/90 shadow-2xl backdrop-blur-md black:bg-black/80 dark:border-gray-800 dark:bg-primary-900/90 lg:hidden;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user