feat(3000): Show the 3000 index-less navbar with labels

.github/workflows/ci-backend.yml

@@ -125,7 +125,7 @@ jobs:
 
             - name: Check for syntax errors, import sort, and code style violations
               run: |
-                  ruff check . 
+                  ruff check .
 
             - name: Check formatting
               run: |

frontend/src/layout/navigation-3000/Navigation.scss

@@ -33,6 +33,7 @@
 // Navbar
 
 .Navbar3000 {
+    position: relative;
     flex: 0 0 3rem;
     border-right: 1px solid transparent; // This is just for sizing, the visible border is on the content
     box-sizing: content-box;
@@ -63,12 +64,35 @@
     left: 0;
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
-    height: 100vh;
-    padding: 0 0.375rem;
     border-right-width: 1px;
-    background: var(--accent-3000);
-    overflow-y: auto;
+
+    .Navbar3000__content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        padding: 0 0.375rem;
+        background: var(--accent-3000);
+        overflow-y: auto;
+        z-index: var(--z-main-nav);
+
+        .LemonButton {
+            min-height: 2.25rem !important; // Reduce minimum height
+            padding: 0.375rem !important; // Use a custom padding for the navbar only
+        }
+
+        ul {
+            padding: 0.5rem 0;
+        }
+
+        ul + ul {
+            border-top-width: 1px;
+        }
+
+        li + li {
+            margin-top: 1px;
+        }
+    }
 }
 
 .NavbarButton {
@@ -93,20 +117,6 @@
             transform: translateY(-0.25rem);
         }
     }
-    &.NavbarButton--popover {
-        &::before {
-            content: '';
-            position: absolute;
-            top: 0.1875rem;
-            right: 0.1875rem;
-            width: 0;
-            height: 0;
-            border-radius: 1px;
-            border: 0.1875rem solid transparent;
-            border-top-color: currentColor;
-            border-right-color: currentColor;
-        }
-    }
 }
 
 // Sidebar

frontend/src/layout/navigation-3000/components/Navbar.tsx

@@ -12,46 +12,55 @@ import { navigation3000Logic } from '../navigationLogic'
 import { themeLogic } from '../themeLogic'
 import { NavbarButton } from './NavbarButton'
 import { urls } from 'scenes/urls'
+import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
+import { Resizer } from 'lib/components/Resizer/Resizer'
+import { useRef } from 'react'
 
 export function Navbar(): JSX.Element {
     const { user } = useValues(userLogic)
     const { isSitePopoverOpen } = useValues(navigationLogic)
     const { closeSitePopover, toggleSitePopover } = useActions(navigationLogic)
     const { isSidebarShown, activeNavbarItemId, navbarItems } = useValues(navigation3000Logic)
-    const { showSidebar, hideSidebar } = useActions(navigation3000Logic)
+    const { showSidebar, hideSidebar, toggleNavCollapsed } = useActions(navigation3000Logic)
     const { isDarkModeOn, darkModeSavedPreference, darkModeSystemPreference, isThemeSyncedWithSystem } =
         useValues(themeLogic)
     const { toggleTheme } = useActions(themeLogic)
+    const { featureFlags } = useValues(featureFlagLogic)
 
     const activeThemeIcon = isDarkModeOn ? <IconNight /> : <IconDay />
 
+    const containerRef = useRef<HTMLDivElement | null>(null)
+
     return (
-        <nav className="Navbar3000">
+        <nav className="Navbar3000" ref={containerRef}>
             <div className="Navbar3000__content">
                 <div className="Navbar3000__top">
                     {navbarItems.map((section, index) => (
                         <ul key={index}>
-                            {section.map((item) => (
-                                <NavbarButton
-                                    key={item.identifier}
-                                    title={item.label}
-                                    identifier={item.identifier}
-                                    icon={item.icon}
-                                    to={'to' in item ? item.to : undefined}
-                                    onClick={
-                                        'logic' in item
-                                            ? () => {
-                                                  if (activeNavbarItemId === item.identifier && isSidebarShown) {
-                                                      hideSidebar()
-                                                  } else {
-                                                      showSidebar(item.identifier)
+                            {section.map((item) =>
+                                item.featureFlag && !featureFlags[item.featureFlag] ? null : (
+                                    <NavbarButton
+                                        key={item.identifier}
+                                        title={item.label}
+                                        identifier={item.identifier}
+                                        icon={item.icon}
+                                        tag={item.tag}
+                                        to={'to' in item ? item.to : undefined}
+                                        onClick={
+                                            'logic' in item
+                                                ? () => {
+                                                      if (activeNavbarItemId === item.identifier && isSidebarShown) {
+                                                          hideSidebar()
+                                                      } else {
+                                                          showSidebar(item.identifier)
+                                                      }
                                                   }
-                                              }
-                                            : undefined
-                                    }
-                                    active={activeNavbarItemId === item.identifier && isSidebarShown}
-                                />
-                            ))}
+                                                : undefined
+                                        }
+                                        active={activeNavbarItemId === item.identifier && isSidebarShown}
+                                    />
+                                )
+                            )}
                         </ul>
                     ))}
                 </div>
@@ -78,6 +87,7 @@ export function Navbar(): JSX.Element {
                                     ? 'Switch to light mode'
                                     : 'Switch to dark mode'
                             }
+                            shortTitle="Toggle theme"
                             onClick={() => toggleTheme()}
                             persistentTooltip
                         />
@@ -87,14 +97,15 @@ export function Navbar(): JSX.Element {
                                     icon={<IconQuestion />}
                                     identifier="help-button"
                                     title="Need any help?"
-                                    popoverMarker
+                                    shortTitle="Help"
                                 />
                             }
                             placement="right-end"
                         />
                         <NavbarButton
                             icon={<IconGear />}
                             identifier={Scene.ProjectSettings}
+                            title="Project settings"
                             to={urls.projectSettings()}
                         />
                         <Popover
@@ -107,13 +118,20 @@ export function Navbar(): JSX.Element {
                                 icon={<ProfilePicture name={user?.first_name} email={user?.email} size="md" />}
                                 identifier="me"
                                 title={`Hi${user?.first_name ? `, ${user?.first_name}` : ''}!`}
+                                shortTitle={user?.first_name || user?.email}
                                 onClick={toggleSitePopover}
-                                popoverMarker
                             />
                         </Popover>
                     </ul>
                 </div>
             </div>
+            <Resizer
+                placement={'right'}
+                containerRef={containerRef}
+                closeThreshold={100}
+                onToggleClosed={(shouldBeClosed) => toggleNavCollapsed(shouldBeClosed)}
+                onDoubleClick={() => toggleNavCollapsed()}
+            />
         </nav>
     )
 }

frontend/src/layout/navigation-3000/components/NavbarButton.tsx

@@ -4,35 +4,69 @@ import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import clsx from 'clsx'
 import { useValues } from 'kea'
 import { sceneLogic } from 'scenes/sceneLogic'
-import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
-import { FEATURE_FLAGS } from 'lib/constants'
+import { navigation3000Logic } from '../navigationLogic'
+import { LemonTag } from '@posthog/lemon-ui'
+import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
 
 export interface NavbarButtonProps {
     identifier: string
     icon: ReactElement
     title?: string
+    shortTitle?: string
+    tag?: 'alpha' | 'beta'
     onClick?: () => void
     to?: string
     persistentTooltip?: boolean
     active?: boolean
-    popoverMarker?: boolean
 }
 
 export const NavbarButton: FunctionComponent<NavbarButtonProps> = React.forwardRef<
     HTMLButtonElement,
     NavbarButtonProps
->(({ identifier, title, onClick, persistentTooltip, popoverMarker, ...buttonProps }, ref): JSX.Element => {
+>(({ identifier, shortTitle, title, tag, onClick, persistentTooltip, ...buttonProps }, ref): JSX.Element => {
     const { aliasedActiveScene } = useValues(sceneLogic)
-    const { featureFlags } = useValues(featureFlagLogic)
+    const { isNavCollapsed } = useValues(navigation3000Logic)
+    const isUsingNewNav = useFeatureFlag('POSTHOG_3000_NAV')
 
     const [hasBeenClicked, setHasBeenClicked] = useState(false)
 
-    const here = featureFlags[FEATURE_FLAGS.POSTHOG_3000_NAV] ? aliasedActiveScene === identifier : false
+    const here = aliasedActiveScene === identifier
+    const isNavCollapsedActually = isNavCollapsed || isUsingNewNav
+
+    if (!isUsingNewNav) {
+        buttonProps.active = here
+    }
+
+    let content: JSX.Element | string | undefined
+    if (!isNavCollapsedActually) {
+        content = shortTitle || title
+        if (tag) {
+            if (tag === 'alpha') {
+                content = (
+                    <>
+                        {content}
+                        <LemonTag type="completion" size="small" className="ml-2">
+                            ALPHA
+                        </LemonTag>
+                    </>
+                )
+            } else if (tag === 'beta') {
+                content = (
+                    <>
+                        {content}
+                        <LemonTag type="warning" size="small" className="ml-2">
+                            BETA
+                        </LemonTag>
+                    </>
+                )
+            }
+        }
+    }
 
     return (
-        <li>
+        <li className="w-full">
             <Tooltip
-                title={here ? `${title} (you are here)` : title}
+                title={isNavCollapsedActually ? (here ? `${title} (you are here)` : title) : null}
                 placement="right"
                 delayMs={0}
                 visible={!persistentTooltip && hasBeenClicked ? false : undefined} // Force-hide tooltip after button click
@@ -45,13 +79,12 @@ export const NavbarButton: FunctionComponent<NavbarButtonProps> = React.forwardR
                         setHasBeenClicked(true)
                         onClick?.()
                     }}
-                    className={clsx(
-                        'NavbarButton',
-                        here && 'NavbarButton--here',
-                        popoverMarker && 'NavbarButton--popover'
-                    )}
+                    className={clsx('NavbarButton', isUsingNewNav && here && 'NavbarButton--here')}
+                    fullWidth
                     {...buttonProps}
-                />
+                >
+                    {content}
+                </LemonButton>
             </Tooltip>
         </li>
     )