fix: fix website layout

packages/logos-docusaurus-theme/src/client/css/_vars.scss

@@ -17,6 +17,7 @@ $breakpoints: (
   ),
   'xl': (
     1200,
+    null,
   ),
 );
 

packages/logos-docusaurus-theme/src/client/css/custom.scss

@@ -14,6 +14,8 @@
 [data-theme='dark'] {
   background-color: transparent !important;
 
+  --content-padding: 32px;
+
   --ifm-color-scheme: dark;
   --ifm-navbar-link-color: rgb(var(--lsd-text-primary));
   --ifm-navbar-background-color: rgb(var(--lsd-surface-primary));
@@ -165,7 +167,7 @@
   --ifm-card-vertical-spacing: var(--ifm-spacing-vertical);
 
   --ifm-footer-link-horizontal-spacing: 0;
-  --ifm-footer-padding-horizontal: 0;
+  --ifm-footer-padding-horizontal: var(--content-padding);
   --ifm-footer-padding-vertical: 24px;
   --ifm-footer-background-color: transparent;
 
@@ -179,7 +181,7 @@
   --ifm-navbar-height: 80px;
   --ifm-navbar-item-padding-horizontal: 0.75rem;
   --ifm-navbar-item-padding-vertical: 0.25rem;
-  --ifm-navbar-padding-horizontal: var(--ifm-spacing-horizontal);
+  --ifm-navbar-padding-horizontal: var(--content-padding);
   --ifm-navbar-padding-vertical: calc(var(--ifm-spacing-vertical) * 0.5);
   --ifm-navbar-shadow: var(--ifm-global-shadow-lw);
   --ifm-navbar-search-input-icon: url('data:image/svg+xml;utf8,<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16px" width="16px"><path d="M6.02945,10.20327a4.17382,4.17382,0,1,1,4.17382-4.17382A4.15609,4.15609,0,0,1,6.02945,10.20327Zm9.69195,4.2199L10.8989,9.59979A5.88021,5.88021,0,0,0,12.058,6.02856,6.00467,6.00467,0,1,0,9.59979,10.8989l4.82338,4.82338a.89729.89729,0,0,0,1.29912,0,.89749.89749,0,0,0-.00087-1.29909Z" /></svg>');
@@ -426,87 +428,6 @@ small {
   font-size: var(--ifm-h6-font-size);
 }
 
-.footer {
-  border-top: 1px solid rgb(var(--lsd-text-primary));
-  margin-bottom: 40px;
-
-  > div {
-    max-width: unset;
-    padding: unset;
-    margin: unset;
-    width: 100% !important;
-
-    display: grid;
-    grid-template-columns: repeat(24, 1fr);
-    gap: 1rem;
-  }
-}
-
-.footer__title {
-  @include lsd.typography('label1');
-  margin-bottom: 4px;
-}
-
-.footer__links {
-  margin-bottom: 0;
-  grid-column: 8 / 25;
-  grid-row: 1 / 1;
-
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 2rem 1rem;
-}
-
-.footer__col {
-  grid-template-columns: span 1;
-}
-
-.footer__items {
-  display: flex;
-  flex-direction: row;
-  gap: 0.5rem;
-}
-
-.footer__item {
-  display: inline-block;
-
-  &,
-  a {
-    @include lsd.typography('label1');
-  }
-
-  a {
-    text-decoration: underline;
-  }
-
-  &:not(:last-child) {
-    &::after {
-      content: '•';
-      margin-left: 8px;
-      text-decoration: none;
-      display: inline-block;
-    }
-  }
-}
-
-.footer__bottom {
-  text-align: unset;
-  grid-column: 1 / 4;
-  grid-row: 1 / 1;
-
-  & > div:first-of-type {
-    display: none;
-  }
-}
-
-.footer__copyright {
-  @include lsd.typography('body2');
-}
-
-.footer__logo {
-  margin: 0 !important;
-}
-
 .card {
   padding: var(--ifm-alert-padding-vertical) var(--ifm-alert-padding-horizontal);
 }
@@ -703,3 +624,182 @@ div.w-10 > a:not(:last-child) {
     --ifm-h4-font-size: 1.25rem !important;
   }
 }
+
+.main-wrapper {
+  padding: 0 var(--content-padding);
+
+  & > div {
+    display: grid;
+    grid-template-columns: repeat(18, 1fr);
+    gap: 1rem;
+
+    aside {
+      width: auto;
+      grid-column: 1 / 4;
+      border: none;
+    }
+
+    main {
+      grid-column: 5 / 19;
+      max-width: none;
+    }
+  }
+}
+
+.main-wrapper {
+  // website pages
+  & > main {
+    padding: 0;
+
+    &,
+    > .row,
+    & > .row > .col {
+      width: 100% !important;
+      flex-basis: 100% !important;
+      max-width: unset;
+      padding: 0;
+      margin: 0;
+      flex: unset;
+    }
+  }
+}
+
+.footer {
+  border-top: 1px solid rgb(var(--lsd-text-primary));
+  margin-bottom: 40px;
+
+  > div {
+    max-width: unset;
+    padding: unset;
+    margin: unset;
+    width: 100% !important;
+
+    display: grid;
+    grid-template-columns: repeat(18, 1fr);
+    gap: 1rem;
+  }
+}
+
+.footer__title {
+  @include lsd.typography('label1');
+  margin-bottom: 4px;
+}
+
+.footer__links {
+  margin-bottom: 0;
+  grid-column: 5 / 19;
+  grid-row: 1 / 1;
+
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 2rem 1rem;
+}
+
+.footer__col {
+  grid-template-columns: span 1;
+}
+
+.footer__items {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+}
+
+.footer__item {
+  display: inline-block;
+
+  &,
+  a {
+    @include lsd.typography('label1');
+  }
+
+  a {
+    text-decoration: underline;
+  }
+
+  &:not(:last-child) {
+    &::after {
+      content: '•';
+      margin-left: 8px;
+      text-decoration: none;
+      display: inline-block;
+    }
+  }
+}
+
+.footer__bottom {
+  text-align: unset;
+  grid-column: 1 / 4;
+  grid-row: 1 / 1;
+
+  & > div:first-of-type {
+    display: none;
+  }
+}
+
+.footer__copyright {
+  @include lsd.typography('body2');
+}
+
+.footer__logo {
+  margin: 0 !important;
+}
+
+.navbar__inner {
+  padding: 0 var(--content-padding);
+}
+
+@include utils.responsive('lg', 'up') {
+  .navbar__inner {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+  }
+
+  .navbar__left {
+    flex-grow: 0;
+    flex-basis: calc(1 / 12 * 100%);
+  }
+
+  .navbar__left-items {
+    flex: 1 0;
+  }
+
+  .navbar__right-items {
+  }
+}
+
+@include utils.responsive('xl', 'up') {
+  .navbar__inner {
+    display: grid;
+    gap: 16px;
+    grid-template-columns: repeat(18, 1fr);
+    padding: 0 var(--content-padding);
+  }
+
+  .navbar__left {
+    grid-column: 1 / 5;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .navbar__left-items {
+    grid-column: 5 / 14;
+  }
+
+  .navbar__right-items {
+    grid-column: 14 / 19;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+  }
+}
+
+@include utils.responsive('lg', 'down') {
+  .main-wrapper > div {
+    display: block;
+    > main {
+    }
+  }
+}

packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/index.tsx

@@ -10,7 +10,8 @@ import DocItemTOCMobile from '@theme/DocItem/TOC/Mobile'
 import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop'
 import DocItemContent from '@theme/DocItem/Content'
 import DocBreadcrumbs from '@theme/DocBreadcrumbs'
-import styles from './styles.module.css'
+import styles from './styles.module.scss'
+import { useMedia } from 'react-use'
 
 /**
  * Decide if the toc should be rendered, on mobile or desktop viewports
@@ -18,11 +19,16 @@ import styles from './styles.module.css'
 export function useDocTOC() {
   const { frontMatter, toc } = useDoc()
   const windowSize = useWindowSize()
+  const isDesktop = useMedia('(min-width: 1200px)')
   const hidden = frontMatter.hide_table_of_contents
   const canRender = !hidden && toc.length > 0
-  const mobile = canRender ? <DocItemTOCMobile /> : undefined
+  const mobile = canRender ? (
+    <div className={styles.tocMobile}>
+      <DocItemTOCMobile />
+    </div>
+  ) : undefined
   const desktop =
-    canRender && (windowSize === 'desktop' || windowSize === 'ssr') ? (
+    canRender && (isDesktop || windowSize === 'ssr') ? (
       <DocItemTOCDesktop />
     ) : undefined
 

packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/styles.module.scss

@@ -1,3 +1,5 @@
+@use '../../../css/utils';
+
 .docItemContainer header + *,
 .docItemContainer article > *:first-child {
   margin-top: 0;
@@ -21,7 +23,29 @@
   grid-column: span 1;
 }
 
-@media (max-width: 997px) {
+.tocMobile {
+  display: none;
+
+  & > div {
+    display: block !important;
+  }
+}
+
+@include utils.responsive('xl', 'up') {
+  .tocMobile {
+    display: none;
+  }
+}
+
+@include utils.responsive('xl', 'down') {
+  .tocMobile {
+    display: block;
+  }
+
+  .toc {
+    display: none;
+  }
+
   .docItemGrid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);

packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Main/index.tsx

@@ -1,29 +0,0 @@
-import React from 'react'
-import clsx from 'clsx'
-import { useDocsSidebar } from '@docusaurus/theme-common/internal'
-import styles from './styles.module.css'
-
-export default function DocPageLayoutMain({
-  hiddenSidebarContainer,
-  children,
-}) {
-  const sidebar = useDocsSidebar()
-  return (
-    <main
-      className={clsx(
-        styles.docMainContainer,
-        (hiddenSidebarContainer || !sidebar) && styles.docMainContainerEnhanced,
-      )}
-    >
-      <div
-        className={clsx(
-          'padding-top--md padding-bottom--lg',
-          styles.docItemWrapper,
-          hiddenSidebarContainer && styles.docItemWrapperEnhanced,
-        )}
-      >
-        {children}
-      </div>
-    </main>
-  )
-}

packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Main/styles.module.css

@@ -1,18 +0,0 @@
-.docMainContainer {
-  display: flex;
-  width: 100%;
-  grid-column: span 14;
-}
-
-.docItemWrapper {
-  width: 100%;
-  padding-top: 16px !important;
-  padding-bottom: 80px !important;
-}
-
-@media (max-width: 997px) {
-  .docMainContainer {
-    width: 100%;
-    grid-column: span 2;
-  }
-}

packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Sidebar/index.tsx

@@ -1,76 +0,0 @@
-import React, { useState, useCallback } from 'react'
-import clsx from 'clsx'
-import { prefersReducedMotion, ThemeClassNames } from '@docusaurus/theme-common'
-import { useDocsSidebar } from '@docusaurus/theme-common/internal'
-import { useLocation } from '@docusaurus/router'
-import DocSidebar from '@theme/DocSidebar'
-import ExpandButton from '@theme/DocPage/Layout/Sidebar/ExpandButton'
-import styles from './styles.module.css'
-// Reset sidebar state when sidebar changes
-// Use React key to unmount/remount the children
-// See https://github.com/facebook/docusaurus/issues/3414
-function ResetOnSidebarChange({ children }) {
-  const sidebar = useDocsSidebar()
-  return (
-    <React.Fragment key={sidebar?.name ?? 'noSidebar'}>
-      {children}
-    </React.Fragment>
-  )
-}
-export default function DocPageLayoutSidebar({
-  sidebar,
-  hiddenSidebarContainer,
-  setHiddenSidebarContainer,
-}) {
-  const { pathname } = useLocation()
-  const [hiddenSidebar, setHiddenSidebar] = useState(false)
-  const toggleSidebar = useCallback(() => {
-    if (hiddenSidebar) {
-      setHiddenSidebar(false)
-    }
-    // onTransitionEnd won't fire when sidebar animation is disabled
-    // fixes https://github.com/facebook/docusaurus/issues/8918
-    if (!hiddenSidebar && prefersReducedMotion()) {
-      setHiddenSidebar(true)
-    }
-    setHiddenSidebarContainer((value) => !value)
-  }, [setHiddenSidebarContainer, hiddenSidebar])
-
-  return (
-    <aside
-      className={clsx(
-        ThemeClassNames.docs.docSidebarContainer,
-        styles.docSidebarContainer,
-        hiddenSidebarContainer && styles.docSidebarContainerHidden,
-        styles.sidebarGrid,
-      )}
-      onTransitionEnd={(e) => {
-        if (
-          !e.currentTarget.classList.contains(styles.docSidebarContainer ?? '')
-        ) {
-          return
-        }
-        if (hiddenSidebarContainer) {
-          setHiddenSidebar(true)
-        }
-      }}
-    >
-      <ResetOnSidebarChange>
-        <div
-          className={clsx(
-            styles.sidebarViewport,
-            hiddenSidebar && styles.sidebarViewportHidden,
-          )}
-        >
-          <DocSidebar
-            sidebar={sidebar}
-            path={pathname}
-            onCollapse={toggleSidebar}
-            isHidden={hiddenSidebar}
-          />
-          {hiddenSidebar && <ExpandButton toggleSidebar={toggleSidebar} />}
-        </div>
-      </ResetOnSidebarChange>
-    </aside>
-  )
-}

packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Sidebar/styles.module.css

@@ -1,36 +0,0 @@
-:root {
-  --doc-sidebar-width: 300px;
-  --doc-sidebar-hidden-width: 30px;
-}
-
-.docSidebarContainer {
-  display: none;
-}
-
-.sidebarGrid {
-  grid-column: span 3;
-}
-
-@media (min-width: 997px) {
-  .docSidebarContainer {
-    display: block;
-    width: 100%;
-    margin-top: calc(-1 * var(--ifm-navbar-height));
-    will-change: width;
-    transition: width var(--ifm-transition-fast) ease;
-    clip-path: inset(0);
-    margin-left: auto;
-  }
-
-  .docSidebarContainerHidden {
-    width: var(--doc-sidebar-hidden-width);
-    cursor: pointer;
-  }
-
-  .sidebarViewport {
-    top: 0;
-    position: sticky;
-    height: 100%;
-    max-height: 100vh;
-  }
-}

packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/index.tsx

@@ -1,33 +0,0 @@
-import React, { useState } from 'react'
-import { useDocsSidebar } from '@docusaurus/theme-common/internal'
-import Layout from '@theme/Layout'
-import BackToTopButton from '@theme/BackToTopButton'
-import DocPageLayoutSidebar from '@theme/DocPage/Layout/Sidebar'
-import DocPageLayoutMain from '@theme/DocPage/Layout/Main'
-import styles from './styles.module.css'
-import clsx from 'clsx'
-
-export default function DocPageLayout({ children }) {
-  const sidebar = useDocsSidebar()
-  const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false)
-  return (
-    <Layout wrapperClassName={styles.docsWrapper}>
-      <BackToTopButton />
-      <div className="grid">
-        <div className={clsx('grid-item', 'w-3', 'desktop')} />
-        {sidebar && (
-          <DocPageLayoutSidebar
-            sidebar={sidebar.items}
-            hiddenSidebarContainer={hiddenSidebarContainer}
-            setHiddenSidebarContainer={setHiddenSidebarContainer}
-          />
-        )}
-        <div className={clsx('grid-item', 'w-1', 'desktop')} />
-        <DocPageLayoutMain hiddenSidebarContainer={hiddenSidebarContainer}>
-          {children}
-        </DocPageLayoutMain>
-        <div className={clsx('grid-item', 'w-3', 'desktop')} />
-      </div>
-    </Layout>
-  )
-}

packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/styles.module.css

@@ -1,9 +0,0 @@
-.docPage {
-  display: flex;
-  justify-content: center;
-}
-
-.docsWrapper {
-  display: flex;
-  flex: 1 0 auto;
-}

packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/index.tsx

@@ -1,17 +1,17 @@
-import React from 'react'
-import { useThemeConfig, ErrorCauseBoundary } from '@docusaurus/theme-common'
+import { ErrorCauseBoundary, useThemeConfig } from '@docusaurus/theme-common'
 import {
   splitNavbarItems,
   useNavbarMobileSidebar,
 } from '@docusaurus/theme-common/internal'
-import NavbarItem from '@theme/NavbarItem'
 import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle'
-import SearchBar from '@theme/SearchBar'
-import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle'
 import NavbarLogo from '@theme/Navbar/Logo'
+import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle'
 import NavbarSearch from '@theme/Navbar/Search'
-import styles from './styles.module.css'
+import NavbarItem from '@theme/NavbarItem'
+import SearchBar from '@theme/SearchBar'
 import clsx from 'clsx'
+import React from 'react'
+import styles from './styles.module.css'
 
 function useNavbarItems() {
   // TODO temporary casting until ThemeConfig type is improved
@@ -48,19 +48,19 @@ export default function NavbarContent() {
   const searchBarItem = items.find((item) => item.type === 'search')
 
   return (
-    <div className={clsx('grid', 'navbar__inner')}>
-      {!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
-      <div className={clsx('grid-item', 'w-1')}>
+    <div className="navbar__inner">
+      <div className="navbar__left">
+        {!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
         <NavbarLogo />
       </div>
-      <div className={clsx('grid-item', 'w-6', 'desktop')} />
-      <div className={clsx('grid-item', 'w-10')}>
+      <div className="navbar__left-items">
         <NavbarItems items={leftItems} />
       </div>
-      <div className={clsx('grid-item', 'w-1', 'desktop')} />
-      <div className={clsx('grid-item', 'w-6', styles.rightSection)}>
+      <div className="navbar__right-items">
         <NavbarItems items={rightItems} />
-        <NavbarColorModeToggle className={styles.colorModeToggle} />
+        <NavbarColorModeToggle
+          className={clsx(styles.colorModeToggle, 'navbar__color-mode-toggle')}
+        />
         {!searchBarItem && (
           <NavbarSearch>
             <SearchBar />

packages/logos-docusaurus-theme/src/client/theme/SearchBar/index.tsx

@@ -6,7 +6,10 @@ const SearchBarWrapper: React.FC = () => {
   const activePlugin = useActivePlugin()
   if (!activePlugin) return <></>
 
-  return typeof window === 'undefined' ? <></> : <SearchBar />
+  // temporarily disable search bar
+  return <></>
+
+  // return typeof window === 'undefined' ? <></> : <SearchBar />
 }
 
 export default SearchBarWrapper

packages/logos-docusaurus-theme/src/client/theme/style.module.css

@@ -1,5 +1,8 @@
 .root {
-  padding-inline: 32px;
+  width: 100%;
+  max-width: 1440px;
+  margin: 0 auto;
+  padding: 0;
 }
 
 @media (max-width: 997px) {

packages/logos-docusaurus-theme/tsconfig.client.json

@@ -26,7 +26,9 @@
     "src/client",
     "src/*.d.ts",
     "src/theme.ts",
-    "src/client/theme/NavbarItem"
+    "src/client/theme/NavbarItem",
+    "../docusaurus-playground/src/theme/DocPage/Layout/index.tsx",
+    "../docusaurus-playground/src/theme/DocPage/Layout/index.tsx"
   ],
   "exclude": ["src/index.ts", "**/__tests__/**"]
 }

packages/logos-docusaurus-theme/tsconfig.json

@@ -10,6 +10,11 @@
     "jsx": "react",
     "target": "es5"
   },
-  "include": ["src", "src/client/theme/NavbarItem"],
+  "include": [
+    "src",
+    "src/client/theme/NavbarItem",
+    "../docusaurus-playground/src/theme/DocPage/Layout/index.tsx",
+    "../docusaurus-playground/src/theme/DocPage/Layout/index.tsx"
+  ],
   "exclude": ["src/client", "**/__tests__/**"]
 }