waveterm/docusaurus-og
0
0
Fork 0
mirror of https://github.com/wavetermdev/docusaurus-og.git synced 2026-08-05 13:46:35 -07:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #18 from acid-info/design-update

Browse Source 
Design update
This commit is contained in:
jeangovil
2023-06-01 23:57:29 +03:30
committed by GitHub
parent 460949fa6a c7a8699bb6
commit c5bf61416b
8 changed files with 291 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/docusaurus-playground/docusaurus.config.js
+59 -10
View File
@@ -41,7 +41,7 @@ const config = {
},
},
docs: {
routeBasePath: '/docs',
routeBasePath: '/about',
versions: {
current: {
label: 'current',
@@ -57,16 +57,65 @@ const config = {
themeConfig:
/** @type {import('@acid-info/logos-docusaurus-preset').ThemeConfig} */
({
colorMode: {
defaultMode: 'dark',
disableSwitch: false,
},
navbar: {
// items: [
// {
// type: 'search',
// }
// ]
items: [
{
type: 'search',
},
{
label: 'About',
to: '/about',
},
{
label: 'Github',
href: 'https://github.com/status-im',
},
],
},
footer: {
copyright: 'Nimbus @2023<br/>All Rights Reserved.',
links: [
{
items: [
{
href: 'https://twitter.com/ethnimbus',
label: 'Twitter',
},
{
href: 'https://discord.gg/EP8DZnXu9y',
label: 'Discord',
},
{
href: '/',
label: 'Docs',
},
{
href: '/',
label: 'Github',
},
],
},
{
items: [
{
href: '/',
label: 'Contact us',
},
{
href: 'https://jobs.status.im/',
label: 'Work with us',
},
{
href: '/',
label: 'Privacy policy',
},
{
href: '/',
label: 'Terms & conditions',
},
],
},
],
},
}),
}
packages/logos-docusaurus-preset/src/theme-config/base.ts
+1
View File
@@ -15,6 +15,7 @@ export const baseThemeConfig: ThemeConfig = {
navbar: {
title: '',
logo: {},
hideOnScroll: true,
},
footer: {
logo: {},
packages/logos-docusaurus-theme/src/client/css/custom.scss
+126 -1
View File
@@ -185,7 +185,7 @@
--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>');
--ifm-navbar-sidebar-width: 83vw;
--ifm-navbar-sidebar-width: 100vw;
--ifm-pagination-border-radius: var(--ifm-global-radius);
--ifm-pagination-font-size: 1rem;
--ifm-pagination-item-active-background: var(--ifm-hover-overlay);
@@ -432,6 +432,10 @@ small {
}
}
.menu__list-item .menu__link {
@include lsd.typography('body2');
}
.menu__link--active {
border-left: 1px solid rgb(var(--lsd-border-primary));
border-radius: 0;
@@ -540,6 +544,35 @@ small {
align-items: center;
}
a[class^='sidebarLogo_'] {
margin: 0;
img {
height: 48px;
}
}
.navbar-sidebar__item {
padding-inline: var(--content-padding);
padding-block: 0;
}
.navbar-sidebar__back {
display: flex;
align-items: center;
padding: 0;
width: 100% !important;
margin: 0 !important;
gap: 16px;
margin-top: 24px !important;
margin-bottom: 24px !important;
}
.theme-doc-sidebar-menu .menu__link {
padding-left: var(--content-padding);
padding-right: 0;
}
@include utils.responsive('sm', 'down') {
:root {
--ifm-global-spacing: 0.5rem;
@@ -630,6 +663,10 @@ small {
flex: 1 0;
margin: auto;
}
nav.menu {
padding-top: 0;
}
}
@include utils.responsive('xl', 'up') {
@@ -653,6 +690,10 @@ small {
}
}
}
.theme-doc-toc-desktop {
top: calc(var(--ifm-navbar-height)) !important;
}
}
.container {
@@ -713,6 +754,7 @@ small {
.footer__title {
@include lsd.typography('label1');
margin-bottom: 4px;
font-weight: var(--ifm-font-weight-normal);
}
.footer > div:nth-child(1) > .footer__links {
@@ -870,6 +912,89 @@ small {
.main-wrapper {
padding-inline: 0;
}
.navbar-sidebar:has(.navbar-sidebar__items--show-secondary)
.navbar-sidebar__brand {
button:first-of-type {
display: none;
}
button.lsd-icon-button {
margin-left: auto;
}
}
.navbar-sidebar:not(:has(.navbar-sidebar__items--show-secondary)) {
.navbar-sidebar__items {
height: 180px;
}
.navbar-sidebar__item {
padding-block: var(--content-padding);
}
.menu__list {
display: flex;
flex-direction: column;
gap: 8px;
}
.menu__link {
padding-left: 0;
border-left: none;
> div {
font-size: var(--lsd-body1-fontSize) !important;
}
}
.footer > div {
gap: 32px !important;
}
.footer > button {
display: none;
}
.footer .container.container-fluid {
margin-bottom: 16px !important;
> .footer__links {
gap: 0 !important;
}
}
.footer .footer__links {
gap: 16px !important;
}
}
.navbar-sidebar__brand {
height: 60px;
padding-block: 0;
}
.navbar-sidebar__brand > button {
width: 32px;
height: 32px;
}
.navbar-sidebar__brand > button:first-of-type {
margin-right: 0 !important;
margin-left: auto;
}
.navbar-sidebar__brand > button:not(:last-of-type) {
border-right: none;
}
.navbar-sidebar__close {
border: 1px solid rgb(var(--lsd-border-primary));
display: flex;
align-items: center;
justify-content: center;
margin-left: unset;
}
}
[data-hidden-doc-sidebar='true'] {
packages/logos-docusaurus-theme/src/client/theme/DocSidebar/Desktop/styles.module.css
+1 -1
View File
@@ -3,7 +3,7 @@
display: flex;
flex-direction: column;
height: 100%;
margin-top: var(--ifm-navbar-height);
padding-top: var(--ifm-navbar-height);
/* width: var(--doc-sidebar-width); */
}
packages/logos-docusaurus-theme/src/client/theme/DocSidebarItem/Category/index.tsx
+4 -2
View File
@@ -17,7 +17,7 @@ import Link from '@docusaurus/Link'
import { translate } from '@docusaurus/Translate'
import useIsBrowser from '@docusaurus/useIsBrowser'
import DocSidebarItems from '@theme/DocSidebarItems'
import { ArrowDownIcon, ArrowUpIcon } from '@acid-info/lsd-react'
import { ArrowDownIcon, ArrowUpIcon, Typography } from '@acid-info/lsd-react'
// If we navigate to a category and it becomes active, it should automatically
// expand itself
@@ -165,7 +165,9 @@ export default function DocSidebarItemCategory({
href={collapsible ? hrefWithSSRFallback ?? '#' : hrefWithSSRFallback}
{...props}
>
{label}
<Typography variant="body2" color="primary">
{label}
</Typography>
{collapsed ? <ArrowUpIcon /> : <ArrowDownIcon />}
</Link>
{href && collapsible && (
packages/logos-docusaurus-theme/src/client/theme/Navbar/MobileSidebar/Header/index.tsx
+35
View File
@@ -0,0 +1,35 @@
import React from 'react'
import { useNavbarMobileSidebar } from '@docusaurus/theme-common/internal'
import { translate } from '@docusaurus/Translate'
import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle'
import NavbarLogo from '@theme/Navbar/Logo'
import { CloseIcon } from '@acid-info/lsd-react'
import SearchBar from '@theme/SearchBar'
function CloseButton() {
const mobileSidebar = useNavbarMobileSidebar()
return (
<button
type="button"
aria-label={translate({
id: 'theme.docs.sidebar.closeSidebarButtonAriaLabel',
message: 'Close navigation bar',
description: 'The ARIA label for close button of mobile sidebar',
})}
className="clean-btn navbar-sidebar__close"
onClick={() => mobileSidebar.toggle()}
>
<CloseIcon />
</button>
)
}
export default function NavbarMobileSidebarHeader() {
return (
<div className="navbar-sidebar__brand">
<NavbarLogo />
<NavbarColorModeToggle className="margin-right--md" />
<SearchBar />
<CloseButton />
</div>
)
}
packages/logos-docusaurus-theme/src/client/theme/Navbar/MobileSidebar/Layout/index.tsx
+27
View File
@@ -0,0 +1,27 @@
import React from 'react'
import clsx from 'clsx'
import { useNavbarSecondaryMenu } from '@docusaurus/theme-common/internal'
import Footer from '@theme/Footer'
export default function NavbarMobileSidebarLayout({
header,
primaryMenu,
secondaryMenu,
}) {
const { shown: secondaryMenuShown } = useNavbarSecondaryMenu()
return (
<div className="navbar-sidebar">
{header}
<div
className={clsx('navbar-sidebar__items', {
'navbar-sidebar__items--show-secondary': secondaryMenuShown,
})}
>
<div className="navbar-sidebar__item menu">{primaryMenu}</div>
<div className="navbar-sidebar__item menu">{secondaryMenu}</div>
</div>
{!secondaryMenuShown && <Footer />}
</div>
)
}
packages/logos-docusaurus-theme/src/client/theme/Navbar/MobileSidebar/SecondaryMenu/index.tsx
+38
View File
@@ -0,0 +1,38 @@
import React from 'react'
import { useThemeConfig } from '@docusaurus/theme-common'
import { useNavbarSecondaryMenu } from '@docusaurus/theme-common/internal'
import Translate from '@docusaurus/Translate'
import { Typography } from '@acid-info/lsd-react'
import { IconArrowLeft } from '@logos-theme/components/Icon'
function SecondaryMenuBackButton(props) {
return (
<button {...props} type="button" className="clean-btn navbar-sidebar__back">
<IconArrowLeft />
<Typography>
<Translate
id="theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel"
description="The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)"
>
Back to main menu
</Translate>
</Typography>
</button>
)
}
// The secondary menu slides from the right and shows contextual information
// such as the docs sidebar
export default function NavbarMobileSidebarSecondaryMenu() {
const isPrimaryMenuEmpty = useThemeConfig().navbar.items.length === 0
const secondaryMenu = useNavbarSecondaryMenu()
return (
<>
{/* edge-case: prevent returning to the primaryMenu when it's empty */}
{!isPrimaryMenuEmpty && (
<SecondaryMenuBackButton onClick={() => secondaryMenu.hide()} />
)}
{secondaryMenu.content}
</>
)
}