Inset header and many design fixes

Author: nmn

packages/docs/src/components/Footer.tsx

@@ -7,6 +7,7 @@
 
 import * as React from 'react';
 import * as stylex from '@stylexjs/stylex';
+import { GithubIcon, TwitterIcon } from 'lucide-react';
 
 function ExternalLinkIcon(props: React.SVGProps<SVGSVGElement>) {
   return (
@@ -27,59 +28,6 @@ function ExternalLinkIcon(props: React.SVGProps<SVGSVGElement>) {
   );
 }
 
-function GithubIcon(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
-      <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
-      <path d="M9 18c-4.51 2-5-2-7-2" />
-    </svg>
-  );
-}
-
-function TwitterIcon(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
-      <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z" />
-    </svg>
-  );
-}
-
-function BlueskyIcon(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
-      <path d="M12 11c-2-4-5-7-7-7-1.5 0-2.5 1-2.5 2.5C2.5 8 3 11 4 12.5c1 1.5 3 2 5 1.5-.5 2-1 4.5 1 6s4-1 5-3c1 2 3 4.5 5 3s1.5-4 1-6c2 .5 4 0 5-1.5 1-1.5 1.5-4.5 1.5-6 0-1.5-1-2.5-2.5-2.5-2 0-5 3-7 7z" />
-      <path d="M12 18.5v3" />
-    </svg>
-  );
-}
-
 const footerLinks = {
   develop: [
     { label: 'Learn', href: '/docs/learn' },
@@ -219,14 +167,14 @@ export default function Footer() {
             >
               <TwitterIcon {...stylex.props(styles.socialIcon)} />
             </a>
-            <a
+            {/* <a
               href="https://bsky.app/profile/stylex.dev"
               target="_blank"
               rel="noopener noreferrer"
               {...stylex.props(styles.socialLink)}
             >
               <BlueskyIcon {...stylex.props(styles.socialIcon)} />
-            </a>
+            </a> */}
           </div>
         </div>
       </div>
@@ -268,13 +216,15 @@ const styles = stylex.create({
     fontWeight: 600,
     fontSize: '0.875rem',
     color: 'var(--color-fd-foreground)',
+    textAlign: 'center',
   },
   list: {
     listStyle: 'none',
     margin: 0,
     padding: 0,
     display: 'flex',
     flexDirection: 'column',
+    alignItems: 'center',
     gap: 8,
   },
   link: {

packages/docs/src/components/LogoBold.tsx

@@ -39,12 +39,12 @@ export default function LogoBold({ xstyle }: { xstyle?: stylex.StyleXStyles }) {
       </defs>
       <path
         d="M298.101 227.366c2.391 5.6 13.07 27.839 15.264 33.295-13.355 22.14-16.488 27.885-44.407 62.98C155.339 441.287 67.678 460.298 13.96 405.337 8.712 399.73 4.058 392.44 0 383.467c1.143 2.058 2.653 4.326 4.53 6.804l.679.883c.115.149.232.298.35.448l.724.91.754.926.785.944.815.961.846.979.876.996.906 1.013.938 1.031.48.522.983 1.057.503.535 1.028 1.083.526.548c66.356 60.072 132.546 8.534 222.416-91.044 13.566-15.775 33.553-44.007 59.962-84.697Zm34.703-190.061c42.053 36.145 42.053 92.233 10.507 172.34-2.417-5.89-13.066-29.436-15.736-35.468 24.834-68.036 25.41-100.38-10.306-132.635-20.547-18.555-35.138-19.319-62.918-14.8l-1.819.303c-.304.051-.609.104-.914.157l-1.84.328-1.854.342-.933.177-21.905 4.338v-.04l.483-.176c43.96-16.015 81.711-17.295 107.235 5.134Z"
-        fill={`url(#${id}-a)`}
+        fill={`#5BD3F3`}
         transform="translate(278 -.052)"
       />
       <path
         d="M305.062 153.35c66.669 125.717 70.877 193.743 48.67 241.331-8 17.148-27.95 28.999-36.532 33.608-21.54 11.568-66.138 5.808-106.006-5.873l-5.976-2.544c20.033 6.443 63.57 14.86 87.042 8.417 77.085-21.16 67.914-112.798-9.564-256.715C205.218 27.657 120.448-11.821 53.627 15.314c-6.416 2.605-12.01 6.165-16.822 10.575l.515-.549 1.033-1.084.517-.534 1.038-1.054c7.453-7.476 15.18-13.311 23.143-15.997 60.427-20.382 164.163-.12 242.011 146.679Z"
-        fill={`url(#${id}-b)`}
+        fill={`#D573DE`}
         transform="translate(278 -.052)"
       />
       <path

packages/docs/src/components/TypingWord.tsx

@@ -7,8 +7,8 @@
 
 'use client';
 
-import * as React from 'react';
 import * as stylex from '@stylexjs/stylex';
+import { useEffect, useState } from 'react';
 
 const words = [
   'expressive',
@@ -19,11 +19,11 @@ const words = [
 ];
 
 export default function TypingWord() {
-  const [index, setIndex] = React.useState(0);
-  const [displayed, setDisplayed] = React.useState('');
-  const [isDeleting, setIsDeleting] = React.useState(false);
+  const [index, setIndex] = useState(0);
+  const [displayed, setDisplayed] = useState('');
+  const [isDeleting, setIsDeleting] = useState(false);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const word = words[index] ?? '';
 
     if (!isDeleting && displayed === word) {
@@ -58,7 +58,7 @@ export default function TypingWord() {
 
 const styles = stylex.create({
   typingWord: {
+    color: 'var(--color-fd-primary)',
     fontWeight: 700,
   },
 });
-

packages/docs/src/components/layout/docs.tsx

@@ -39,11 +39,9 @@ export function DocsLayout({ tree, children, ...props }: DocsLayoutProps) {
       <div {...stylex.props(layoutStyles.wrapper)}>
         <main id="nd-docs-layout" {...stylex.props(layoutStyles.main)}>
           <Sidebar />
-          <div {...stylex.props(layoutStyles.content)}>
-            {children}
-          </div>
+          <div {...stylex.props(layoutStyles.content)}>{children}</div>
+          <Footer />
         </main>
-        <Footer />
       </div>
     </TreeContextProvider>
   );
@@ -85,22 +83,27 @@ const layoutStyles = stylex.create({
   main: {
     // flex flex-1 flex-row [--fd-nav-height:56px]
     display: 'flex',
+    flexDirection: 'column',
     flexGrow: 1,
-    flexDirection: 'row',
-    ['--fd-nav-height' as any]: '56px',
+    // flexDirection: 'row',
+    ['--fd-nav-height' as any]: '64px',
+    paddingInlineStart: {
+      default: 292,
+      '@media (max-width: 767.9px)': 0,
+    },
   },
   content: {
-    display: 'flex',
-    flexDirection: 'column',
-    flexGrow: 1,
-    minWidth: 0,
+    // flexGrow: 1,
+    // minWidth: 0,
   },
 });
 
 function Sidebar() {
   const { root } = useTreeContext();
   const [open] = use(SidebarContext);
 
+  console.log('open', open);
+
   const children = useMemo(() => {
     function renderItems(items: PageTree.Node[]) {
       return items.map((item) => (
@@ -123,6 +126,10 @@ function Sidebar() {
         open === false && sidebarStyles.closed,
       )}
     >
+      <div {...stylex.props(sidebarStyles.blurContainer)}>
+        <div {...stylex.props(sidebarStyles.blur)} />
+      </div>
+
       <aside {...stylex.props(sidebarStyles.base)} ref={sidebarRef}>
         {children}
       </aside>
@@ -131,37 +138,64 @@ function Sidebar() {
 }
 const sidebarStyles = stylex.create({
   container: {
-    position: 'sticky',
-    top: 56,
+    position: 'fixed',
+    top: 64,
+    left: 0,
     display: {
       default: 'flex',
       '@media (max-width: 767.9px)': 'none',
     },
     alignSelf: 'flex-start',
     flexShrink: 0,
     padding: 8,
-    height: 'calc(100dvh - 56px)',
+    height: 'calc(100dvh - 64px)',
+    transform: {
+      default: 'translateX(0px)',
+      '@media (max-width: 767.9px)': 'translateX(-100%)',
+    },
+    transitionProperty: 'transform',
+    transitionDuration: '0.15s',
+    transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
     zIndex: 10,
   },
+  open: {
+    transform: 'translateX(0)',
+  },
+  closed: {
+    transform: 'translateX(-100%)',
+  },
+  blurContainer: {
+    position: 'absolute',
+    inset: 8,
+    overflow: 'hidden',
+    borderRadius: 20,
+    cornerShape: 'squircle',
+    zIndex: 1,
+  },
+  blur: {
+    position: 'absolute',
+    inset: -64,
+    insetInlineStart: -8,
+    backdropFilter: 'blur(32px) saturate(800%)',
+  },
   base: {
     display: 'flex',
     flexDirection: 'column',
     gap: 2,
     padding: 4 * 4,
-    fontSize: `${14 / 16}rem`,
+    fontSize: `1rem`,
     overflowY: 'auto',
     overscrollBehavior: 'contain',
     width: 280,
     height: '100%',
-    backgroundColor: 'var(--color-fd-background)',
     borderRadius: 20,
+    cornerShape: 'squircle',
     borderWidth: 1,
     borderStyle: 'solid',
     borderColor: 'var(--color-fd-border)',
     boxShadow: '0 4px 16px rgba(0, 0, 0, 0.06)',
+    zIndex: 10,
   },
-  open: {},
-  closed: {},
 });
 
 function SidebarItem({
@@ -333,7 +367,7 @@ const linkVariants = stylex.create({
     position: 'relative',
     display: 'inline-flex',
     alignItems: 'center',
-    fontSize: `${14 / 16}rem`,
+    fontSize: `1rem`,
     lineHeight: 1.42,
     gap: 2 * 4,
     paddingBlock: 1.5 * 4,

packages/docs/src/components/layout/home/SidebarToggle.tsx

@@ -5,7 +5,8 @@ import { SidebarIcon } from 'lucide-react';
 import { use } from 'react';
 
 export default function SidebarToggle() {
-  const [open, setOpen] = use(SidebarContext);
+  const [_open, setOpen] = use(SidebarContext);
+
   return (
     <button
       type="button"