HumanSignal · yyassi-heartex · Aug 13, 2025 · Aug 13, 2025 · Aug 14, 2025 · Aug 14, 2025
diff --git a/label_studio/templates/base.html b/label_studio/templates/base.html
@@ -73,7 +73,11 @@
 
 </head>
 
-<body>
+<body 
+{% if feature_flags.fflag_feat_fit_528_icon_menu_short %}
+  class="iconMenuSupport"
+{% endif %}
+>
 
 <div class="app-wrapper"></div>
 

diff --git a/label_studio/templates/simple.html b/label_studio/templates/simple.html
@@ -43,7 +43,11 @@
   {% endblock %}
 </head>
 
-<body>
+<body 
+{% if feature_flags.fflag_feat_fit_528_icon_menu_short %}
+  class="iconMenuSupport"
+{% endif %}
+>
 {% block content %}
 {% endblock %}
 

diff --git a/web/apps/labelstudio/src/app/App.scss b/web/apps/labelstudio/src/app/App.scss
@@ -6,6 +6,7 @@ body {
   --menu-animation-curve: cubic-bezier(0.21, 1.04, 0.68, 1);
   --menu-animation-start: -10px;
   --menu-sidebar-width: 240px;
+  --icon-menu-width: 60px;
 
   margin: 0;
   color: var(--color-neutral-content);
@@ -16,6 +17,10 @@ body {
   scrollbar-color: var(--color-neutral-border-bold) var(--color-neutral-background);
 }
 
+:global(.iconMenuSupport) {
+  --menu-sidebar-width: var(--icon-menu-width);
+}
+
 .app-wrapper {
   width: 100vw;
   max-width: 100%;

diff --git a/web/apps/labelstudio/src/components/Hamburger/Hamburger.jsx b/web/apps/labelstudio/src/components/Hamburger/Hamburger.jsx
@@ -1,11 +1,11 @@
 import { cn } from "../../utils/bem";
 import "./Hamburger.scss";
 
-export const Hamburger = ({ opened, animated = true }) => {
+export const Hamburger = ({ opened, animated = true, className }) => {
   const root = cn("hamburger");
 
   return (
-    <span className={root.mod({ animated, opened })}>
+    <span className={cn(root.mod({ animated, opened }), className)}>
       <span />
       <span />
       <span />

diff --git a/web/apps/labelstudio/src/components/Menu/MenuItem.jsx b/web/apps/labelstudio/src/components/Menu/MenuItem.jsx
@@ -1,6 +1,8 @@
 import { NavLink } from "react-router-dom";
 import { cn } from "../../utils/bem";
 import { absoluteURL } from "../../utils/helpers";
+import { Tooltip } from "@humansignal/ui";
+import { useMemo } from "react";
 
 export const MenuItem = ({
   children,
@@ -14,6 +16,7 @@ export const MenuItem = ({
   active = false,
   isDangerous = false,
   onClick,
+  isIconMenuItem = false,
   ...rest
 }) => {
   const rootClass = cn("main-menu", { elem: "item" });
@@ -34,7 +37,11 @@ export const MenuItem = ({
 
   if (className) classList.push(className);
 
-  const linkContent = (
+  const linkContent = isIconMenuItem ? (
+    <span className={rootClass.elem("item-icon")}>
+      {icon}
+    </span>
+  ) : (
     <>
       {icon && <span className={rootClass.elem("item-icon")}>{icon}</span>}
       {children ?? label}
@@ -55,7 +62,7 @@ export const MenuItem = ({
   }
 
   return (
-    <li>
+    <li className={isIconMenuItem ? "flex flex-col items-center gap-1" : ""}>
       {to ? (
         <NavLink to={finalHref} {...linkAttributes} exact={exact} activeClassName={activeClassName} data-external>
           {linkContent}
@@ -67,6 +74,7 @@ export const MenuItem = ({
       ) : (
         <span {...linkAttributes}>{linkContent}</span>
       )}
+      {isIconMenuItem && <div className="text-center text-[10px] font-medium text-neutral-surface-subtle pointer">{children ?? label}</div>}
     </li>
   );
 };
diff --git a/web/apps/labelstudio/src/components/Menubar/MenuSidebar.scss b/web/apps/labelstudio/src/components/Menubar/MenuSidebar.scss
@@ -5,10 +5,29 @@
   z-index: 100 !important;
   top: var(--header-height);
   height: calc(100vh - var(--header-height));
-  width: var(--menu-sidebar-width);
   background: none;
   transition: all 150ms ease-out;
   border-radius: 0;
+  width: var(--menu-sidebar-width);
+
+  .main-menu {
+    background: none;
+    border-right: none;
+    &__item {
+      padding: 0;
+      width: 100%;
+      background: var(--color-neutral-background);
+      border: 1px solid var(--color-neutral-border);
+    }
+    &__item_active:not(.sidebar__pin){
+      background: var(--color-neutral-emphasis);
+    }
+    &__item-icon {
+      width: 100%;
+      justify-content: center;
+      margin-right: 0;
+    }
+  }
 
   .icon {
     transition: transform 0.1s ease;
@@ -64,4 +83,25 @@
     opacity: 1;
     transform: rotate(-45deg);
   }
+
+  &_iconMenu {
+    &.sidebar_floating {
+      box-shadow: none;
+    }
+
+    .main-menu {
+      &__item {
+        --item-size: 40px;
+        height: var(--item-size);
+        width: var(--item-size);
+      }
+      &__item-icon {
+        svg {
+          --icon-size: 30px;
+          width: var(--icon-size);
+          height: var(--icon-size);
+        }
+      }
+    }
+  }
 }
diff --git a/web/apps/labelstudio/src/components/Menubar/Menubar.jsx b/web/apps/labelstudio/src/components/Menubar/Menubar.jsx
@@ -35,6 +35,7 @@ import { ff } from "@humansignal/core";
 import { openHotkeyHelp } from "@humansignal/app-common/pages/AccountSettings/sections/Hotkeys/Help";
 
 export const MenubarContext = createContext();
+const isIconMenu = ff.isActive(ff.FF_ICON_MENU);
 
 const LeftContextMenu = ({ className }) => (
   <StaticContent id="context-menu-left" className={className}>
@@ -62,7 +63,7 @@ export const Menubar = ({ enabled, defaultOpened, defaultPinned, children, onSid
 
   const config = useConfig();
   const [sidebarOpened, setSidebarOpened] = useState(defaultOpened ?? false);
-  const [sidebarPinned, setSidebarPinned] = useState(defaultPinned ?? false);
+  const [sidebarPinned, setSidebarPinned] = useState(isIconMenu || (defaultPinned ?? false));
   const [PageContext, setPageContext] = useState({
     Component: null,
     props: {},
@@ -139,8 +140,8 @@ export const Menubar = ({ enabled, defaultOpened, defaultPinned, children, onSid
         <div className={menubarClass}>
           <Dropdown.Trigger dropdown={menuDropdownRef} closeOnClickOutside={!sidebarPinned}>
             <div className={`${menubarClass.elem("trigger")} main-menu-trigger`}>
-              <LSLogo className={`${menubarClass.elem("logo")}`} alt="Label Studio Logo" />
               <Hamburger opened={sidebarOpened} />
+              <LSLogo className={`${menubarClass.elem("logo")}`} alt="Label Studio Logo" />
             </div>
           </Dropdown.Trigger>
 
@@ -216,33 +217,35 @@ export const Menubar = ({ enabled, defaultOpened, defaultPinned, children, onSid
               onToggle={sidebarToggle}
               onVisibilityChanged={() => window.dispatchEvent(new Event("resize"))}
               visible={sidebarOpened}
-              className={[sidebarClass, sidebarClass.mod({ floating: !sidebarPinned })].join(" ")}
-              style={{ width: 240 }}
+              className={[sidebarClass, sidebarClass.mod({ floating: !sidebarPinned, iconMenu: isIconMenu })].join(" ")}
             >
               <Menu>
-                {isFF(FF_HOMEPAGE) && <Menu.Item label="Home" to="/" icon={<IconHome />} data-external exact />}
-                <Menu.Item label="Projects" to="/projects" icon={<IconFolder />} data-external exact />
-                <Menu.Item label="Organization" to="/organization" icon={<IconPersonInCircle />} data-external exact />
+                {isFF(FF_HOMEPAGE) && <Menu.Item label="Home" isIconMenuItem={isIconMenu} to="/" icon={<IconHome />} data-external exact />}
+                <Menu.Item label="Projects" isIconMenuItem={isIconMenu} to="/projects" icon={<IconFolder />} data-external exact />
+                <Menu.Item label="Organization" isIconMenuItem={isIconMenu} to="/organization" icon={<IconPersonInCircle />} data-external exact />
 
                 <Menu.Spacer />
 
                 <VersionNotifier showNewVersion />
 
                 <Menu.Item
                   label="API"
+                  isIconMenuItem={isIconMenu}
                   href="https://api.labelstud.io/api-reference/introduction/getting-started"
                   icon={<IconTerminal />}
                   target="_blank"
                 />
-                <Menu.Item label="Docs" href="https://labelstud.io/guide" icon={<IconBook />} target="_blank" />
+                <Menu.Item label="Docs" isIconMenuItem={isIconMenu} href="https://labelstud.io/guide" icon={<IconBook />} target="_blank" />
                 <Menu.Item
+                  isIconMenuItem={isIconMenu}
                   label="GitHub"
                   href="https://github.com/HumanSignal/label-studio"
                   icon={<IconGithub />}
                   target="_blank"
                   rel="noreferrer"
                 />
                 <Menu.Item
+                  isIconMenuItem={isIconMenu}
                   label="Slack Community"
                   href="https://slack.labelstud.io/?source=product-menu"
                   icon={<IconSlack />}
@@ -252,16 +255,19 @@ export const Menubar = ({ enabled, defaultOpened, defaultPinned, children, onSid
 
                 <VersionNotifier showCurrentVersion />
 
-                <Menu.Divider />
+                {!isIconMenu && <Menu.Divider />}
 
-                <Menu.Item
-                  icon={<IconPin />}
-                  className={sidebarClass.elem("pin")}
-                  onClick={sidebarPin}
-                  active={sidebarPinned}
-                >
-                  {sidebarPinned ? "Unpin menu" : "Pin menu"}
-                </Menu.Item>
+                {!isIconMenu &&(
+                  <Menu.Item
+                    isIconMenuItem={isIconMenu}
+                    icon={<IconPin />}
+                    className={sidebarClass.elem("pin")}
+                    onClick={sidebarPin}
+                    active={sidebarPinned}
+                  >
+                    {sidebarPinned ? "Unpin menu" : "Pin menu"}
+                  </Menu.Item>
+                )}
               </Menu>
             </Dropdown>
           )}

diff --git a/web/apps/labelstudio/src/components/VersionNotifier/VersionNotifier.scss b/web/apps/labelstudio/src/components/VersionNotifier/VersionNotifier.scss
@@ -73,3 +73,11 @@
     color: var(--primary_link);
   }
 }
+
+:global(.iconMenuSupport) {
+  .current-version {
+    padding: 0;
+    margin-left: 0;
+    font-size: 8px;
+  }
+}
diff --git a/web/apps/labelstudio/src/index.html b/web/apps/labelstudio/src/index.html
@@ -8,7 +8,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <link rel="icon" type="image/x-icon" href="favicon.ico" />
 </head>
-<body>
+<body 
+{% if feature_flags.fflag_feat_fit_528_icon_menu_short %}
+  class="iconmenu-support"
+{% endif %}
+>
 <div id="root"></div>
 </body>
 </html>
diff --git a/web/libs/core/src/lib/utils/feature-flags/flags.ts b/web/libs/core/src/lib/utils/feature-flags/flags.ts
@@ -105,3 +105,9 @@ export const FF_NEW_STORAGES = "fflag_feat_bros_193_new_cloud_storage_providers_
  * Datamanager filter members
  */
 export const FF_DM_FILTER_MEMBERS = "fflag_feat_fit_449_datamanager_filter_members_short";
+
+/**
+ * Icon menu
+ * @link https://app.launchdarkly.com/projects/default/flags/fflag_feat_fit_528_icon_menu_short/targeting?env=test&env=production&env=onpremise&selected-env=test
+ */
+export const FF_ICON_MENU = "fflag_feat_fit_528_icon_menu_short";