diff --git a/canon-docs/src/app/layout.tsx b/canon-docs/src/app/layout.tsx index f51e130a67..6eb1856a1d 100644 --- a/canon-docs/src/app/layout.tsx +++ b/canon-docs/src/app/layout.tsx @@ -1,8 +1,9 @@ import type { Metadata } from 'next'; import { Sidebar } from '../components/Sidebar'; +import { Toolbar } from '@/components/Toolbar'; +import { Providers } from './providers'; import styles from './page.module.css'; -import { Providers } from './providers'; import './globals.css'; import '/public/core.css'; @@ -19,10 +20,6 @@ export default function RootLayout({ }: Readonly<{ children: React.ReactNode; }>) { - // const cookieStore = await cookies(); - // const theme = cookieStore.get('theme')?.value || 'light'; - // const themeName = cookieStore.get('theme-name')?.value || 'default'; - return (
-
{children}
+
+ + {children} +
diff --git a/canon-docs/src/components/Sidebar/Sidebar.module.css b/canon-docs/src/components/Sidebar/Sidebar.module.css index 809f1b560b..1b9aa02424 100644 --- a/canon-docs/src/components/Sidebar/Sidebar.module.css +++ b/canon-docs/src/components/Sidebar/Sidebar.module.css @@ -13,22 +13,15 @@ overflow: hidden; } +.logoContainer { + padding-left: 6px; + padding-top: 32px; +} + .logo path { fill: var(--canon-text-primary); } -.content { - padding-top: 20px; -} - -.actions { - display: flex; - flex-direction: row; - gap: 12px; - margin-top: 20px; - margin-bottom: 12px; -} - .menu { display: flex; flex-direction: row; diff --git a/canon-docs/src/components/Sidebar/index.tsx b/canon-docs/src/components/Sidebar/index.tsx index ecbf157d6c..455ab4be9b 100644 --- a/canon-docs/src/components/Sidebar/index.tsx +++ b/canon-docs/src/components/Sidebar/index.tsx @@ -1,5 +1,4 @@ import styles from './Sidebar.module.css'; -import { TabsVersion, TabsPages, TabsTheme } from './tabs'; import { Docs } from './docs'; import { Playground } from './playground'; import Link from 'next/link'; @@ -7,7 +6,7 @@ import Link from 'next/link'; export const Sidebar = () => { return (
-
+
{ -
- - -
- -
- - -
+
+
+ +
); diff --git a/canon-docs/src/components/Toolbar/index.tsx b/canon-docs/src/components/Toolbar/index.tsx new file mode 100644 index 0000000000..dfa6fd049d --- /dev/null +++ b/canon-docs/src/components/Toolbar/index.tsx @@ -0,0 +1,18 @@ +import Link from 'next/link'; +import { TabsVersion, TabsTheme } from './tabs'; +import styles from './styles.module.css'; +import { Nav } from './nav'; + +export const Toolbar = () => { + return ( +
+
+
+
+ + +
+
+ ); +}; diff --git a/canon-docs/src/components/Toolbar/nav.module.css b/canon-docs/src/components/Toolbar/nav.module.css new file mode 100644 index 0000000000..cb89843088 --- /dev/null +++ b/canon-docs/src/components/Toolbar/nav.module.css @@ -0,0 +1,84 @@ +.tabs { + height: 60px; +} + +.tabsTheme { + width: 142px; + border-radius: 0.375rem; + background-color: var(--canon-surface-2); + transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; +} + +.list { + display: flex; + position: relative; + z-index: 0; + gap: 1.5rem; +} + +.tab { + height: 60px; + display: flex; + align-items: center; + justify-content: center; + border: 0; + margin: 0; + outline: 0; + background: none; + appearance: none; + color: var(--canon-text-secondary) !important; + font-family: inherit; + font-size: 0.75rem; + line-height: 1.25rem; + font-weight: 500; + user-select: none; + flex: 1; + cursor: pointer; + padding: 0; + + &[data-selected] { + color: var(--canon-text-primary) !important; + + & p { + color: var(--canon-text-primary) !important; + } + } + + @media (hover: hover) { + &:hover { + color: var(--canon-text-primary); + } + } + + &:focus-visible { + position: relative; + + &::before { + content: ''; + position: absolute; + inset: 0.25rem 0; + border-radius: 0.25rem; + outline: 2px solid var(--canon-surface-1); + outline-offset: -1px; + } + } +} + +.tab p { + color: var(--canon-text-secondary) !important; +} + +.indicator { + position: absolute; + z-index: -1; + left: 0; + bottom: -1px; + translate: var(--active-tab-left) -50%; + width: var(--active-tab-width); + height: 1px; + border-radius: 0.25rem; + background-color: var(--canon-text-primary); + transition-property: translate, width, background-color; + transition-duration: 200ms; + transition-timing-function: ease-in-out; +} diff --git a/canon-docs/src/components/Toolbar/nav.tsx b/canon-docs/src/components/Toolbar/nav.tsx new file mode 100644 index 0000000000..b9d7ff0e35 --- /dev/null +++ b/canon-docs/src/components/Toolbar/nav.tsx @@ -0,0 +1,54 @@ +'use client'; + +import { Tabs } from '@base-ui-components/react/tabs'; +import { Text } from '../../../../packages/canon'; +import { usePathname } from 'next/navigation'; +import { useRouter } from 'next/navigation'; +import styles from './nav.module.css'; + +export const Nav = () => { + const pathname = usePathname(); + const router = useRouter(); + + const onValueChange = (value: string) => { + if (value === 'docs') { + router.push('/'); + } else { + router.push('/playground'); + } + }; + + return ( + + + { + router.push('/'); + }} + > + + Documentation + + + { + router.push('/playground'); + }} + > + + Playground + + + + + + ); +}; diff --git a/canon-docs/src/components/Toolbar/styles.module.css b/canon-docs/src/components/Toolbar/styles.module.css new file mode 100644 index 0000000000..3840030c02 --- /dev/null +++ b/canon-docs/src/components/Toolbar/styles.module.css @@ -0,0 +1,21 @@ +.toolbar { + position: sticky; + top: 0; + left: 0; + right: 0; + z-index: 1000; + background-color: var(--canon-surface-1); + border-bottom: 1px solid var(--canon-border-base); + height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 var(--canon-spacing-md); + transition: background-color 0.2s ease-in-out; +} + +.actions { + display: flex; + align-items: center; + gap: var(--canon-spacing-md); +} diff --git a/canon-docs/src/components/Sidebar/Tabs.module.css b/canon-docs/src/components/Toolbar/tabs.module.css similarity index 100% rename from canon-docs/src/components/Sidebar/Tabs.module.css rename to canon-docs/src/components/Toolbar/tabs.module.css diff --git a/canon-docs/src/components/Sidebar/tabs.tsx b/canon-docs/src/components/Toolbar/tabs.tsx similarity index 50% rename from canon-docs/src/components/Sidebar/tabs.tsx rename to canon-docs/src/components/Toolbar/tabs.tsx index e43f9a0422..39d21ff408 100644 --- a/canon-docs/src/components/Sidebar/tabs.tsx +++ b/canon-docs/src/components/Toolbar/tabs.tsx @@ -1,12 +1,9 @@ 'use client'; -import styles from './Tabs.module.css'; import { Tabs } from '@base-ui-components/react/tabs'; -import { Icon } from '../../../../packages/canon/src/components/Icon'; -import { Text } from '../../../../packages/canon/src/components/Text'; -import { usePathname } from 'next/navigation'; -import { useRouter } from 'next/navigation'; +import { Icon, Text } from '../../../../packages/canon'; import { usePlayground } from '@/utils/playground-context'; +import styles from './tabs.module.css'; export const TabsVersion = () => { const { selectedThemeName, setSelectedThemeName } = usePlayground(); @@ -54,50 +51,3 @@ export const TabsTheme = () => { ); }; - -export const TabsPages = () => { - const pathname = usePathname(); - const router = useRouter(); - - const onValueChange = (value: string) => { - if (value === 'docs') { - router.push('/'); - } else { - router.push('/playground'); - } - }; - - return ( - - - { - router.push('/'); - }} - > - - Documentation - - - { - router.push('/playground'); - }} - > - - Playground - - - - - - ); -};