Test webui menu

Dockerfile

@@ -19,7 +19,7 @@ RUN apt-get update \
   && corepack prepare yarn@stable --activate
 
 # bump to update website
-ENV WEBSITE_VERSION 0.13.1
+ENV WEBSITE_VERSION 0.13.1-next.f600763d
 COPY . /workdir
 
 RUN /usr/bin/yarn --cwd website \

website/package.json

@@ -6,7 +6,7 @@
     "repository": "https://github.com/eclipse/open-vsx.org",
     "license": "EPL-2.0",
     "dependencies": {
-        "openvsx-webui": "0.13.1"
+        "openvsx-webui": "0.13.1-next.f600763d"
     },
     "peerDependencies": {
         "@babel/core": "^7.0.0"

website/src/menu-content.tsx

@@ -8,8 +8,8 @@
  * SPDX-License-Identifier: EPL-2.0
  ********************************************************************************/
 
-import React, { FunctionComponent, PropsWithChildren, useState, useRef } from 'react';
-import { Theme, Typography, Menu, MenuItem, Link, Button, Accordion, AccordionDetails, AccordionSummary } from '@mui/material';
+import React, { FunctionComponent, PropsWithChildren, useState, useRef, useContext } from 'react';
+import { Theme, Typography, Menu, MenuItem, Link, Button, Accordion, AccordionDetails, AccordionSummary, IconButton } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { Link as RouteLink } from 'react-router-dom';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
@@ -22,7 +22,11 @@ import PublishIcon from '@mui/icons-material/Publish';
 import GroupWorkIcon from '@mui/icons-material/GroupWork';
 import PeopleAltIcon from '@mui/icons-material/PeopleAlt';
 import HubIcon from '@mui/icons-material/Hub';
+import AccountBoxIcon from '@mui/icons-material/AccountBox';
 import { UserSettingsRoutes } from 'openvsx-webui';
+import { MainContext } from 'openvsx-webui/lib/context';
+import { MobileUserAvatar } from 'openvsx-webui/lib/default/menu-content'
+import { UserAvatar } from 'openvsx-webui/lib/pages/user/avatar';
 
 //-------------------- Mobile View --------------------//
 
@@ -48,7 +52,32 @@ const MobileMenuItemText: FunctionComponent<PropsWithChildren> = ({ children })
 };
 
 export const MobileMenuContent: FunctionComponent = () => {
+    const {service, user} = useContext(MainContext)
     return <>
+        <MobileMenuItem>
+            {
+                user
+                    ? <MobileUserAvatar/>
+                    : <RouteLink to={service.getLoginUrl()}>
+                        <MobileMenuItemText>
+                            <AccountBoxIcon sx={itemIcon} />
+                            Log In
+                        </MobileMenuItemText>
+                    </RouteLink>
+            }
+        </MobileMenuItem>
+        {
+            !location.pathname.startsWith(UserSettingsRoutes.ROOT)
+            ? <MobileMenuItem>
+                <RouteLink to='/user-settings/extensions'>
+                    <MobileMenuItemText>
+                        <PublishIcon sx={itemIcon} />
+                        Publish Extension
+                    </MobileMenuItemText>
+                </RouteLink>
+            </MobileMenuItem>
+            : null
+        }
         <MobileMenuItem>
             <Link target='_blank' href='https://github.com/eclipse/openvsx'>
                 <MobileMenuItemText>
@@ -119,18 +148,6 @@ export const MobileMenuContent: FunctionComponent = () => {
                 </MobileMenuItemText>
             </RouteLink>
         </MobileMenuItem>
-        {
-            !location.pathname.startsWith(UserSettingsRoutes.ROOT)
-            ? <MobileMenuItem>
-                <RouteLink to='/user-settings/extensions'>
-                    <MobileMenuItemText>
-                        <PublishIcon sx={itemIcon} />
-                        Publish Extension
-                    </MobileMenuItemText>
-                </RouteLink>
-            </MobileMenuItem>
-            : null
-        }
     </>;
 }
 
@@ -176,6 +193,7 @@ const SubMenuLink = styled(Link)(subMenuLink);
 
 
 export const DefaultMenuContent: FunctionComponent = () => {
+    const {service, user} = useContext(MainContext)
     const [workingGroupMenuOpen, setWorkingGroupMenuOpen] = useState(false);
     const workingGroupMenuEl = useRef<HTMLButtonElement | null>(null);
     const toggleWorkingGroupMenu = () => setWorkingGroupMenuOpen(!workingGroupMenuOpen);
@@ -210,5 +228,16 @@ export const DefaultMenuContent: FunctionComponent = () => {
         <Button variant='contained' color='secondary' href='/user-settings/extensions' sx={{ mx: 2.5 }}>
             Publish
         </Button>
+        {
+            user ?
+                <UserAvatar />
+                :
+                <IconButton
+                    href={service.getLoginUrl()}
+                    title='Log In'
+                    aria-label='Log In' >
+                    <AccountBoxIcon />
+                </IconButton>
+        }
     </>;
 }

website/yarn.lock

@@ -2399,7 +2399,7 @@ __metadata:
     "@types/react-router-dom": "npm:^5.3.3"
     css-loader: "npm:^6.8.1"
     express: "npm:^4.21.1"
-    openvsx-webui: "npm:0.13.1"
+    openvsx-webui: "npm:0.13.1-next.f600763d"
     source-map-loader: "npm:^4.0.1"
     style-loader: "npm:^3.3.3"
     typescript: "npm:~5.1.6"
@@ -2420,9 +2420,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"openvsx-webui@npm:0.13.1":
-  version: 0.13.1
-  resolution: "openvsx-webui@npm:0.13.1"
+"openvsx-webui@npm:0.13.1-next.f600763d":
+  version: 0.13.1-next.f600763d
+  resolution: "openvsx-webui@npm:0.13.1-next.f600763d"
   dependencies:
     "@emotion/react": "npm:^11.11.1"
     "@emotion/styled": "npm:^11.11.0"
@@ -2448,7 +2448,7 @@ __metadata:
     react-router-dom: "npm:^6.14.1"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10/31b8624e2cf8a93a2c756e5cf3a2e7ecbac097bdc1c0033ca9e7f9c4938e2aaed40b07c3e016a61550aab9156d781de4ce79826fd880d35778ba4b333960f406
+  checksum: 10/285872702f78f37929a48917f469b1b1591c03923f0bc40a7dd0ede196403c981d21263ae7b64a67030c8241426dbbd33f77ca6da9dfeff1ef725d0451e1525b
   languageName: node
   linkType: hard