pl-fe: some of you do not like how fucking TALL the left sidebar is

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
2025-10-15 11:43:15 +02:00
parent cb3ea92d63
commit a804812ba3
3 changed files with 76 additions and 41 deletions
--- 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<React.MouseEvent>;
-    shrink?: boolean;
 }

 /** Desktop sidebar navigation link. */
 const SidebarNavigationLink = React.memo(React.forwardRef((props: ISidebarNavigationLink, ref: React.ForwardedRef<HTMLAnchorElement>): 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,
      })}
    >
      <span
-        className={clsx({
-          'relative rounded-lg inline-flex p-2.5 transition-colors duration-200': true,
-          'bg-primary-50 group-hover:bg-primary-100 dark:bg-gray-900 dark:group-hover:bg-gray-700 black:group-hover:bg-gray-800': !isActive,
-          'bg-primary-600': isActive,
-        })}
+        className='⁂-sidebar-navigation-link__icon'
      >
        <Icon
          src={(isActive && activeIcon) || icon}
          count={demetricator ? undefined : count}
          countMax={countMax}
-          className={clsx('size-5', {
-            'text-primary-700 dark:text-white': !isActive,
-            'text-white': isActive,
-          })}
        />
      </span>

-      {!shrink && (
-        <Text weight='semibold' theme='inherit'>{text}</Text>
-      )}
+      <p>{text}</p>
    </NavLink>
  );
 }), (prevProps, nextProps) => prevProps.count === nextProps.count);
--- 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<ISidebarNavigation> = React.memo(({ shrink })
  }, [!!account, features, followRequestsCount, interactionRequestsCount, scheduledStatusCount, draftCount]);

  return (
-    <div className={clsx('⁂-sidebar-navigation', { '⁂-sidebar-navigation__narrow': shrink })}>
+    <div className={clsx('⁂-sidebar-navigation', { '⁂-sidebar-navigation--narrow': shrink })}>
      <SiteLogo />

      {account && (
@ -233,13 +233,12 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
        </Stack>
      )}

-      <Stack space={1.5}>
+      <div className='⁂-sidebar-navigation__links'>
        <SidebarNavigationLink
          to='/'
          icon={require('@phosphor-icons/core/regular/house.svg')}
          activeIcon={require('@phosphor-icons/core/fill/house-fill.svg')}
          text={<FormattedMessage id='tabs_bar.home' defaultMessage='Home' />}
-          shrink={shrink}
        />

        <SidebarNavigationLink
@ -247,7 +246,6 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
          icon={require('@phosphor-icons/core/regular/magnifying-glass.svg')}
          activeIcon={require('@phosphor-icons/core/fill/magnifying-glass-fill.svg')}
          text={<FormattedMessage id='tabs_bar.search' defaultMessage='Search' />}
-          shrink={shrink}
        />

        {account && (
@ -258,7 +256,6 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
              activeIcon={require('@phosphor-icons/core/fill/bell-simple-fill.svg')}
              count={notificationCount}
              text={<FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' />}
-              shrink={shrink}
            />

            {features.chats && (
@ -269,7 +266,6 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
                count={unreadChatsCount}
                countMax={9}
                text={<FormattedMessage id='navigation.chats' defaultMessage='Chats' />}
-                shrink={shrink}
              />
            )}

@ -279,7 +275,6 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
                icon={require('@phosphor-icons/core/regular/envelope-simple.svg')}
                activeIcon={require('@phosphor-icons/core/fill/envelope-simple-fill.svg')}
                text={<FormattedMessage id='navigation.direct_messages' defaultMessage='Direct messages' />}
-                shrink={shrink}
              />
            )}

@ -289,7 +284,6 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
                icon={require('@phosphor-icons/core/regular/users-three.svg')}
                activeIcon={require('@phosphor-icons/core/fill/users-three-fill.svg')}
                text={<FormattedMessage id='tabs_bar.groups' defaultMessage='Groups' />}
-                shrink={shrink}
              />
            )}

@ -298,7 +292,6 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
              icon={require('@phosphor-icons/core/regular/user.svg')}
              activeIcon={require('@phosphor-icons/core/fill/user-fill.svg')}
              text={<FormattedMessage id='tabs_bar.profile' defaultMessage='Profile' />}
-              shrink={shrink}
            />

            <SidebarNavigationLink
@ -306,7 +299,6 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
              icon={require('@phosphor-icons/core/regular/sliders-horizontal.svg')}
              activeIcon={require('@phosphor-icons/core/fill/sliders-horizontal-fill.svg')}
              text={<FormattedMessage id='tabs_bar.settings' defaultMessage='Settings' />}
-              shrink={shrink}
            />

            {(account.is_admin || account.is_moderator) && (
@ -316,7 +308,6 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
                activeIcon={require('@phosphor-icons/core/fill/gauge-fill.svg')}
                count={dashboardCount}
                text={<FormattedMessage id='tabs_bar.dashboard' defaultMessage='Dashboard' />}
-                shrink={shrink}
              />
            )}
          </>
@ -330,7 +321,6 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
                icon={require('@phosphor-icons/core/regular/wrench.svg')}
                activeIcon={require('@phosphor-icons/core/fill/wrench-fill.svg')}
                text={<FormattedMessage id='tabs_bar.wrenched' defaultMessage='Wrenched' />}
-                shrink={shrink}
              />
            )}

@ -340,7 +330,6 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
                icon={require('@phosphor-icons/core/regular/planet.svg')}
                activeIcon={require('@phosphor-icons/core/fill/planet-fill.svg')}
                text={features.federating ? <FormattedMessage id='tabs_bar.local' defaultMessage='Local' /> : <FormattedMessage id='tabs_bar.all' defaultMessage='All' />}
-                shrink={shrink}
              />
            )}

@ -350,7 +339,6 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
                icon={require('@phosphor-icons/core/regular/graph.svg')}
                activeIcon={require('@phosphor-icons/core/fill/graph-fill.svg')}
                text={<FormattedMessage id='tabs_bar.bubble' defaultMessage='Bubble' />}
-                shrink={shrink}
              />
            )}

@ -360,7 +348,6 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
                icon={require('@phosphor-icons/core/regular/fediverse-logo.svg')}
                activeIcon={require('@phosphor-icons/core/fill/fediverse-logo-fill.svg')}
                text={<FormattedMessage id='tabs_bar.fediverse' defaultMessage='Fediverse' />}
-                shrink={shrink}
              />
            )}
          </>
@ -371,7 +358,6 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
            <SidebarNavigationLink
              icon={require('@phosphor-icons/core/regular/dots-three-circle.svg')}
              text={<FormattedMessage id='tabs_bar.more' defaultMessage='More' />}
-              shrink={shrink}
            />
          </DropdownMenu>
        )}
@ -383,7 +369,6 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
              icon={require('@phosphor-icons/core/regular/sign-in.svg')}
              activeIcon={require('@phosphor-icons/core/fill/sign-in-fill.svg')}
              text={<FormattedMessage id='account.login' defaultMessage='Log in' />}
-              shrink={shrink}
            />

            {isOpen && <SidebarNavigationLink
@ -391,11 +376,10 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
              icon={require('@phosphor-icons/core/regular/user-plus.svg')}
              activeIcon={require('@phosphor-icons/core/fill/user-plus-fill.svg')}
              text={<FormattedMessage id='account.register' defaultMessage='Sign up' />}
-              shrink={shrink}
            />}
          </Stack>
        )}
-      </Stack>
+      </div>

      {account && (
        <ComposeButton shrink={shrink} />
--- 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);
  }
 }