Mobile fixes

Author: xPaw

src/components/DeclarationsPage.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import { styled } from "@linaria/react";
 import {
   DeclarationsContext,
@@ -83,6 +83,7 @@ export default function DeclarationsPage({
 }) {
   const [filter, setFilter] = useState("");
   const [search, setSearch] = useState("");
+  const [sidebarOpen, setSidebarOpen] = useState(false);
 
   const references = useMemo(() => buildReferences(context.declarations), [context.declarations]);
 
@@ -104,14 +105,20 @@ export default function DeclarationsPage({
   const searchCtx = useMemo(() => ({ search, setSearch }), [search, setSearch]);
   const filterCtx = useMemo(() => ({ filter, setFilter }), [filter, setFilter]);
 
+  const closeSidebar = useCallback(() => setSidebarOpen(false), []);
+  const openSidebar = useCallback(() => setSidebarOpen(true), []);
+
   return (
     <DeclarationsContext.Provider value={fullContext}>
       <SearchContext.Provider value={searchCtx}>
         <SidebarFilterContext.Provider value={filterCtx}>
           <PageGrid>
-            <DeclarationsSidebar />
+            <MobileSidebarOverlay data-open={sidebarOpen || undefined} onClick={closeSidebar} />
+            <SidebarPanel data-open={sidebarOpen || undefined}>
+              <DeclarationsSidebar onNavigate={closeSidebar} />
+            </SidebarPanel>
             <ContentColumn>
-              <NavBar baseUrl={context.root} />
+              <NavBar baseUrl={context.root} onMenuClick={openSidebar} />
               <ContentList />
             </ContentColumn>
           </PageGrid>
@@ -127,15 +134,49 @@ const ContentColumn = styled.div`
   overflow: hidden;
 `;
 
+const MobileSidebarOverlay = styled.div`
+  display: none;
+
+  @media (max-width: 768px) {
+    &[data-open] {
+      display: block;
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.5);
+      z-index: 300;
+    }
+  }
+`;
+
+const SidebarPanel = styled.div`
+  display: contents;
+
+  @media (max-width: 768px) {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 300px;
+    z-index: 301;
+    background: var(--sidebar);
+
+    &[data-open] {
+      display: flex;
+    }
+
+    > * {
+      flex: 1;
+      min-height: 0;
+    }
+  }
+`;
+
 const PageGrid = styled.div`
   display: grid;
   grid-template-columns: 340px 1fr;
   height: 100dvh;
 
-  @media (max-width: 1100px) {
-    grid-template-columns: 200px 1fr;
-  }
-
   @media (max-width: 768px) {
     grid-template-columns: 1fr;
   }

src/components/DeclarationsSidebar.tsx

@@ -38,7 +38,7 @@ const HEADER_HEIGHT = 28;
 const HEADER_GAP = 8;
 const ITEM_HEIGHT = 28;
 
-export const DeclarationsSidebar = () => {
+export const DeclarationsSidebar = ({ onNavigate }: { onNavigate?: () => void }) => {
   const { declarations } = useContext(DeclarationsContext);
   const { filter, setFilter } = useContext(SidebarFilterContext);
   const { module: activeModule = "", scope = "" } = useParams();
@@ -205,7 +205,7 @@ export const DeclarationsSidebar = () => {
                     </SidebarGroupHeader>
                   </div>
                 ) : (
-                  <DeclarationSidebarElement declaration={row.declaration} />
+                  <DeclarationSidebarElement declaration={row.declaration} onClick={onNavigate} />
                 )}
               </div>
             );

src/components/Docs/ContentList.tsx

@@ -142,7 +142,7 @@ const OffsetsNote = styled.div`
   font-size: 14px;
   color: var(--text-dim);
   text-align: center;
-  padding: 8px 4px 0;
+  padding: 8px 4px;
 `;
 
 function renderItem(declaration: Declaration) {

src/components/Docs/SchemaClass.tsx

@@ -44,6 +44,7 @@ const FieldRow = styled.div`
   background-color: var(--group);
   border: 1px solid var(--group-border);
   border-radius: 8px;
+  overflow: hidden;
 
   &[data-highlighted] {
     background-color: var(--search-highlight);
@@ -55,6 +56,7 @@ const FieldSignature = styled.div`
   font-size: 16px;
   display: flex;
   align-items: baseline;
+  flex-wrap: wrap;
   gap: 6px;
 `;
 

src/components/layout/Content.tsx

@@ -2,13 +2,13 @@ import { styled } from "@linaria/react";
 
 export const ContentWrapper = styled.main`
   flex: 1;
-  padding: 0 0 0 24px;
+  padding: 0 24px 24px 24px;
   min-width: 0;
   overflow-y: auto;
 
   @media (max-width: 768px) {
     grid-column: 1;
-    padding: 0;
+    padding: 0 8px 16px;
   }
 `;
 
@@ -27,5 +27,5 @@ export const TextMessage = styled.div`
 `;
 
 export const ListItem = styled.div`
-  padding: 5px 14px 5px 0;
+  padding: 5px 0;
 `;

src/components/layout/NavBar.tsx

@@ -5,7 +5,13 @@ import { AppContext } from "../AppContext";
 import { SearchBox } from "../Search";
 import { GAMES, GameId, getGame } from "../../games";
 
-export const NavBar = ({ baseUrl }: { baseUrl?: string }) => {
+export const NavBar = ({
+  baseUrl,
+  onMenuClick,
+}: {
+  baseUrl?: string;
+  onMenuClick?: () => void;
+}) => {
   if (!baseUrl) {
     return (
       <NavBarSimple>
@@ -16,6 +22,23 @@ export const NavBar = ({ baseUrl }: { baseUrl?: string }) => {
 
   return (
     <NavBarContentCell>
+      {onMenuClick && (
+        <MenuButton onClick={onMenuClick} aria-label="Open sidebar">
+          <svg
+            viewBox="0 0 24 24"
+            width="22"
+            height="22"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+          >
+            <line x1="3" y1="6" x2="21" y2="6" />
+            <line x1="3" y1="12" x2="21" y2="12" />
+            <line x1="3" y1="18" x2="21" y2="18" />
+          </svg>
+        </MenuButton>
+      )}
       <NavBarSearchBox baseUrl={baseUrl} placeholder="Search... (module: or offset: to filter)" />
       <NavBarThemeSwitcher />
     </NavBarContentCell>
@@ -168,6 +191,21 @@ const SwitcherOption = styled.button`
   }
 `;
 
+const MenuButton = styled.button`
+  display: none;
+  background: none;
+  border: none;
+  padding: 4px;
+  color: var(--text);
+  cursor: pointer;
+  flex-shrink: 0;
+
+  @media (max-width: 768px) {
+    display: flex;
+    align-items: center;
+  }
+`;
+
 const NavBarContentCell = styled.div`
   display: flex;
   align-items: center;

src/components/layout/Sidebar.tsx

@@ -47,25 +47,28 @@ export const SidebarElement: React.FC<{
   to: string;
   icon: IconKind;
   text: string;
-}> = React.memo(({ to, icon, text }) => (
-  <SidebarLink to={to} prefetch="none">
+  onClick?: () => void;
+}> = React.memo(({ to, icon, text, onClick }) => (
+  <SidebarLink to={to} prefetch="none" onClick={onClick}>
     <KindIcon kind={icon} size="small" />
     <span>{text}</span>
   </SidebarLink>
 ));
 
-export const DeclarationSidebarElement: React.FC<{ declaration: Declaration }> = React.memo(
-  ({ declaration }) => {
-    const { root } = useContext(DeclarationsContext);
-    return (
-      <SidebarElement
-        to={`${root}/${declaration.module}/${declaration.name}`}
-        icon={declaration.kind}
-        text={declaration.name}
-      />
-    );
-  },
-);
+export const DeclarationSidebarElement: React.FC<{
+  declaration: Declaration;
+  onClick?: () => void;
+}> = React.memo(({ declaration, onClick }) => {
+  const { root } = useContext(DeclarationsContext);
+  return (
+    <SidebarElement
+      to={`${root}/${declaration.module}/${declaration.name}`}
+      icon={declaration.kind}
+      text={declaration.name}
+      onClick={onClick}
+    />
+  );
+});
 
 export const SidebarGroupHeader = styled.button`
   background: var(--sidebar);
@@ -112,8 +115,4 @@ export const SidebarWrapper = styled.div`
   min-width: 0;
   padding: 6px 8px 4px 10px;
   background-color: var(--sidebar);
-
-  @media (max-width: 768px) {
-    display: none;
-  }
 `;