Skip to content

Commit

Permalink
Merge pull request #489 from research-software-directory/471_-_respon…
Browse files Browse the repository at this point in the history 
…sive_menu

Fix responsive menu on narrow devices
  • Loading branch information
@dmijatovic
dmijatovic authored Sep 2, 2022
2 parents 00eeda6 + fc1e70d commit 9a29e9f
Show file tree
Hide file tree
Showing 3 changed files with 53 additions and 61 deletions.
104 changes: 48 additions & 56 deletions frontend/components/AppHeader/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
// SPDX-License-Identifier: Apache-2.0

import {useState, useEffect} from 'react'
// import {IconButton, Menu, MenuItem} from '@mui/material'
// import MenuIcon from '@mui/icons-material/Menu'
import {Menu, MenuItem} from '@mui/material'
import MenuIcon from '@mui/icons-material/Menu'
import Link from 'next/link'
// local dependencies (project components)
import {useAuth} from '~/auth'
Expand Down Expand Up @@ -40,7 +40,7 @@ export default function AppHeader({editButton}: { editButton?: JSX.Element }) {
if (embedMode) return null

const open = Boolean(anchorEl)
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
setAnchorEl(event.currentTarget)
}
const handleClose = () => {
Expand All @@ -61,7 +61,7 @@ export default function AppHeader({editButton}: { editButton?: JSX.Element }) {
<LogoAppSmall className="block xl:hidden"/>
</a>
</Link>
<GlobalSearchAutocomplete className="hidden md:block ml-12 mr-6" />
<GlobalSearchAutocomplete className="hidden md:block ml-12 mr-6"/>
{/* Large menu*/}
<div className="hidden lg:flex text-lg ml-4 gap-5 text-center opacity-90 font-normal">
{menuItems.map(item =>
Expand All @@ -72,66 +72,58 @@ export default function AppHeader({editButton}: { editButton?: JSX.Element }) {
</Link>)}
</div>

<div className="text-white flex-1 flex justify-end items-center min-w-[8rem] text-right ml-4">
<div className="flex flex-1 justify-end items-center text-right ml-4">

{/* EDIT button */}
{editButton ? editButton : null}
{/* ADD menu button */}
{status === 'authenticated' ? <AddMenu/> : null}
{/*
Mobile menu disabled due to lack of space when edit+add+user buttons
Users can use global search jump to option instead
*/}
{/* <IconButton
title="Pages"
data-testid="mobile-menu"
color="inherit"
id="basic-button"
aria-controls={open ? 'basic-menu' : undefined}
aria-haspopup="true"
aria-expanded={open ? 'true' : undefined}
onClick={handleClick}
sx={{
// display by breakpoint: sm,md,lg, etc.
display: ['inline-block','inline-block','none'],
margin:'0rem 0.5rem',
'&:hover': {
color: 'primary.main'
},
alignSelf: 'center',
'&:focus-visible': {
outline: 'auto'
}
}}
>
<MenuIcon />
</IconButton>
<Menu
id="basic-menu"
anchorEl={anchorEl}
open={open}
onClose={handleClose}
MenuListProps={{
'aria-labelledby': 'menu-button',
}}
transformOrigin={{horizontal: 'right', vertical: 'top'}}
anchorOrigin={{horizontal: 'right', vertical: 'bottom'}}
>
{menuItems.map(item =>
<MenuItem onClick={handleClose} key={item.path}>
<Link href={item.path || ''}>
<a className={`${activePath === item.path && 'nav-active'}`}>
{item.label}
</a>
</Link>
</MenuItem>
)}
</Menu> */}


{/* LOGIN / USER MENU */}
<LoginButton/>

{/* Responsive pages menu */}
<div>

<div
id="basic-button"
aria-controls={open ? 'basic-menu' : undefined}
aria-haspopup="true"
aria-expanded={open ? 'true' : undefined}
onClick={(e) => handleClick(e)}
className="block lg:hidden whitespace-nowrap ml-4 cursor-pointer"
>
<MenuIcon/>
</div>
<Menu
id="basic-menu"
anchorEl={anchorEl}
open={open}
onClose={handleClose}
MenuListProps={{
'aria-labelledby': 'menu-button',
}}
transformOrigin={{horizontal: 'right', vertical: 'top'}}
anchorOrigin={{horizontal: 'right', vertical: 'bottom'}}
>
{menuItems.map(item =>
<MenuItem onClick={handleClose} key={item.path}>
<Link href={item.path || ''}>
<a className={`${activePath === item.path && 'nav-active'}`}>
{item.label}
</a>
</Link>
</MenuItem>
)}
</Menu>
</div>


</div>
<JavascriptSupportWarning />
<JavascriptSupportWarning/>
</div>
<GlobalSearchAutocomplete className="md:hidden float-right w-full mt-4"/>
<GlobalSearchAutocomplete className="md:hidden mt-4"/>
</div>
</header>
)
Expand Down
8 changes: 4 additions & 4 deletions frontend/components/GlobalSearchAutocomplete/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ export default function GlobalSearchAutocomplete(props: Props) {
}}>

<div
className={`${props.className} relative z-10 flex sm:w-48 sm:max-w-[320px] focus-within:w-full duration-700`}>
className={`${props.className} relative z-10 flex sm:w-48 md:max-w-[320px] focus-within:w-full duration-700`}>
<input className="px-3 py-2 bg-transparent rounded-sm border border-white border-opacity-50 focus:outline-0
w-full focus:bg-white focus:text-black
duration-300"
Expand All @@ -145,13 +145,13 @@ export default function GlobalSearchAutocomplete(props: Props) {
className="animate-pulse">No results...</span></div>}
{searchResults.map((item, index) =>
<div key={index}
className={`${selected === index ? 'bg-primary text-white' : ''} flex gap-2 p-2 cursor-pointer transition justify-between items-center`}
className={`${selected === index ? 'bg-secondary text-secondary-content' : ''} flex gap-2 p-2 cursor-pointer transition justify-between items-center`}
onClick={handleClick}
onMouseEnter={() => setSelected(index)}
>
<div className="flex gap-3 w-full">
{/*icon*/}
<div className={selected === index ? 'text-white' : 'text-gray-500'}>
<div className={selected === index ? 'text-content' : 'text-gray-500'}>
{item?.source === 'software' && <TerminalIcon/>}
{item?.source === 'projects' && <ListAltIcon/>}
{item?.source === 'organisations' && <BusinessIcon/>}
Expand All @@ -162,7 +162,7 @@ export default function GlobalSearchAutocomplete(props: Props) {

<div className="text-xs text-current text-opacity-40">
{item?.source}{item?.is_published === false && <span
className="flex-nowrap border px-1 py-[2px] rounded bg-warning ml-3 text-xs text-white">unpublished</span>}
className="flex-nowrap border px-1 py-[2px] rounded bg-warning ml-3 text-xs text-warning-content">unpublished</span>}
</div>

</div>
Expand Down
2 changes: 1 addition & 1 deletion frontend/components/icons/enterkey.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 9a29e9f

Please sign in to comment.