@drodil/backstage-plugin-qeta-react 3.48.1 → 3.49.0

package/dist/components/HomePageCards/ImpactCard.esm.js

@@ -9,23 +9,52 @@ import 'dataloader';
 import '@backstage/plugin-catalog-react';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { qetaTranslationRef } from '../../translation.esm.js';
-import 'react-use/lib/useAsync';
+import { useIdentityApi } from '../../hooks/useIdentityApi.esm.js';
 import '@backstage/plugin-permission-react';
 import '@drodil/backstage-plugin-qeta-common';
 import '@backstage/plugin-permission-common';
-import { Box, Card, CardContent, CircularProgress, Typography } from '@material-ui/core';
-import { Alert } from '@material-ui/lab';
+import { Box, Card, CardContent, Divider, Grid, Typography, Tooltip } from '@material-ui/core';
+import { Skeleton, Alert } from '@material-ui/lab';
+import ThumbUp from '@material-ui/icons/ThumbUp';
+import HelpOutline from '@material-ui/icons/HelpOutline';
+import QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer';
+import PeopleIcon from '@material-ui/icons/People';
 
 const ImpactCard = () => {
   const { t } = useTranslationRef(qetaTranslationRef);
+  const { value: user, loading: userLoading } = useIdentityApi(
+    (api) => api.getBackstageIdentity(),
+    []
+  );
   const {
     value: response,
-    loading,
+    loading: statsLoading,
     error
-  } = useQetaApi((api) => api.getUserImpact(), []);
+  } = useQetaApi(
+    async (api) => {
+      if (!user) {
+        return null;
+      }
+      const [impact, stats] = await Promise.all([
+        api.getUserImpact(),
+        api.getUserStats(user.userEntityRef)
+      ]);
+      return { impact, stats };
+    },
+    [user]
+  );
+  const loading = userLoading || statsLoading;
   const renderContent = () => {
     if (loading) {
-      return /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "center", p: 2, children: /* @__PURE__ */ jsx(CircularProgress, { size: 24 }) });
+      return /* @__PURE__ */ jsxs(Box, { p: 2, children: [
+        /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "60%", height: 32 }),
+        /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "40%", height: 48 }),
+        /* @__PURE__ */ jsx(Box, { mt: 2, children: /* @__PURE__ */ jsx(Divider, {}) }),
+        /* @__PURE__ */ jsx(Box, { mt: 2, children: /* @__PURE__ */ jsx(Grid, { container: true, spacing: 2, children: Array.from(new Array(4)).map((_, i) => /* @__PURE__ */ jsxs(Grid, { item: true, xs: 6, children: [
+          /* @__PURE__ */ jsx(Skeleton, { variant: "circle", width: 24, height: 24 }),
+          /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "80%" })
+        ] }, i)) }) })
+      ] });
     }
     if (error) {
       return /* @__PURE__ */ jsx(Alert, { severity: "error", children: t("impactCard.error") });
@@ -33,33 +62,69 @@ const ImpactCard = () => {
     if (!response) {
       return null;
     }
-    const formattedImpact = response.impact >= 1e3 ? numeral(response.impact).format("0.0 a") : response.impact;
+    const { impact, stats } = response;
+    const formatNumber = (num) => {
+      return num >= 1e3 ? numeral(num).format("0.0 a") : num;
+    };
+    const formattedImpact = formatNumber(impact.impact);
+    const statItems = [
+      {
+        icon: /* @__PURE__ */ jsx(ThumbUp, { fontSize: "small" }),
+        value: formatNumber(stats.summary.totalVotes),
+        label: t("impactCard.votes")
+      },
+      {
+        icon: /* @__PURE__ */ jsx(HelpOutline, { fontSize: "small" }),
+        value: formatNumber(stats.summary.totalQuestions),
+        label: t("impactCard.questions")
+      },
+      {
+        icon: /* @__PURE__ */ jsx(QuestionAnswerIcon, { fontSize: "small" }),
+        value: formatNumber(stats.summary.totalAnswers),
+        label: t("impactCard.answers")
+      },
+      {
+        icon: /* @__PURE__ */ jsx(PeopleIcon, { fontSize: "small" }),
+        value: formatNumber(stats.summary.totalFollowers),
+        label: t("impactCard.followers")
+      }
+    ];
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(Typography, { variant: "h5", component: "h2", gutterBottom: true, children: t("impactCard.title") }),
-      /* @__PURE__ */ jsx(Box, { display: "flex", alignItems: "center", mb: 1, children: /* @__PURE__ */ jsxs(
-        Typography,
-        {
-          variant: "h5",
-          component: "p",
-          "aria-label": `${formattedImpact} views`,
-          children: [
-            formattedImpact,
-            /* @__PURE__ */ jsx(
-              Typography,
-              {
-                variant: "caption",
-                component: "span",
-                style: { marginLeft: "1em" },
-                color: "textSecondary",
-                children: t("impactCard.views")
-              }
-            )
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", children: t("impactCard.contributions", {
-        lastWeek: response.lastWeekImpact.toString(10)
-      }) })
+      /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", mb: 1, children: [
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "h3",
+            component: "p",
+            "aria-label": `${formattedImpact} views`,
+            style: { fontWeight: "bold", marginBottom: 0 },
+            children: formattedImpact
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "body2",
+            component: "span",
+            style: { marginLeft: "0.5em", verticalAlign: "middle" },
+            color: "textSecondary",
+            children: t("impactCard.views")
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", paragraph: true, children: t("impactCard.contributions", {
+        lastWeek: impact.lastWeekImpact.toString(10)
+      }) }),
+      /* @__PURE__ */ jsx(Divider, {}),
+      /* @__PURE__ */ jsx(Box, { mt: 2, children: /* @__PURE__ */ jsx(Grid, { container: true, spacing: 1, children: statItems.map((item, index) => /* @__PURE__ */ jsx(Grid, { item: true, xs: 6, children: /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", color: "textSecondary", children: [
+        /* @__PURE__ */ jsx(Tooltip, { title: item.label, children: /* @__PURE__ */ jsx(Box, { display: "flex", alignItems: "center", children: item.icon }) }),
+        /* @__PURE__ */ jsx(Box, { ml: 1, children: /* @__PURE__ */ jsxs(Typography, { variant: "subtitle2", component: "span", children: [
+          item.value,
+          " ",
+          item.label.toLowerCase()
+        ] }) })
+      ] }) }, index)) }) })
     ] });
   };
   return /* @__PURE__ */ jsx(

package/dist/components/HomePageCards/ImpactCard.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImpactCard.esm.js","sources":["../../../src/components/HomePageCards/ImpactCard.tsx"],"sourcesContent":["import numeral from 'numeral';\nimport { useQetaApi } from '../../hooks';\nimport {\n  Box,\n  Card,\n  CardContent,\n  Typography,\n  CircularProgress,\n} from '@material-ui/core';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { Alert } from '@material-ui/lab';\n\ninterface ImpactResponse {\n  impact: number;\n  lastWeekImpact: number;\n}\n\nexport const ImpactCard = () => {\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const {\n    value: response,\n    loading,\n    error,\n  } = useQetaApi<ImpactResponse>(api => api.getUserImpact(), []);\n\n  const renderContent = () => {\n    if (loading) {\n      return (\n        <Box display=\"flex\" justifyContent=\"center\" p={2}>\n          <CircularProgress size={24} />\n        </Box>\n      );\n    }\n\n    if (error) {\n      return <Alert severity=\"error\">{t('impactCard.error')}</Alert>;\n    }\n\n    if (!response) {\n      return null;\n    }\n\n    const formattedImpact =\n      response.impact >= 1000\n        ? numeral(response.impact).format('0.0 a')\n        : response.impact;\n\n    return (\n      <>\n        <Typography variant=\"h5\" component=\"h2\" gutterBottom>\n          {t('impactCard.title')}\n        </Typography>\n        <Box display=\"flex\" alignItems=\"center\" mb={1}>\n          <Typography\n            variant=\"h5\"\n            component=\"p\"\n            aria-label={`${formattedImpact} views`}\n          >\n            {formattedImpact}\n            <Typography\n              variant=\"caption\"\n              component=\"span\"\n              style={{ marginLeft: '1em' }}\n              color=\"textSecondary\"\n            >\n              {t('impactCard.views')}\n            </Typography>\n          </Typography>\n        </Box>\n        <Typography variant=\"body2\" color=\"textSecondary\">\n          {t('impactCard.contributions', {\n            lastWeek: response.lastWeekImpact.toString(10),\n          })}\n        </Typography>\n      </>\n    );\n  };\n\n  return (\n    <Box\n      display={{ md: 'none', lg: 'block' }}\n      style={{ marginBottom: '1em' }}\n      role=\"region\"\n      aria-label={t('impactCard.title')}\n    >\n      <Card elevation={2}>\n        <CardContent>{renderContent()}</CardContent>\n      </Card>\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAkBO,MAAM,aAAa,MAAM;AAC9B,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAClD,EAAM,MAAA;AAAA,IACJ,KAAO,EAAA,QAAA;AAAA,IACP,OAAA;AAAA,IACA;AAAA,MACE,UAA2B,CAAA,CAAA,GAAA,KAAO,IAAI,aAAc,EAAA,EAAG,EAAE,CAAA;AAE7D,EAAA,MAAM,gBAAgB,MAAM;AAC1B,IAAA,IAAI,OAAS,EAAA;AACX,MAAA,uBACG,GAAA,CAAA,GAAA,EAAA,EAAI,OAAQ,EAAA,MAAA,EAAO,cAAe,EAAA,QAAA,EAAS,CAAG,EAAA,CAAA,EAC7C,QAAC,kBAAA,GAAA,CAAA,gBAAA,EAAA,EAAiB,IAAM,EAAA,EAAA,EAAI,CAC9B,EAAA,CAAA;AAAA;AAIJ,IAAA,IAAI,KAAO,EAAA;AACT,MAAA,2BAAQ,KAAM,EAAA,EAAA,QAAA,EAAS,OAAS,EAAA,QAAA,EAAA,CAAA,CAAE,kBAAkB,CAAE,EAAA,CAAA;AAAA;AAGxD,IAAA,IAAI,CAAC,QAAU,EAAA;AACb,MAAO,OAAA,IAAA;AAAA;AAGT,IAAM,MAAA,eAAA,GACJ,QAAS,CAAA,MAAA,IAAU,GACf,GAAA,OAAA,CAAQ,QAAS,CAAA,MAAM,CAAE,CAAA,MAAA,CAAO,OAAO,CAAA,GACvC,QAAS,CAAA,MAAA;AAEf,IAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,UAAA,EAAA,EAAW,SAAQ,IAAK,EAAA,SAAA,EAAU,MAAK,YAAY,EAAA,IAAA,EACjD,QAAE,EAAA,CAAA,CAAA,kBAAkB,CACvB,EAAA,CAAA;AAAA,0BACC,GAAI,EAAA,EAAA,OAAA,EAAQ,QAAO,UAAW,EAAA,QAAA,EAAS,IAAI,CAC1C,EAAA,QAAA,kBAAA,IAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,OAAQ,EAAA,IAAA;AAAA,UACR,SAAU,EAAA,GAAA;AAAA,UACV,YAAA,EAAY,GAAG,eAAe,CAAA,MAAA,CAAA;AAAA,UAE7B,QAAA,EAAA;AAAA,YAAA,eAAA;AAAA,4BACD,GAAA;AAAA,cAAC,UAAA;AAAA,cAAA;AAAA,gBACC,OAAQ,EAAA,SAAA;AAAA,gBACR,SAAU,EAAA,MAAA;AAAA,gBACV,KAAA,EAAO,EAAE,UAAA,EAAY,KAAM,EAAA;AAAA,gBAC3B,KAAM,EAAA,eAAA;AAAA,gBAEL,YAAE,kBAAkB;AAAA;AAAA;AACvB;AAAA;AAAA,OAEJ,EAAA,CAAA;AAAA,0BACC,UAAW,EAAA,EAAA,OAAA,EAAQ,SAAQ,KAAM,EAAA,eAAA,EAC/B,YAAE,0BAA4B,EAAA;AAAA,QAC7B,QAAU,EAAA,QAAA,CAAS,cAAe,CAAA,QAAA,CAAS,EAAE;AAAA,OAC9C,CACH,EAAA;AAAA,KACF,EAAA,CAAA;AAAA,GAEJ;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,OAAS,EAAA,EAAE,EAAI,EAAA,MAAA,EAAQ,IAAI,OAAQ,EAAA;AAAA,MACnC,KAAA,EAAO,EAAE,YAAA,EAAc,KAAM,EAAA;AAAA,MAC7B,IAAK,EAAA,QAAA;AAAA,MACL,YAAA,EAAY,EAAE,kBAAkB,CAAA;AAAA,MAEhC,QAAA,kBAAA,GAAA,CAAC,QAAK,SAAW,EAAA,CAAA,EACf,8BAAC,WAAa,EAAA,EAAA,QAAA,EAAA,aAAA,IAAgB,CAChC,EAAA;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"ImpactCard.esm.js","sources":["../../../src/components/HomePageCards/ImpactCard.tsx"],"sourcesContent":["import numeral from 'numeral';\nimport { useIdentityApi, useQetaApi } from '../../hooks';\nimport {\n  Box,\n  Card,\n  CardContent,\n  Typography,\n  Grid,\n  Divider,\n  Tooltip,\n} from '@material-ui/core';\nimport { Skeleton } from '@material-ui/lab';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { Alert } from '@material-ui/lab';\nimport {\n  ImpactResponse,\n  StatisticsResponse,\n  UserStat,\n} from '@drodil/backstage-plugin-qeta-common';\nimport ThumbUp from '@material-ui/icons/ThumbUp';\nimport HelpOutline from '@material-ui/icons/HelpOutline';\nimport QuestionAnswer from '@material-ui/icons/QuestionAnswer';\nimport People from '@material-ui/icons/People';\n\nexport const ImpactCard = () => {\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const { value: user, loading: userLoading } = useIdentityApi(\n    api => api.getBackstageIdentity(),\n    [],\n  );\n\n  const {\n    value: response,\n    loading: statsLoading,\n    error,\n  } = useQetaApi<{\n    impact: ImpactResponse;\n    stats: StatisticsResponse<UserStat>;\n  } | null>(\n    async api => {\n      if (!user) {\n        return null;\n      }\n      const [impact, stats] = await Promise.all([\n        api.getUserImpact(),\n        api.getUserStats(user.userEntityRef),\n      ]);\n      return { impact, stats };\n    },\n    [user],\n  );\n\n  const loading = userLoading || statsLoading;\n\n  const renderContent = () => {\n    if (loading) {\n      return (\n        <Box p={2}>\n          <Skeleton variant=\"text\" width=\"60%\" height={32} />\n          <Skeleton variant=\"text\" width=\"40%\" height={48} />\n          <Box mt={2}>\n            <Divider />\n          </Box>\n          <Box mt={2}>\n            <Grid container spacing={2}>\n              {Array.from(new Array(4)).map((_, i) => (\n                <Grid item xs={6} key={i}>\n                  <Skeleton variant=\"circle\" width={24} height={24} />\n                  <Skeleton variant=\"text\" width=\"80%\" />\n                </Grid>\n              ))}\n            </Grid>\n          </Box>\n        </Box>\n      );\n    }\n\n    if (error) {\n      return <Alert severity=\"error\">{t('impactCard.error')}</Alert>;\n    }\n\n    if (!response) {\n      return null;\n    }\n\n    const { impact, stats } = response;\n\n    const formatNumber = (num: number) => {\n      return num >= 1000 ? numeral(num).format('0.0 a') : num;\n    };\n\n    const formattedImpact = formatNumber(impact.impact);\n\n    const statItems = [\n      {\n        icon: <ThumbUp fontSize=\"small\" />,\n        value: formatNumber(stats.summary.totalVotes),\n        label: t('impactCard.votes'),\n      },\n      {\n        icon: <HelpOutline fontSize=\"small\" />,\n        value: formatNumber(stats.summary.totalQuestions),\n        label: t('impactCard.questions'),\n      },\n      {\n        icon: <QuestionAnswer fontSize=\"small\" />,\n        value: formatNumber(stats.summary.totalAnswers),\n        label: t('impactCard.answers'),\n      },\n      {\n        icon: <People fontSize=\"small\" />,\n        value: formatNumber(stats.summary.totalFollowers),\n        label: t('impactCard.followers'),\n      },\n    ];\n\n    return (\n      <>\n        <Typography variant=\"h5\" component=\"h2\" gutterBottom>\n          {t('impactCard.title')}\n        </Typography>\n        <Box display=\"flex\" alignItems=\"center\" mb={1}>\n          <Typography\n            variant=\"h3\"\n            component=\"p\"\n            aria-label={`${formattedImpact} views`}\n            style={{ fontWeight: 'bold', marginBottom: 0 }}\n          >\n            {formattedImpact}\n          </Typography>\n          <Typography\n            variant=\"body2\"\n            component=\"span\"\n            style={{ marginLeft: '0.5em', verticalAlign: 'middle' }}\n            color=\"textSecondary\"\n          >\n            {t('impactCard.views')}\n          </Typography>\n        </Box>\n        <Typography variant=\"body2\" color=\"textSecondary\" paragraph>\n          {t('impactCard.contributions', {\n            lastWeek: impact.lastWeekImpact.toString(10),\n          })}\n        </Typography>\n\n        <Divider />\n\n        <Box mt={2}>\n          <Grid container spacing={1}>\n            {statItems.map((item, index) => (\n              <Grid item xs={6} key={index}>\n                <Box display=\"flex\" alignItems=\"center\" color=\"textSecondary\">\n                  <Tooltip title={item.label}>\n                    <Box display=\"flex\" alignItems=\"center\">\n                      {item.icon}\n                    </Box>\n                  </Tooltip>\n                  <Box ml={1}>\n                    <Typography variant=\"subtitle2\" component=\"span\">\n                      {item.value} {item.label.toLowerCase()}\n                    </Typography>\n                  </Box>\n                </Box>\n              </Grid>\n            ))}\n          </Grid>\n        </Box>\n      </>\n    );\n  };\n\n  return (\n    <Box\n      display={{ md: 'none', lg: 'block' }}\n      style={{ marginBottom: '1em' }}\n      role=\"region\"\n      aria-label={t('impactCard.title')}\n    >\n      <Card elevation={2}>\n        <CardContent>{renderContent()}</CardContent>\n      </Card>\n    </Box>\n  );\n};\n"],"names":["QuestionAnswer","People"],"mappings":"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"}

package/dist/components/LeftMenu/LeftMenu.esm.js

@@ -1,20 +1,23 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { makeStyles, SvgIcon, MenuList, Box, ListItemIcon, Typography, Divider, MenuItem } from '@material-ui/core';
-import AccountBox from '@material-ui/icons/AccountBox';
-import LoyaltyOutlined from '@material-ui/icons/LoyaltyOutlined';
-import StarIcon from '@material-ui/icons/Star';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { makeStyles, List, Box, Tooltip, IconButton, ListItemIcon, Typography, Divider, MenuItem } from '@material-ui/core';
 import { useRouteRef, useApp } from '@backstage/core-plugin-api';
-import HelpOutlinedIcon from '@material-ui/icons/HelpOutlined';
 import { useNavigate } from 'react-router-dom';
-import Home from '@material-ui/icons/Home';
 import { useLocation } from 'react-use';
-import CollectionsBookmarkIcon from '@material-ui/icons/CollectionsBookmark';
-import PlaylistPlay from '@material-ui/icons/PlaylistPlay';
-import SettingsIcon from '@material-ui/icons/Settings';
-import { GroupIcon } from '@backstage/core-components';
+import HomeOutlined from '@material-ui/icons/HomeOutlined';
+import HelpOutline from '@material-ui/icons/HelpOutline';
+import LibraryBooksOutlined from '@material-ui/icons/LibraryBooksOutlined';
+import LinkIcon from '@material-ui/icons/Link';
+import StarBorder from '@material-ui/icons/StarBorder';
+import CategoryOutlined from '@material-ui/icons/CategoryOutlined';
+import LocalOfferOutlined from '@material-ui/icons/LocalOfferOutlined';
+import PlaylistPlayOutlined from '@material-ui/icons/PlaylistPlayOutlined';
+import PeopleOutline from '@material-ui/icons/PeopleOutline';
+import PersonOutline from '@material-ui/icons/PersonOutline';
+import EmojiEventsOutlined from '@material-ui/icons/EmojiEventsOutlined';
+import SettingsOutlined from '@material-ui/icons/SettingsOutlined';
+import MenuOpenIcon from '@material-ui/icons/MenuOpen';
+import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import { qetaRouteRef, tagsRouteRef, favoriteQuestionsRouteRef, statisticsRouteRef, userRouteRef, questionsRouteRef, articlesRouteRef, linksRouteRef, collectionsRouteRef, entitiesRouteRef, usersRouteRef, moderatorRouteRef } from '../../routes.esm.js';
-import '../TopRankingUsersCard/TopRankingUsersCard.esm.js';
-import { TrophyIcon } from '../TopRankingUsersCard/TrophyIcon.esm.js';
 import '../../api.esm.js';
 import 'react';
 import '@backstage/catalog-model';
@@ -24,70 +27,115 @@ import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { qetaTranslationRef } from '../../translation.esm.js';
 import { useIdentityApi } from '../../hooks/useIdentityApi.esm.js';
 import { useIsModerator } from '../../hooks/useIsModerator.esm.js';
-import LinkIcon from '@material-ui/icons/Link';
 
 const useStyles = makeStyles(
   (theme) => {
     return {
       leftMenu: {
         top: "0",
-        width: "200px",
-        paddingTop: theme.spacing(2),
+        width: "220px",
+        // Standard width
+        paddingTop: 0,
         paddingBottom: theme.spacing(2),
-        transition: "all 0.2s ease-in-out"
+        transition: "width 0.2s ease-in-out",
+        display: "flex",
+        flexDirection: "column",
+        height: "100%"
+      },
+      leftMenuCompact: {
+        width: "72px",
+        overflowX: "hidden",
+        "& $sectionHeader": {
+          display: "none"
+        },
+        "& $divider": {
+          display: "none"
+        }
       },
       inPopup: {
         marginRight: 0,
-        padding: theme.spacing(1)
+        padding: theme.spacing(1),
+        width: "auto"
       },
       outsidePopup: {
-        marginRight: theme.spacing(3),
-        float: "right",
         position: "sticky",
-        top: theme.spacing(2)
+        top: theme.spacing(2),
+        float: "right",
+        maxHeight: "calc(100vh - 100px)",
+        overflowY: "auto"
       },
-      selectedMenuItem: {
-        color: theme.palette.primary.contrastText,
-        backgroundColor: theme.palette.primary.main,
-        borderRadius: theme.shape.borderRadius,
-        margin: theme.spacing(0.5, 1),
-        padding: theme.spacing(0.75, 1.5),
+      menuItem: {
+        margin: (props) => props.compact ? 0 : theme.spacing(0, 2),
+        justifyContent: (props) => props.compact ? "center" : "flex-start",
+        padding: (props) => props.compact ? theme.spacing(1, 0) : theme.spacing(1, 1),
+        borderRadius: (props) => props.compact ? 0 : theme.shape.borderRadius,
         transition: "all 0.2s ease-in-out",
+        color: theme.palette.text.primary,
+        display: "flex",
+        alignItems: "center",
+        minHeight: 48,
         "&:hover": {
-          backgroundColor: theme.palette.primary.dark,
-          color: theme.palette.primary.contrastText,
-          transform: "translateX(4px)"
-        },
-        "& svg": {
-          color: theme.palette.primary.contrastText
+          backgroundColor: theme.palette.action.hover
         }
       },
-      nonSelectedMenuItem: {
-        margin: theme.spacing(0.5, 1),
-        padding: theme.spacing(0.75, 1.5),
-        borderRadius: theme.shape.borderRadius,
-        transition: "all 0.2s ease-in-out",
-        color: theme.palette.text.primary,
+      selectedMenuItem: {
+        color: theme.palette.primary.main,
+        backgroundColor: "transparent",
+        fontWeight: 600,
+        position: "relative",
+        "&::before": {
+          content: '""',
+          position: "absolute",
+          left: 0,
+          top: "50%",
+          transform: "translateY(-50%)",
+          height: "60%",
+          width: "4px",
+          backgroundColor: theme.palette.primary.main,
+          borderRadius: "0 4px 4px 0"
+        },
         "&:hover": {
-          backgroundColor: theme.palette.action.hover,
-          transform: "translateX(4px)"
+          backgroundColor: theme.palette.action.hover
+        },
+        "& svg": {
+          color: theme.palette.primary.main
         }
       },
       menuIcon: {
         minWidth: "32px",
-        color: "inherit"
+        color: "inherit",
+        display: "flex",
+        justifyContent: "center"
       },
       sectionHeader: {
-        padding: theme.spacing(1, 2, 0.5, 2),
+        padding: theme.spacing(0.5, 3, 0.5, 3),
         marginTop: theme.spacing(2),
         color: theme.palette.text.secondary,
         fontWeight: 600,
         textTransform: "uppercase",
-        letterSpacing: "0.5px"
+        fontSize: "0.75rem",
+        letterSpacing: "0.5px",
+        whiteSpace: "nowrap"
       },
       divider: {
-        margin: theme.spacing(1, 2),
+        margin: theme.spacing(1, 2.5),
         backgroundColor: theme.palette.divider
+      },
+      toggleButton: {
+        marginLeft: "auto",
+        marginRight: theme.spacing(1),
+        marginBottom: theme.spacing(1)
+      },
+      label: {
+        marginLeft: theme.spacing(1.5),
+        whiteSpace: "nowrap",
+        opacity: 1,
+        transition: "opacity 0.2s"
+      },
+      labelHidden: {
+        opacity: 0,
+        width: 0,
+        display: "none"
       }
     };
   },
@@ -106,23 +154,27 @@ const LeftMenu = (props) => {
   const entitiesRoute = useRouteRef(entitiesRouteRef);
   const usersRoute = useRouteRef(usersRouteRef);
   const moderatorRoute = useRouteRef(moderatorRouteRef);
-  const styles = useStyles();
+  const styles = useStyles(props);
   const { t } = useTranslationRef(qetaTranslationRef);
   const location = useLocation();
   const navigate = useNavigate();
   const { isModerator } = useIsModerator();
   const app = useApp();
+  const { compact = false, onToggle } = props;
   const {
     value: user,
     loading: loadingUser,
     error: userError
   } = useIdentityApi((api) => api.getBackstageIdentity(), []);
+  const EntityIcon = app.getSystemIcon("kind:system") ?? CategoryOutlined;
   const CustomMenuItem = ({
     route,
     hasSubRoutes,
-    children
+    children,
+    label
   }) => {
-    return /* @__PURE__ */ jsx(
+    const isSelected = route === location.pathname || hasSubRoutes && location.pathname?.startsWith(route);
+    return /* @__PURE__ */ jsx(Tooltip, { title: compact ? label : "", placement: "right", children: /* @__PURE__ */ jsxs(
       MenuItem,
       {
         onClick: (e) => {
@@ -135,85 +187,149 @@ const LeftMenu = (props) => {
             props.onClick(e);
           }
         },
-        className: route === location.pathname || hasSubRoutes && location.pathname?.startsWith(route) ? styles.selectedMenuItem : styles.nonSelectedMenuItem,
+        className: `${styles.menuItem} ${isSelected ? styles.selectedMenuItem : ""}`,
         href: route,
         component: "a",
-        children
+        children: [
+          children,
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "body2",
+              className: compact ? styles.labelHidden : styles.label,
+              style: { fontWeight: isSelected ? 600 : 400 },
+              children: label
+            }
+          )
+        ]
       }
-    );
+    ) });
   };
-  const EntityIcon = app.getSystemIcon("kind:system") ?? SvgIcon;
-  return /* @__PURE__ */ jsx(
-    MenuList,
+  const isPopup = props.inPopup;
+  const isCompact = compact && !isPopup;
+  return /* @__PURE__ */ jsxs(
+    List,
     {
       id: "left-menu",
-      className: `${styles.leftMenu} ${props.inPopup ? styles.inPopup : styles.outsidePopup}`,
-      onKeyDown: props.onKeyDown,
-      autoFocusItem: props.autoFocusItem,
-      children: /* @__PURE__ */ jsxs(
-        Box,
-        {
-          display: props.inPopup ? {} : { xs: "none", sm: "none", md: "none", lg: "block" },
-          children: [
-            /* @__PURE__ */ jsxs(CustomMenuItem, { route: rootRoute(), children: [
-              /* @__PURE__ */ jsx(ListItemIcon, { className: styles.menuIcon, children: /* @__PURE__ */ jsx(Home, { fontSize: "small" }) }),
-              t("leftMenu.home")
-            ] }),
-            /* @__PURE__ */ jsx(Typography, { className: styles.sectionHeader, children: t("leftMenu.content") }),
-            /* @__PURE__ */ jsx(Divider, { className: styles.divider }),
-            /* @__PURE__ */ jsxs(CustomMenuItem, { route: questionsRoute(), hasSubRoutes: true, children: [
-              /* @__PURE__ */ jsx(ListItemIcon, { className: styles.menuIcon, children: /* @__PURE__ */ jsx(HelpOutlinedIcon, { fontSize: "small" }) }),
-              t("leftMenu.questions")
-            ] }),
-            /* @__PURE__ */ jsxs(CustomMenuItem, { route: articlesRoute(), hasSubRoutes: true, children: [
-              /* @__PURE__ */ jsx(ListItemIcon, { className: styles.menuIcon, children: /* @__PURE__ */ jsx(CollectionsBookmarkIcon, { fontSize: "small" }) }),
-              t("leftMenu.articles")
-            ] }),
-            /* @__PURE__ */ jsxs(CustomMenuItem, { route: linksRoute(), hasSubRoutes: true, children: [
-              /* @__PURE__ */ jsx(ListItemIcon, { className: styles.menuIcon, children: /* @__PURE__ */ jsx(LinkIcon, { fontSize: "small" }) }),
-              t("leftMenu.links")
-            ] }),
-            /* @__PURE__ */ jsxs(CustomMenuItem, { route: favoritesRoute(), children: [
-              /* @__PURE__ */ jsx(ListItemIcon, { className: styles.menuIcon, children: /* @__PURE__ */ jsx(StarIcon, { fontSize: "small" }) }),
-              t("leftMenu.favoriteQuestions")
-            ] }),
-            /* @__PURE__ */ jsxs(CustomMenuItem, { route: entitiesRoute(), hasSubRoutes: true, children: [
-              /* @__PURE__ */ jsx(ListItemIcon, { className: styles.menuIcon, children: /* @__PURE__ */ jsx(EntityIcon, { fontSize: "small" }) }),
-              t("leftMenu.entities")
-            ] }),
-            /* @__PURE__ */ jsxs(CustomMenuItem, { route: tagsRoute(), hasSubRoutes: true, children: [
-              /* @__PURE__ */ jsx(ListItemIcon, { className: styles.menuIcon, children: /* @__PURE__ */ jsx(LoyaltyOutlined, { fontSize: "small" }) }),
-              t("leftMenu.tags")
-            ] }),
-            /* @__PURE__ */ jsx(Typography, { className: styles.sectionHeader, children: t("leftMenu.community") }),
-            /* @__PURE__ */ jsx(Divider, { className: styles.divider }),
-            /* @__PURE__ */ jsxs(CustomMenuItem, { route: collectionsRoute(), hasSubRoutes: true, children: [
-              /* @__PURE__ */ jsx(ListItemIcon, { className: styles.menuIcon, children: /* @__PURE__ */ jsx(PlaylistPlay, { fontSize: "small" }) }),
-              t("leftMenu.collections")
-            ] }),
-            /* @__PURE__ */ jsxs(CustomMenuItem, { route: usersRoute(), children: [
-              /* @__PURE__ */ jsx(ListItemIcon, { className: styles.menuIcon, children: /* @__PURE__ */ jsx(GroupIcon, { fontSize: "small" }) }),
-              t("leftMenu.users")
-            ] }),
-            user && !loadingUser && !userError && /* @__PURE__ */ jsxs(CustomMenuItem, { route: `${userRoute()}/${user.userEntityRef}`, children: [
-              /* @__PURE__ */ jsx(ListItemIcon, { className: styles.menuIcon, children: /* @__PURE__ */ jsx(AccountBox, { fontSize: "small" }) }),
-              t("leftMenu.profile")
-            ] }),
-            /* @__PURE__ */ jsxs(CustomMenuItem, { route: statisticsRoute(), children: [
-              /* @__PURE__ */ jsx(ListItemIcon, { className: styles.menuIcon, children: /* @__PURE__ */ jsx(TrophyIcon, {}) }),
-              t("leftMenu.statistics")
-            ] }),
-            isModerator && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(Typography, { className: styles.sectionHeader, children: t("leftMenu.manage") }),
-              /* @__PURE__ */ jsx(Divider, { className: styles.divider }),
-              /* @__PURE__ */ jsxs(CustomMenuItem, { route: moderatorRoute(), children: [
-                /* @__PURE__ */ jsx(ListItemIcon, { className: styles.menuIcon, children: /* @__PURE__ */ jsx(SettingsIcon, {}) }),
-                t("leftMenu.moderate")
-              ] })
-            ] })
-          ]
-        }
-      )
+      className: `${styles.leftMenu} ${isPopup ? styles.inPopup : `${styles.outsidePopup} ${isCompact ? styles.leftMenuCompact : ""}`}`,
+      component: "nav",
+      "aria-labelledby": "nested-list-subheader",
+      disablePadding: true,
+      children: [
+        !isPopup && /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: isCompact ? "center" : "flex-end", children: /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            title: isCompact ? t("leftMenu.expand") : t("leftMenu.collapse"),
+            placement: "right",
+            children: /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                onClick: onToggle,
+                size: "small",
+                className: isCompact ? "" : styles.toggleButton,
+                style: { marginBottom: 0 },
+                children: isCompact ? /* @__PURE__ */ jsx(ChevronRightIcon, {}) : /* @__PURE__ */ jsx(MenuOpenIcon, {})
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsx(CustomMenuItem, { route: rootRoute(), label: t("leftMenu.home"), children: /* @__PURE__ */ jsx(ListItemIcon, { className: styles.menuIcon, children: /* @__PURE__ */ jsx(HomeOutlined, { fontSize: "small" }) }) }),
+        /* @__PURE__ */ jsx("li", { style: { listStyle: "none" }, children: /* @__PURE__ */ jsx(Typography, { className: styles.sectionHeader, children: t("leftMenu.content") }) }),
+        /* @__PURE__ */ jsx(Divider, { className: styles.divider, component: "li" }),
+        /* @__PURE__ */ jsx(
+          CustomMenuItem,
+          {
+            route: questionsRoute(),
+            hasSubRoutes: true,
+            label: t("leftMenu.questions"),
+            children: /* @__PURE__ */ jsx(ListItemIcon, { className: styles.menuIcon, children: /* @__PURE__ */ jsx(HelpOutline, { fontSize: "small" }) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          CustomMenuItem,
+          {
+            route: articlesRoute(),
+            hasSubRoutes: true,
+            label: t("leftMenu.articles"),
+            children: /* @__PURE__ */ jsx(ListItemIcon, { className: styles.menuIcon, children: /* @__PURE__ */ jsx(LibraryBooksOutlined, { fontSize: "small" }) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          CustomMenuItem,
+          {
+            route: linksRoute(),
+            hasSubRoutes: true,
+            label: t("leftMenu.links"),
+            children: /* @__PURE__ */ jsx(ListItemIcon, { className: styles.menuIcon, children: /* @__PURE__ */ jsx(LinkIcon, { fontSize: "small" }) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          CustomMenuItem,
+          {
+            route: favoritesRoute(),
+            label: t("leftMenu.favoriteQuestions"),
+            children: /* @__PURE__ */ jsx(ListItemIcon, { className: styles.menuIcon, children: /* @__PURE__ */ jsx(StarBorder, { fontSize: "small" }) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          CustomMenuItem,
+          {
+            route: entitiesRoute(),
+            hasSubRoutes: true,
+            label: t("leftMenu.entities"),
+            children: /* @__PURE__ */ jsx(ListItemIcon, { className: styles.menuIcon, children: /* @__PURE__ */ jsx(EntityIcon, { fontSize: "small" }) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          CustomMenuItem,
+          {
+            route: tagsRoute(),
+            hasSubRoutes: true,
+            label: t("leftMenu.tags"),
+            children: /* @__PURE__ */ jsx(ListItemIcon, { className: styles.menuIcon, children: /* @__PURE__ */ jsx(LocalOfferOutlined, { fontSize: "small" }) })
+          }
+        ),
+        /* @__PURE__ */ jsx("li", { style: { listStyle: "none" }, children: /* @__PURE__ */ jsx(Typography, { className: styles.sectionHeader, children: t("leftMenu.community") }) }),
+        /* @__PURE__ */ jsx(Divider, { className: styles.divider, component: "li" }),
+        /* @__PURE__ */ jsx(
+          CustomMenuItem,
+          {
+            route: collectionsRoute(),
+            hasSubRoutes: true,
+            label: t("leftMenu.collections"),
+            children: /* @__PURE__ */ jsx(ListItemIcon, { className: styles.menuIcon, children: /* @__PURE__ */ jsx(PlaylistPlayOutlined, { fontSize: "small" }) })
+          }
+        ),
+        /* @__PURE__ */ jsx(CustomMenuItem, { route: usersRoute(), label: t("leftMenu.users"), children: /* @__PURE__ */ jsx(ListItemIcon, { className: styles.menuIcon, children: /* @__PURE__ */ jsx(PeopleOutline, { fontSize: "small" }) }) }),
+        user && !loadingUser && !userError && /* @__PURE__ */ jsx(
+          CustomMenuItem,
+          {
+            route: `${userRoute()}/${user.userEntityRef}`,
+            label: t("leftMenu.profile"),
+            children: /* @__PURE__ */ jsx(ListItemIcon, { className: styles.menuIcon, children: /* @__PURE__ */ jsx(PersonOutline, { fontSize: "small" }) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          CustomMenuItem,
+          {
+            route: statisticsRoute(),
+            label: t("leftMenu.statistics"),
+            children: /* @__PURE__ */ jsx(ListItemIcon, { className: styles.menuIcon, children: /* @__PURE__ */ jsx(EmojiEventsOutlined, { fontSize: "small" }) })
+          }
+        ),
+        isModerator && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("li", { style: { listStyle: "none" }, children: /* @__PURE__ */ jsx(Typography, { className: styles.sectionHeader, children: t("leftMenu.manage") }) }),
+          /* @__PURE__ */ jsx(Divider, { className: styles.divider, component: "li" }),
+          /* @__PURE__ */ jsx(
+            CustomMenuItem,
+            {
+              route: moderatorRoute(),
+              label: t("leftMenu.moderate"),
+              children: /* @__PURE__ */ jsx(ListItemIcon, { className: styles.menuIcon, children: /* @__PURE__ */ jsx(SettingsOutlined, { fontSize: "small" }) })
+            }
+          )
+        ] })
+      ]
     }
   );
 };