fix dropdown on mobile

leanprover-community · May 29, 2024 · c053899 · c053899
1 parent 3da996e
commit c053899
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 42 deletions.
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -149,9 +149,10 @@ const App: React.FC = () => {
   }, [project])
 
   /** The menu items either appearing inside the dropdown or outside */
-  function flexibleMenu (isDropdown = false) { return <>
+  function flexibleMenu (isInDropdown = false) { return <>
     <Dropdown open={openExample} setOpen={setOpenExample} icon={faStar} text="Examples"
-        onClick={() => {setOpenLoad(false); (!isDropdown && setOpenNav(false))}}>
+        useOverlay={isInDropdown}
+        onClick={() => {setOpenLoad(false); (!isInDropdown && setOpenNav(false))}}>
       {lean4webConfig.projects.map(proj => proj.examples?.map(example =>
         <NavButton
           key={`${proj.name}-${example.name}`}
@@ -163,7 +164,8 @@ const App: React.FC = () => {
       ))}
     </Dropdown>
     <Dropdown open={openLoad} setOpen={setOpenLoad} icon={faUpload} text="Load"
-        onClick={() => {setOpenExample(false); (!isDropdown && setOpenNav(false))}}>
+        useOverlay={isInDropdown}
+        onClick={() => {setOpenExample(false); (!isInDropdown && setOpenNav(false))}}>
       <label htmlFor="file-upload" className="nav-link" >
         <FontAwesomeIcon icon={faUpload} /> Load file from disk
       </label>

diff --git a/client/src/Navigation.tsx b/client/src/Navigation.tsx
@@ -23,16 +23,22 @@ export const Dropdown: React.FC<{
   setOpen: React.Dispatch<React.SetStateAction<boolean>>
   icon?: IconDefinition
   text?: string
+  useOverlay?: boolean
   onClick?: React.MouseEventHandler<HTMLAnchorElement>
   children?: React.ReactNode
-}> = ({open, setOpen, icon, text, onClick, children}) => {
-  return <div className='dropdown'>
+}> = ({open, setOpen, icon, text, useOverlay=false, onClick, children}) => {
+  return <><div className='dropdown'>
     <NavButton icon={icon} text={text} onClick={(ev) => {setOpen(!open); onClick(ev); ev.stopPropagation()}} />
     {open &&
-      <div className='dropdown-content' onClick={() => setOpen(false)}>
-      {children}
-      </div>}
+      <div className={`dropdown-content${open?'': ' '}`} onClick={() => setOpen(false)}>
+        {children}
+      </div>
+    }
   </div>
+    { useOverlay && open &&
+     <div className="dropdown-overlay" onClick={(ev) => {setOpen(false); ev.stopPropagation()}}/>
+    }
+  </>
 }
 
 /** A popup which overlays the entire screen. */
@@ -41,16 +47,11 @@ export const Popup: React.FC<{
   handleClose: () => void // TODO: what's the correct type?
   children?: React.ReactNode
 }> = ({open, handleClose, children}) => {
-  if (open) {
-    return <div className="modal-wrapper">
+  return <div className={`modal-wrapper${open? '': ' hidden'}`}>
     <div className="modal-backdrop" onClick={handleClose} />
       <div className="modal">
         <div className="codicon codicon-close modal-close" onClick={handleClose}></div>
         {children}
       </div>
     </div>
-  } else {
-    // don't display closed popup
-    return <></>
-  }
 }
diff --git a/client/src/css/Navigation.css b/client/src/css/Navigation.css
@@ -17,17 +17,24 @@ nav .logo {
   mix-blend-mode: difference;
 }
 
+/* The top bar with menu items. */
 nav .menu {
   float: right;
 }
 
+/* A dropdown comprises a `nav-link` and a `dropdown-content`. The latter has absolute
+positioning to be displayed on top of things. */
 nav .dropdown {
   display: inline-block;
   position: relative;
 }
 
+/* menu items inside a dropdown */
+nav .dropdown .nav-link {
+  width: 100%;
+}
+
 nav .dropdown-content {
-  /* background: none; */
   position: absolute;
   right: 0;
   display: flex;
@@ -41,16 +48,13 @@ nav .dropdown-content {
   box-shadow: -.1rem .3rem .3rem 0 var(--vscode-menu-separatorBackground);
 }
 
-
-nav .submenu {
-  /* position: absolute;
-  right: 100%;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
+/* Overlay to fade out the dropdown if a sub-dropdown is displayed on top. */
+nav .dropdown-overlay {
   background-color: var(--vscode-menu-background);
-  z-index: 1;
-  box-shadow: -0.1rem 0.3rem 0.3rem 0 var(--vscode-menu-separatorBackground); */
+  opacity: 0.7;
+  position: absolute;
+  width:100%;
+  height: 100%;
 }
 
 /* The menu items */
@@ -67,6 +71,7 @@ nav .nav-link {
   padding-bottom: .6rem;
 }
 
+/* Zulip logo (instead of font-awesome icon) */
 nav .nav-link svg {
   width: 1.4rem;
 }
@@ -83,21 +88,3 @@ nav .nav-link:hover {
   color: var(--vscode-menu-selectionForeground);
   background-color: var(--vscode-menu-selectionBackground);
 }
-
-/* `.nav-icon` is the burger for the dropdown menu */
-/* .nav-icon {
-  background: none;
-  border: none;
-  color: inherit;
-  cursor: pointer;
-  text-decoration: none;
-  padding: .5rem;
-  height: 100%;
-  float: right;
-  padding-right: 1rem;
-}
-
-.nav-icon:hover {
-  color: var(--vscode-menu-selectionForeground);
-  background-color: var(--vscode-menu-selectionBackground);
-} */