feat: headless nav toggle

packages/api-explorer/src/ApiExplorer.tsx

@@ -28,10 +28,21 @@ import type { FC } from 'react'
 import React, { useReducer, useState, useEffect, useCallback } from 'react'
 import { useLocation } from 'react-router'
 import styled, { createGlobalStyle } from 'styled-components'
-import { Aside, ComponentsProvider, Layout, Page } from '@looker/components'
+import {
+  Aside,
+  ComponentsProvider,
+  Divider,
+  Heading,
+  IconButton,
+  Layout,
+  Page,
+  Space,
+} from '@looker/components'
 import type { SpecList } from '@looker/sdk-codegen'
 import type { RunItSetter } from '@looker/run-it'
 import { funFetch, fallbackFetch, OAuthScene } from '@looker/run-it'
+import { FirstPage } from '@styled-icons/material/FirstPage'
+import { LastPage } from '@styled-icons/material/LastPage'
 import { SearchContext, LodeContext, defaultLodeContextValue } from './context'
 import type { IApixEnvAdaptor } from './utils'
 import {
@@ -52,6 +63,8 @@ import {
 import { AppRouter } from './routes'
 import { apixFilesHost } from './utils/lodeUtils'
 import { useActions } from './hooks'
+import { TOGGLE_LABEL } from './components/Header'
+import { SelectorContainer } from './components/SelectorContainer'
 
 export interface ApiExplorerProps {
   specs: SpecList
@@ -70,7 +83,7 @@ const ApiExplorer: FC<ApiExplorerProps> = ({
   setVersionsUrl,
   exampleLodeUrl = 'https://raw.githubusercontent.com/looker-open-source/sdk-codegen/main/examplesIndex.json',
   declarationsLodeUrl = `${apixFilesHost}/declarationsIndex.json`,
-  headless = false,
+  headless = true,
 }) => {
   const [initializing, setInitializing] = useState(true)
   const location = useLocation()
@@ -178,16 +191,64 @@ const ApiExplorer: FC<ApiExplorerProps> = ({
                     />
                   )}
                   <Layout hasAside height="100%">
-                    {hasNavigation && (
-                      <AsideBorder pt="large" width="20rem">
+                    <AsideBorder
+                      borderRight
+                      isOpen={hasNavigation}
+                      headless={headless}
+                    >
+                      {headless && (
+                        <>
+                          <Space
+                            alignItems="center"
+                            between
+                            pt="u3"
+                            pr="u5"
+                            pb="u3"
+                            pl="u5"
+                          >
+                            {hasNavigation && (
+                              <Heading
+                                as="h2"
+                                fontSize="xsmall"
+                                fontWeight="bold"
+                                color="text2"
+                              >
+                                API DOCUMENTATION
+                              </Heading>
+                            )}
+                            <IconButton
+                              size="xsmall"
+                              shape="round"
+                              icon={
+                                hasNavigation ? <FirstPage /> : <LastPage />
+                              }
+                              label={TOGGLE_LABEL}
+                              onClick={() => toggleNavigation()}
+                            />
+                          </Space>
+                          {hasNavigation && (
+                            <>
+                              <Divider mb="u3" appearance="light" />
+                              <SelectorContainer
+                                ml="large"
+                                mr="large"
+                                specs={specs}
+                                spec={spec}
+                                specDispatch={specDispatch}
+                              />
+                            </>
+                          )}
+                        </>
+                      )}
+                      {hasNavigation && (
                         <SideNav
                           headless={headless}
                           specs={specs}
                           spec={spec}
                           specDispatch={specDispatch}
                         />
-                      </AsideBorder>
-                    )}
+                      )}
+                    </AsideBorder>
                     {oauthReturn && <OAuthScene />}
                     {!oauthReturn && spec.api && (
                       <AppRouter
@@ -211,9 +272,11 @@ const ApiExplorer: FC<ApiExplorerProps> = ({
   )
 }
 
-/* Border support for `Aside` coming in @looker/components very soon */
-export const AsideBorder = styled(Aside)`
-  border-right: 1px solid ${({ theme }) => theme.colors.ui2};
+export const AsideBorder = styled(Aside)<{
+  isOpen: boolean
+  headless: boolean
+}>`
+  width: ${({ isOpen, headless }) =>
+    isOpen ? '20rem' : headless ? '4rem' : '0rem'};
 `
-
 export default ApiExplorer

packages/api-explorer/src/components/Header/Header.tsx

@@ -56,6 +56,8 @@ interface HeaderProps {
 
 export const HEADER_REM = 4
 
+export const TOGGLE_LABEL = 'Toggle Navigation'
+
 /**
  * Renders the API Explorer header
  */
@@ -78,7 +80,7 @@ export const HeaderLayout: FC<HeaderProps> = ({
         onClick={() => toggleNavigation()}
         icon={<Menu />}
         aria-label="nav toggle"
-        label="Toggle Navigation"
+        label={TOGGLE_LABEL}
       />
 
       <Link to={`/${spec.key}`}>

packages/api-explorer/src/components/Header/index.ts

@@ -23,4 +23,4 @@
  SOFTWARE.
 
  */
-export { Header, HEADER_REM } from './Header'
+export { Header, HEADER_REM, TOGGLE_LABEL } from './Header'

packages/api-explorer/src/components/SelectorContainer/SelectorContainer.tsx

@@ -26,6 +26,7 @@
 
 import type { FC, Dispatch } from 'react'
 import React from 'react'
+import type { SpaceHelperProps } from '@looker/components'
 import { Space, IconButton } from '@looker/components'
 import { ChangeHistory } from '@styled-icons/material/ChangeHistory'
 import type { SpecList, SpecItem } from '@looker/sdk-codegen'
@@ -35,7 +36,7 @@ import { diffPath } from '../../utils'
 import { SdkLanguageSelector } from './SdkLanguageSelector'
 import { ApiSpecSelector } from './ApiSpecSelector'
 
-interface SelectorContainerProps {
+interface SelectorContainerProps extends SpaceHelperProps {
   /** Specs to choose from */
   specs: SpecList
   /** Current selected spec */
@@ -53,8 +54,9 @@ export const SelectorContainer: FC<SelectorContainerProps> = ({
   specs,
   spec,
   specDispatch,
+  ...spaceProps
 }) => (
-  <Space width="auto">
+  <Space width="auto" {...spaceProps}>
     <SdkLanguageSelector />
     <ApiSpecSelector specs={specs} spec={spec} specDispatch={specDispatch} />
     <Link to={`/${diffPath}/${spec.key}/`}>

packages/api-explorer/src/components/SideNav/SideNav.tsx

@@ -28,14 +28,12 @@ import type { FC, Dispatch } from 'react'
 import React, { useContext, useEffect, useState } from 'react'
 import { useHistory, useLocation } from 'react-router-dom'
 import {
-  Heading,
   TabList,
   Tab,
   TabPanel,
   TabPanels,
   useTabs,
   InputSearch,
-  SpaceVertical,
 } from '@looker/components'
 import type {
   SpecItem,
@@ -50,7 +48,6 @@ import type { SpecAction } from '../../reducers'
 import { setPattern } from '../../reducers'
 import { useWindowSize } from '../../utils'
 import { HEADER_REM } from '../Header'
-import { SelectorContainer } from '../SelectorContainer'
 import { SideNavMethodTags } from './SideNavMethodTags'
 import { SideNavTypeTags } from './SideNavTypeTags'
 import { useDebounce, countMethods, countTypes } from './searchUtils'
@@ -66,12 +63,7 @@ interface SideNavProps {
   specDispatch: Dispatch<SpecAction>
 }
 
-export const SideNav: FC<SideNavProps> = ({
-  headless = false,
-  specs,
-  spec,
-  specDispatch,
-}) => {
+export const SideNav: FC<SideNavProps> = ({ headless = false, spec }) => {
   const history = useHistory()
   const location = useLocation()
   const api = spec.api || ({} as ApiModel)
@@ -151,28 +143,18 @@ export const SideNav: FC<SideNavProps> = ({
 
   return (
     <nav>
-      <SpaceVertical alignItems="center" p="large" gap="xsmall">
-        {headless && (
-          <SpaceVertical>
-            <Heading as="h5" color="key" fontWeight="bold">
-              API Documentation
-            </Heading>
-            <SelectorContainer
-              specs={specs}
-              spec={spec}
-              specDispatch={specDispatch}
-            />
-          </SpaceVertical>
-        )}
-        <InputSearch
-          aria-label="Search"
-          onChange={handleInputChange}
-          placeholder="Search"
-          value={pattern}
-          isClearable
-          changeOnSelect
-        />
-      </SpaceVertical>
+      <InputSearch
+        pl="large"
+        pr="large"
+        pb="large"
+        pt={headless ? 'u3' : 'large'}
+        aria-label="Search"
+        onChange={handleInputChange}
+        placeholder="Search"
+        value={pattern}
+        isClearable
+        changeOnSelect
+      />
       <SearchMessage search={searchResults} />
       <TabList {...tabs} distribute>
         <Tab>Methods ({methodCount})</Tab>

packages/api-explorer/src/components/common/common.tsx

@@ -48,7 +48,7 @@ export const ApixSection: FC<SectionProps> = (props: any) => {
       {...props}
       id="top"
       p="xxlarge"
-      style={{ height: `${sectionH}px`, overflow: 'auto' }}
+      style={{ height: `${sectionH}px`, overflow: 'auto', borderTop: '0px' }}
     />
   )
 }