feat: Refactor comment section to correctly handle API response structure

fix: Update Gravatar URL size and improve avatar rendering logic

style: Adjust footer margin for better layout consistency

refactor: Remove old navbar component and integrate new layout structure

feat: Enhance user profile page with user header component

chore: Remove unused user profile component

fix: Update posts per page configuration for better pagination

feat: Extend device context to support system theme mode

refactor: Remove unused device hook

fix: Improve storage state hook for better error handling

i18n: Add new translations for blog home page

feat: Implement pagination component for better navigation

feat: Create theme toggle component for improved user experience

feat: Introduce responsive navbar or side layout with theme toggle

feat: Develop custom select component for better UI consistency

feat: Create user header component to display user information

chore: Add query key constants for better code maintainability

web/src/app/(main)/layout.tsx

@@ -1,8 +1,8 @@
 'use client'
 
-import { motion } from 'framer-motion'
+import { motion } from 'motion/react'
 import { usePathname } from 'next/navigation'
-import { Navbar } from '@/components/layout/navbar'
+import { Navbar } from '@/components/layout/navbar-or-side'
 import { BackgroundProvider } from '@/contexts/background-context'
 import Footer from '@/components/layout/footer'
 import config from '@/config'
@@ -12,7 +12,6 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode
 }>) {
-  const pathname = usePathname()
   return (
     <>
       <motion.nav
@@ -23,10 +22,10 @@ export default function RootLayout({
           <Navbar />
         </header>
       </motion.nav>
-      <BackgroundProvider>
-        <div className='container mx-auto pt-16 px-4 sm:px-6 lg:px-10 max-w-7xl'>{children}</div>
-      </BackgroundProvider>
-      <Footer />
+        <BackgroundProvider>
+          <div className='container mx-auto pt-16 px-4 sm:px-6 lg:px-10 max-w-7xl'>{children}</div>
+        </BackgroundProvider>
+        <Footer />
     </>
   )
 }

web/src/app/globals.css

@@ -131,4 +131,24 @@ html, body {
 
 .sonner-toast {
   background-color: aqua;
+}
+
+::-webkit-scrollbar {
+  width: 4px;           /* 垂直滚动条宽度 */
+  height: 4px;          /* 水平滚动条高度 */
+  background: transparent; /* 滚动条轨道背景 */
+  position: absolute;   /* 实际不会影响内容布局 */
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(0,0,0,0.15); /* 滚动条滑块颜色 */
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(0,0,0,0.3);
+}
+
+::-webkit-scrollbar-corner {
+  background: transparent;
 }

web/src/app/layout.tsx

@@ -34,7 +34,7 @@ export default async function RootLayout({
       >
         <Toaster richColors position="top-center" offset={80} />
         <DeviceProvider>
-          <NextIntlClientProvider>{children}</NextIntlClientProvider>
+            <NextIntlClientProvider>{children}</NextIntlClientProvider>
         </DeviceProvider>
       </body>
     </html>