feat(docs): update styles

tszhong0411 · Aug 27, 2024 · 8b6a8f3 · 8b6a8f3
1 parent b0402a7
commit 8b6a8f3
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 10 deletions.
diff --git a/apps/docs/src/app/layout.tsx b/apps/docs/src/app/layout.tsx
@@ -25,7 +25,7 @@ const Layout = (props: LayoutProps) => {
       <body>
         <Providers>
           <Header />
-          <div className='mx-auto max-w-6xl px-5 sm:px-8 md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10'>
+          <div className='max-w-8xl mx-auto px-5 sm:px-8 md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10'>
             <Sidebar />
             <main className='pt-4'>{children}</main>
           </div>

diff --git a/apps/docs/src/components/layout/header.tsx b/apps/docs/src/components/layout/header.tsx
@@ -8,7 +8,7 @@ import ThemeToggle from './theme-toggle'
 const Header = () => {
   return (
     <header className='border-border/40 bg-background/95 supports-[backdrop-filter]:bg-background/60 sticky top-0 z-50 w-full border-b backdrop-blur'>
-      <div className='mx-auto flex h-14 max-w-6xl items-center justify-between px-5 md:px-8'>
+      <div className='max-w-8xl mx-auto flex h-14 items-center justify-between px-5 md:px-8'>
         <div className='flex items-center gap-2 font-bold md:gap-6'>
           <MobileNav />
           <Link href='/' className='tracking-tighter max-md:hidden'>

diff --git a/apps/docs/src/components/layout/sidebar.tsx b/apps/docs/src/components/layout/sidebar.tsx
@@ -6,11 +6,11 @@ import { usePathname } from 'next/navigation'
 
 import { SIDEBAR_LINKS } from '../../config/links'
 
-const sidebarLinkVariants = cva('', {
+const sidebarLinkVariants = cva('block rounded-lg px-4 py-2', {
   variants: {
     active: {
-      true: 'text-foreground font-medium',
-      false: 'hover:text-foreground/80 text-foreground/60 transition-colors'
+      true: 'bg-red-500/10 font-semibold text-red-500',
+      false: 'hover:bg-accent'
     }
   }
 })
@@ -19,11 +19,11 @@ const Sidebar = () => {
   const pathname = usePathname()
 
   return (
-    <aside className='sticky top-14 max-h-[calc(100vh-3.5rem)] w-full py-4 pr-4 max-md:hidden'>
-      <ScrollArea className='h-full'>
+    <aside className='sticky top-14 max-h-[calc(100vh-3.5rem)] w-full py-4 text-sm max-md:hidden'>
+      <ScrollArea className='h-full pr-4'>
         {SIDEBAR_LINKS.map((section) => (
-          <div key={section.title}>
-            <div className='font-semibold'>{section.title}</div>
+          <div key={section.title} className='mb-8'>
+            <div className='px-4 font-semibold'>{section.title}</div>
             <ul className='flex flex-col gap-2.5 py-4 text-sm font-medium'>
               {section.links.map((link) => (
                 <li key={link.text}>

diff --git a/apps/docs/tailwind.config.ts b/apps/docs/tailwind.config.ts
@@ -3,7 +3,14 @@ import { type Config } from 'tailwindcss'
 
 const config: Config = {
   content: ['./src/**/*.{js,ts,jsx,tsx,md,mdx}', '../../packages/ui/src/**/*.{js,ts,jsx,tsx}'],
-  presets: [sharedConfig]
+  presets: [sharedConfig],
+  theme: {
+    extend: {
+      maxWidth: {
+        '8xl': '92rem'
+      }
+    }
+  }
 }
 
 export default config