new icons

apps/builder/app/builder/features/help/help-center.tsx

@@ -13,7 +13,7 @@ import {
   GithubIcon,
   LifeBuoyIcon,
   PageIcon,
-  Youtube1cIcon,
+  YoutubeIcon,
 } from "@webstudio-is/icons";
 import { type ComponentProps } from "react";
 import { $remoteDialog } from "../../shared/nano-states";
@@ -61,7 +61,7 @@ export const HelpCenter = ({
             formAction="https://wstd.us/101"
             name="list"
             value="PL4vVqpngzeT4sDlanyPe99dYl8BgUYCac"
-            prefix={<Youtube1cIcon fill="currentColor" />}
+            prefix={<YoutubeIcon />}
             color="ghost"
             css={{ justifyContent: "start" }}
           >
@@ -77,7 +77,7 @@ export const HelpCenter = ({
           </Button>
           <Button
             formAction="https://wstd.us/community"
-            prefix={<DiscordIcon fill="currentColor" />}
+            prefix={<DiscordIcon />}
             color="ghost"
             css={{ justifyContent: "start" }}
           >

apps/builder/app/dashboard/dashboard.tsx

@@ -1,12 +1,14 @@
 import {
+  forwardRef,
   useEffect,
   useState,
   type ComponentProps,
   type ReactNode,
 } from "react";
 import {
   Flex,
-  Separator,
+  List,
+  ListItem,
   Text,
   TooltipProvider,
   css,
@@ -27,9 +29,10 @@ import {
   DiscordIcon,
   ExtensionIcon,
   LifeBuoyIcon,
-  Youtube1cIcon,
+  YoutubeIcon,
 } from "@webstudio-is/icons";
 import { Header } from "./shared/header";
+import { CollapsibleSection } from "~/builder/shared/collapsible-section";
 
 const globalStyles = globalCss({
   html: {
@@ -125,23 +128,62 @@ const sidebarLinkStyle = css({
   },
 });
 
-const SidebarLink = ({
-  to,
-  prefix,
-  children,
-  target,
-}: {
-  prefix: ReactNode;
-  children: string;
-  to: string;
-  target?: string;
-}) => {
+const SidebarLink = forwardRef<
+  HTMLAnchorElement,
+  {
+    prefix: ReactNode;
+    children: string;
+    to: string;
+    target?: string;
+  }
+>(({ to, prefix, children, target }, forwardedRef) => {
   return (
-    <NavLink to={to} end target={target} className={sidebarLinkStyle()}>
+    <NavLink
+      to={to}
+      end
+      target={target}
+      className={sidebarLinkStyle()}
+      ref={forwardedRef}
+    >
       {prefix}
-      <Text variant="labelsSentenceCase">{children}</Text>
+      <Text variant="labelsSentenceCase" color="main">
+        {children}
+      </Text>
     </NavLink>
   );
+});
+
+const NavigationItems = ({
+  items,
+}: {
+  items: Array<{
+    to: string;
+    prefix: ReactNode;
+    children: string;
+    target?: string;
+  }>;
+}) => {
+  return (
+    <List style={{ padding: 0, margin: 0 }}>
+      {items.map((item) => {
+        return (
+          <ListItem asChild>
+            <NavLink
+              to={item.to}
+              end
+              target={item.target}
+              className={sidebarLinkStyle()}
+            >
+              {item.prefix}
+              <Text variant="labelsSentenceCase" color="main">
+                {item.children}
+              </Text>
+            </NavLink>
+          </ListItem>
+        );
+      })}
+    </List>
+  );
 };
 
 export const Dashboard = ({
@@ -169,43 +211,53 @@ export const Dashboard = ({
           <Header variant="aside">
             <ProfileMenu user={user} userPlanFeatures={userPlanFeatures} />
           </Header>
-
           <nav>
-            <SidebarLink to="/dashboard" prefix={<BodyIcon />}>
-              Projects
-            </SidebarLink>
-            <SidebarLink to="/dashboard/templates" prefix={<ExtensionIcon />}>
-              Starter templates
-            </SidebarLink>
-            <Separator css={{ marginBlock: theme.spacing[5] }} />
-            <SidebarLink
-              to="https://wstd.us/101"
-              target="_blank"
-              prefix={<Youtube1cIcon fill="black" />}
-            >
-              Video tutorials
-            </SidebarLink>
-            <SidebarLink
-              to="https://help.webstudio.is/"
-              target="_blank"
-              prefix={<LifeBuoyIcon />}
-            >
-              Support hub
-            </SidebarLink>
-            <SidebarLink
-              to="https://docs.webstudio.is"
-              target="_blank"
-              prefix={<ContentIcon />}
-            >
-              Docs
-            </SidebarLink>
-            <SidebarLink
-              to="https://wstd.us/community"
-              target="_blank"
-              prefix={<DiscordIcon fill="black" />}
-            >
-              Community
-            </SidebarLink>
+            <CollapsibleSection label="Workspace" fullWidth>
+              <NavigationItems
+                items={[
+                  {
+                    to: "/dashboard",
+                    prefix: <BodyIcon />,
+                    children: "Projects",
+                  },
+                  {
+                    to: "/dashboard/templates",
+                    prefix: <ExtensionIcon />,
+                    children: "Starter templates",
+                  },
+                ]}
+              />
+            </CollapsibleSection>
+            <CollapsibleSection label="Help & support" fullWidth>
+              <NavigationItems
+                items={[
+                  {
+                    to: "https://wstd.us/101",
+                    target: "_blank",
+                    prefix: <YoutubeIcon />,
+                    children: "Video tutorials",
+                  },
+                  {
+                    to: "https://help.webstudio.is/",
+                    target: "_blank",
+                    prefix: <LifeBuoyIcon />,
+                    children: "Support hub",
+                  },
+                  {
+                    to: "https://docs.webstudio.is",
+                    target: "_blank",
+                    prefix: <ContentIcon />,
+                    children: "Docs",
+                  },
+                  {
+                    to: "https://wstd.us/community",
+                    target: "_blank",
+                    prefix: <DiscordIcon />,
+                    children: "Community",
+                  },
+                ]}
+              />
+            </CollapsibleSection>
           </nav>
         </Flex>
         <Main>