From a804812ba30aabb557f78f49fd519d4320922b70 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= Date: Wed, 15 Oct 2025 11:43:15 +0200 Subject: [PATCH] pl-fe: some of you do not like how fucking TALL the left sidebar is MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: nicole mikołajczyk --- .../components/sidebar-navigation-link.tsx | 23 ++---- .../src/components/sidebar-navigation.tsx | 22 +----- packages/pl-fe/src/styles/new/layout.scss | 72 +++++++++++++++++-- 3 files changed, 76 insertions(+), 41 deletions(-) diff --git a/packages/pl-fe/src/components/sidebar-navigation-link.tsx b/packages/pl-fe/src/components/sidebar-navigation-link.tsx index 04202d160..609285925 100644 --- a/packages/pl-fe/src/components/sidebar-navigation-link.tsx +++ b/packages/pl-fe/src/components/sidebar-navigation-link.tsx @@ -5,7 +5,6 @@ import { NavLink } from 'react-router-dom'; import { useSettings } from 'pl-fe/hooks/use-settings'; import Icon from './ui/icon'; -import Text from './ui/text'; interface ISidebarNavigationLink { /** Notification count, if any. */ @@ -22,12 +21,11 @@ interface ISidebarNavigationLink { to?: string; /** Callback when the link is clicked. */ onClick?: React.EventHandler; - shrink?: boolean; } /** Desktop sidebar navigation link. */ const SidebarNavigationLink = React.memo(React.forwardRef((props: ISidebarNavigationLink, ref: React.ForwardedRef): JSX.Element => { - const { icon, activeIcon, text, to = '', count, countMax, onClick, shrink } = props; + const { icon, activeIcon, text, to = '', count, countMax, onClick } = props; const isActive = location.pathname === to; const { demetricator } = useSettings(); @@ -47,32 +45,21 @@ const SidebarNavigationLink = React.memo(React.forwardRef((props: ISidebarNaviga ref={ref} onClick={handleClick} className={clsx({ - 'group flex items-center py-2 text-sm font-semibold space-x-4 rtl:space-x-reverse transition-colors duration-200': true, - 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200': !isActive, - 'text-gray-900 dark:text-white': isActive, + '⁂-sidebar-navigation-link': true, + '⁂-sidebar-navigation-link--active': isActive, })} > - {!shrink && ( - {text} - )} +

{text}

); }), (prevProps, nextProps) => prevProps.count === nextProps.count); diff --git a/packages/pl-fe/src/components/sidebar-navigation.tsx b/packages/pl-fe/src/components/sidebar-navigation.tsx index c8af4df0d..3c6d599f1 100644 --- a/packages/pl-fe/src/components/sidebar-navigation.tsx +++ b/packages/pl-fe/src/components/sidebar-navigation.tsx @@ -199,7 +199,7 @@ const SidebarNavigation: React.FC = React.memo(({ shrink }) }, [!!account, features, followRequestsCount, interactionRequestsCount, scheduledStatusCount, draftCount]); return ( -
+
{account && ( @@ -233,13 +233,12 @@ const SidebarNavigation: React.FC = React.memo(({ shrink }) )} - +
} - shrink={shrink} /> = React.memo(({ shrink }) icon={require('@phosphor-icons/core/regular/magnifying-glass.svg')} activeIcon={require('@phosphor-icons/core/fill/magnifying-glass-fill.svg')} text={} - shrink={shrink} /> {account && ( @@ -258,7 +256,6 @@ const SidebarNavigation: React.FC = React.memo(({ shrink }) activeIcon={require('@phosphor-icons/core/fill/bell-simple-fill.svg')} count={notificationCount} text={} - shrink={shrink} /> {features.chats && ( @@ -269,7 +266,6 @@ const SidebarNavigation: React.FC = React.memo(({ shrink }) count={unreadChatsCount} countMax={9} text={} - shrink={shrink} /> )} @@ -279,7 +275,6 @@ const SidebarNavigation: React.FC = React.memo(({ shrink }) icon={require('@phosphor-icons/core/regular/envelope-simple.svg')} activeIcon={require('@phosphor-icons/core/fill/envelope-simple-fill.svg')} text={} - shrink={shrink} /> )} @@ -289,7 +284,6 @@ const SidebarNavigation: React.FC = React.memo(({ shrink }) icon={require('@phosphor-icons/core/regular/users-three.svg')} activeIcon={require('@phosphor-icons/core/fill/users-three-fill.svg')} text={} - shrink={shrink} /> )} @@ -298,7 +292,6 @@ const SidebarNavigation: React.FC = React.memo(({ shrink }) icon={require('@phosphor-icons/core/regular/user.svg')} activeIcon={require('@phosphor-icons/core/fill/user-fill.svg')} text={} - shrink={shrink} /> = React.memo(({ shrink }) icon={require('@phosphor-icons/core/regular/sliders-horizontal.svg')} activeIcon={require('@phosphor-icons/core/fill/sliders-horizontal-fill.svg')} text={} - shrink={shrink} /> {(account.is_admin || account.is_moderator) && ( @@ -316,7 +308,6 @@ const SidebarNavigation: React.FC = React.memo(({ shrink }) activeIcon={require('@phosphor-icons/core/fill/gauge-fill.svg')} count={dashboardCount} text={} - shrink={shrink} /> )} @@ -330,7 +321,6 @@ const SidebarNavigation: React.FC = React.memo(({ shrink }) icon={require('@phosphor-icons/core/regular/wrench.svg')} activeIcon={require('@phosphor-icons/core/fill/wrench-fill.svg')} text={} - shrink={shrink} /> )} @@ -340,7 +330,6 @@ const SidebarNavigation: React.FC = React.memo(({ shrink }) icon={require('@phosphor-icons/core/regular/planet.svg')} activeIcon={require('@phosphor-icons/core/fill/planet-fill.svg')} text={features.federating ? : } - shrink={shrink} /> )} @@ -350,7 +339,6 @@ const SidebarNavigation: React.FC = React.memo(({ shrink }) icon={require('@phosphor-icons/core/regular/graph.svg')} activeIcon={require('@phosphor-icons/core/fill/graph-fill.svg')} text={} - shrink={shrink} /> )} @@ -360,7 +348,6 @@ const SidebarNavigation: React.FC = React.memo(({ shrink }) icon={require('@phosphor-icons/core/regular/fediverse-logo.svg')} activeIcon={require('@phosphor-icons/core/fill/fediverse-logo-fill.svg')} text={} - shrink={shrink} /> )} @@ -371,7 +358,6 @@ const SidebarNavigation: React.FC = React.memo(({ shrink }) } - shrink={shrink} /> )} @@ -383,7 +369,6 @@ const SidebarNavigation: React.FC = React.memo(({ shrink }) icon={require('@phosphor-icons/core/regular/sign-in.svg')} activeIcon={require('@phosphor-icons/core/fill/sign-in-fill.svg')} text={} - shrink={shrink} /> {isOpen && = React.memo(({ shrink }) icon={require('@phosphor-icons/core/regular/user-plus.svg')} activeIcon={require('@phosphor-icons/core/fill/user-plus-fill.svg')} text={} - shrink={shrink} />} )} - +
{account && ( diff --git a/packages/pl-fe/src/styles/new/layout.scss b/packages/pl-fe/src/styles/new/layout.scss index fb356889c..bd7cb2f58 100644 --- a/packages/pl-fe/src/styles/new/layout.scss +++ b/packages/pl-fe/src/styles/new/layout.scss @@ -1,3 +1,5 @@ +@use 'mixins'; + html { height: 100%; } @@ -134,18 +136,80 @@ body { } .⁂-sidebar-navigation { - @apply flex flex-col gap-4; + display: flex; + flex-direction: column; + gap: 1rem; .⁂-site-logo { - @apply h-12 w-auto cursor-pointer; + height: 3rem; + width: auto; + cursor: pointer; } &--narrow { - @apply items-center; + align-items: center; .⁂-site-logo { - @apply max-w-10 h-auto; + max-width: 2.5rem; + height: auto; } + + .⁂-sidebar-navigation-link > p { + display: none; + } + } + + &__links { + @apply flex flex-col gap-y-1.5; + } +} + +.⁂-sidebar-navigation-link { + @apply flex items-center py-1 text-sm font-semibold space-x-4 rtl:space-x-reverse transition-colors duration-200; + + @media (height >= 960px) { + padding: 0.5rem 0; + } + + &__icon { + @apply relative rounded-lg inline-flex p-2.5 transition-colors duration-200; + + svg { + width: 1.25rem; + height: 1.25rem; + } + } + + &--active { + @apply text-gray-900 dark:text-white; + + .⁂-sidebar-navigation-link__icon { + @apply bg-primary-600; + + svg { + @apply text-white; + } + } + } + + &:not(&--active) { + @apply text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200; + + .⁂-sidebar-navigation-link__icon { + @apply bg-primary-50 dark:bg-gray-900; + + svg { + @apply text-primary-700 dark:text-white; + } + } + } + + &:hover:not(&--active) &__icon { + @apply bg-primary-100 dark:bg-gray-700 black:bg-gray-800; + } + + > p { + @include mixins.text($weight: semibold, $theme: inherit); } }