diff --git a/docs-ui/src/app/(docs)/layout.module.css b/docs-ui/src/app/(docs)/layout.module.css index fa94ef3a13..a4ea17aaac 100644 --- a/docs-ui/src/app/(docs)/layout.module.css +++ b/docs-ui/src/app/(docs)/layout.module.css @@ -2,5 +2,4 @@ width: 100%; max-width: 960px; margin: 0 auto; - padding: 0 24px 64px; } diff --git a/docs-ui/src/app/layout.module.css b/docs-ui/src/app/layout.module.css new file mode 100644 index 0000000000..895067c300 --- /dev/null +++ b/docs-ui/src/app/layout.module.css @@ -0,0 +1,21 @@ +.container { + position: relative; + z-index: 20; + width: 100%; + margin-inline: 0 16px; + margin-top: 112px; + margin-bottom: 48px; + padding-inline: 40px; + padding-block: 48px; + background-color: white; + width: calc(100% - 32px); + border-radius: 0.5rem; +} + +@media (min-width: 768px) { + .container { + width: calc(100% - 332px - 40px); + margin-left: 332px; + margin-right: 40px; + } +} diff --git a/docs-ui/src/app/layout.tsx b/docs-ui/src/app/layout.tsx index 092bca57d4..7ee30ddfa0 100644 --- a/docs-ui/src/app/layout.tsx +++ b/docs-ui/src/app/layout.tsx @@ -3,7 +3,7 @@ import { Sidebar } from '../components/Sidebar'; import { Toolbar } from '@/components/Toolbar'; import { Providers } from './providers'; import { CustomTheme } from '@/components/CustomTheme'; -import styles from '../css/page.module.css'; +import styles from './layout.module.css'; import '../css/globals.css'; import '/public/theme-backstage.css'; @@ -29,14 +29,10 @@ export default function RootLayout({ > -
- -
- - {children} -
- -
+ + +
{children}
+ diff --git a/docs-ui/src/components/Sidebar/Sidebar.module.css b/docs-ui/src/components/Sidebar/Sidebar.module.css index 7d2a13a3f3..4fad36c74d 100644 --- a/docs-ui/src/components/Sidebar/Sidebar.module.css +++ b/docs-ui/src/components/Sidebar/Sidebar.module.css @@ -6,15 +6,11 @@ .sidebar { display: block; position: fixed; - top: 16px; - left: 16px; - border-radius: 8px; - width: 300px; - height: calc(100vh - 32px); - box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.025); + top: 112px; + left: 0; + width: 332px; + height: calc(100vh - 112px); color: var(--primary); - background-color: var(--panel); - border: 1px solid var(--border); overflow: hidden; } } @@ -23,22 +19,44 @@ height: 100%; } +.scrollbar { + display: flex; + justify-content: center; + background-color: rgba(0, 0, 0, 0.1); + width: 0.25rem; + border-radius: 0.375rem; + margin: 0.5rem; + opacity: 0; + transition: opacity 150ms 300ms; + right: -20px; + + &[data-scrolling] { + opacity: 1; + transition-duration: 75ms; + transition-delay: 0ms; + } + + &::before { + content: ''; + position: absolute; + width: 1.25rem; + height: 100%; + } +} + +.thumb { + width: 100%; + border-radius: inherit; + background-color: rgba(0, 0, 0, 0.2); +} + .viewport { overflow: scroll; height: 100%; } .content { - padding: 0 20px 20px; -} - -.logoContainer { - padding-left: 6px; - padding-top: 20px; -} - -.logo path { - fill: var(--primary); + padding: 0 20px 48px; } .menu { @@ -98,35 +116,3 @@ font-size: 14px; color: var(--secondary); } - -.scrollbar { - display: flex; - justify-content: center; - background-color: rgba(0, 0, 0, 0.1); - width: 0.25rem; - border-radius: 0.375rem; - margin: 0.5rem; - opacity: 0; - transition: opacity 150ms 300ms; - right: -20px; - - &[data-hovering], - &[data-scrolling] { - opacity: 1; - transition-duration: 75ms; - transition-delay: 0ms; - } - - &::before { - content: ''; - position: absolute; - width: 1.25rem; - height: 100%; - } -} - -.thumb { - width: 100%; - border-radius: inherit; - background-color: rgba(0, 0, 0, 0.2); -} diff --git a/docs-ui/src/components/Sidebar/docs.tsx b/docs-ui/src/components/Sidebar/docs.tsx deleted file mode 100644 index da501b151a..0000000000 --- a/docs-ui/src/components/Sidebar/docs.tsx +++ /dev/null @@ -1,82 +0,0 @@ -'use client'; - -import Link from 'next/link'; -import { components, overview, layoutComponents, theme } from '@/utils/data'; -import { motion } from 'motion/react'; -import styles from './Sidebar.module.css'; -import { usePathname } from 'next/navigation'; -import { Fragment } from 'react'; - -const data = [ - { - title: 'Overview', - content: overview, - url: '', - }, - { - title: 'Theme', - content: theme, - url: '/theme', - }, - { - title: 'Layout Components', - content: layoutComponents, - url: '/components', - }, - { - title: 'Components', - content: components, - url: '/components', - }, -]; - -export const Docs = () => { - const pathname = usePathname(); - const isPlayground = pathname.includes('/playground'); - - return ( - - {data.map(section => { - return ( - -
{section.title}
- - {section.content.map(item => { - const isActive = pathname === `${section.url}/${item.slug}`; - - return ( - -
{item.title}
-
- {item.status === 'alpha' && 'Alpha'} - {item.status === 'beta' && 'Beta'} - {item.status === 'inProgress' && 'In Progress'} - {item.status === 'stable' && 'Stable'} - {item.status === 'deprecated' && 'Deprecated'} -
- - ); - })} - - ); - })} - - ); -}; diff --git a/docs-ui/src/components/Sidebar/index.tsx b/docs-ui/src/components/Sidebar/index.tsx index b3fdbfe168..02308001d6 100644 --- a/docs-ui/src/components/Sidebar/index.tsx +++ b/docs-ui/src/components/Sidebar/index.tsx @@ -1,57 +1,92 @@ +'use client'; + import styles from './Sidebar.module.css'; -import { Docs } from './docs'; -import { Playground } from './playground'; -import Link from 'next/link'; +import { components, overview, layoutComponents, theme } from '@/utils/data'; import { ScrollArea } from '@base-ui-components/react/scroll-area'; +import Link from 'next/link'; +import { usePathname } from 'next/navigation'; +import { motion } from 'motion/react'; +import { Fragment } from 'react'; + +const data = [ + { + title: 'Overview', + content: overview, + url: '', + }, + { + title: 'Theme', + content: theme, + url: '/theme', + }, + { + title: 'Layout Components', + content: layoutComponents, + url: '/components', + }, + { + title: 'Components', + content: components, + url: '/components', + }, +]; export const Sidebar = () => { + const pathname = usePathname(); + const isPlayground = pathname.includes('/playground'); + return (
-
- - - - - - - - - - - - - - - - - - -
- - + + {data.map(section => { + return ( + +
{section.title}
+ + {section.content.map(item => { + const isActive = + pathname === `${section.url}/${item.slug}`; + + return ( + +
{item.title}
+
+ {item.status === 'alpha' && 'Alpha'} + {item.status === 'beta' && 'Beta'} + {item.status === 'inProgress' && 'In Progress'} + {item.status === 'stable' && 'Stable'} + {item.status === 'deprecated' && 'Deprecated'} +
+ + ); + })} + + ); + })} +
diff --git a/docs-ui/src/components/Sidebar/playground.tsx b/docs-ui/src/components/Sidebar/playground.tsx deleted file mode 100644 index d5dd9db892..0000000000 --- a/docs-ui/src/components/Sidebar/playground.tsx +++ /dev/null @@ -1,77 +0,0 @@ -'use client'; - -import { components } from '@/utils/data'; -import { Checkbox } from '@backstage/ui'; -import { motion } from 'motion/react'; -import styles from './Sidebar.module.css'; -import { usePathname } from 'next/navigation'; -import { screenSizes } from '@/utils/data'; -import { usePlayground } from '@/utils/playground-context'; - -export const Playground = () => { - const pathname = usePathname(); - const isPlayground = pathname.includes('/playground'); - const { - selectedScreenSizes, - setSelectedScreenSizes, - selectedComponents, - setSelectedComponents, - } = usePlayground(); - - const handleComponentCheckboxChange = (slug: string) => { - if (selectedComponents.find(item => item === slug)) { - const res = selectedComponents.filter(item => item !== slug); - setSelectedComponents(res); - } else { - setSelectedComponents([...selectedComponents, slug]); - } - }; - - const handleCheckboxChange = (slug: string) => { - if (selectedScreenSizes.find(item => item === slug)) { - const res = selectedScreenSizes.filter(item => item !== slug); - setSelectedScreenSizes(res); - } else { - setSelectedScreenSizes([...selectedScreenSizes, slug]); - } - }; - - return ( - -
Components
- {components.map(({ slug, title }) => ( -
-
{title}
- handleComponentCheckboxChange(slug)} - /> -
- ))} -
Screen sizes
- {screenSizes.map(({ slug, title }) => ( -
-
{title}
- handleCheckboxChange(slug)} - /> -
- ))} - - ); -}; diff --git a/docs-ui/src/components/Toolbar/Toolbar.module.css b/docs-ui/src/components/Toolbar/Toolbar.module.css new file mode 100644 index 0000000000..d1f1b44a7f --- /dev/null +++ b/docs-ui/src/components/Toolbar/Toolbar.module.css @@ -0,0 +1,31 @@ +.toolbar { + position: fixed; + display: flex; + top: 0; + left: 332px; + right: 40px; + height: 112px; + z-index: 10; + align-items: center; + justify-content: space-between; + padding-left: 0.25rem; +} + +.left { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.name { + margin-top: 3px; + font-size: 28px; + color: #26c9ad; + font-weight: 600; +} + +.actions { + display: flex; + align-items: center; + gap: 1rem; +} diff --git a/docs-ui/src/components/Toolbar/Toolbar.tsx b/docs-ui/src/components/Toolbar/Toolbar.tsx new file mode 100644 index 0000000000..5d7a5e3c47 --- /dev/null +++ b/docs-ui/src/components/Toolbar/Toolbar.tsx @@ -0,0 +1,30 @@ +import { ThemeSelector } from './theme'; +import { ThemeNameSelector } from './theme-name'; +import styles from './Toolbar.module.css'; +import { Nav } from './nav'; + +export const Toolbar = () => { + return ( +
+
+ + + +
Button
+
+
+ + +
+
+ ); +}; diff --git a/docs-ui/src/components/Toolbar/index.ts b/docs-ui/src/components/Toolbar/index.ts new file mode 100644 index 0000000000..f362defa5e --- /dev/null +++ b/docs-ui/src/components/Toolbar/index.ts @@ -0,0 +1 @@ +export { Toolbar } from './Toolbar'; diff --git a/docs-ui/src/components/Toolbar/index.tsx b/docs-ui/src/components/Toolbar/index.tsx deleted file mode 100644 index eac51f1857..0000000000 --- a/docs-ui/src/components/Toolbar/index.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { ThemeSelector } from './theme'; -import { ThemeNameSelector } from './theme-name'; -import styles from './styles.module.css'; -import { Nav } from './nav'; - -export const Toolbar = () => { - return ( -
-
-
-
- - -
-
- ); -}; diff --git a/docs-ui/src/components/Toolbar/styles.module.css b/docs-ui/src/components/Toolbar/styles.module.css deleted file mode 100644 index 5700e876ab..0000000000 --- a/docs-ui/src/components/Toolbar/styles.module.css +++ /dev/null @@ -1,22 +0,0 @@ -.toolbar { - position: sticky; - top: 16px; - left: 0; - right: 0; - border-radius: 0.5rem; - z-index: 10; - background-color: var(--panel); - height: 60px; - display: flex; - align-items: center; - justify-content: space-between; - padding: 0 1.5rem; - box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.025); - border: 1px solid var(--border); -} - -.actions { - display: flex; - align-items: center; - gap: 1rem; -} diff --git a/docs-ui/src/css/globals.css b/docs-ui/src/css/globals.css index f8ac189113..b9c82af302 100644 --- a/docs-ui/src/css/globals.css +++ b/docs-ui/src/css/globals.css @@ -26,8 +26,6 @@ } body { - display: flex; - flex-direction: row; background-color: var(--bg); color: var(--primary); font-family: var(--font-regular); diff --git a/docs-ui/src/css/page.module.css b/docs-ui/src/css/page.module.css deleted file mode 100644 index 3a0bb492d8..0000000000 --- a/docs-ui/src/css/page.module.css +++ /dev/null @@ -1,50 +0,0 @@ -.global { - width: 100%; -} - -.container { - width: 100%; - padding: 0 16px; -} - -@media (min-width: 768px) { - .container { - padding-left: 332px; - } -} - -.page { - flex: 1; -} - -.page p { - color: var(--primary); - font-size: 1rem; - line-height: 1.5rem; - margin-top: 0; - margin-bottom: 1rem; -} - -.content { - width: 100%; - max-width: 960px; - margin: 0 auto; - padding: 64px 24px 64px; -} - -.header { - width: 100%; - margin-bottom: 64px; -} - -.header img { - width: 100%; - height: auto; -} - -.pageContainer { - width: 100%; - max-width: 960px; - margin: 0 auto; - padding: 0 24px 64px; -}