fix: code highlight

Author: sailwebs

src/app/[locale]/docs/[version]/[category]/layout.tsx

@@ -1,4 +1,4 @@
-import { Box, Container, Stack, Toolbar } from "@mui/material";
+import { Box, Container, Drawer, Stack, Toolbar } from "@mui/material";
 import fs from "fs";
 import { SidebarMenu, SidebarMenuItem } from "@/components/SidebarMenu";
 import path from "path";
@@ -18,7 +18,6 @@ export default async function DocsLayout({
   children: React.ReactNode;
   params: Promise<MarkdownPageParams>;
 }>) {
-
   const { locale, version, category } = await params;
   setStaticParamsLocale(locale);
 
@@ -35,45 +34,35 @@ export default async function DocsLayout({
 
   const versions = fs.readdirSync(path.join(DOCS_DIR, locale));
 
+  const width = 280;
+
   return (
     <>
-      {menu.length ? (
-        <Stack
-          component="aside"
-          sx={{
-            width: "300px",
-            position: "fixed",
-            left: 0,
-            top: 0,
-            bottom: 0,
-          }}
-        >
-          <Toolbar />
-
-          <VersionList version={version} versions={versions} />
-          <Box
-            flex={1}
-            sx={{
-              overflow: "auto",
-              borderRight: 1,
-              borderColor: "var(--css-palette-divider)",
-            }}
-            pb={1}
-            pt={1}
-          >
-            <SidebarMenu data={menu} />
-          </Box>
-        </Stack>
-      ) : null}
-      <Box sx={{ marginLeft: menu.length ? "300px" : 0 }}>
+      <Stack direction="row">
+        {menu.length ? (
+          <Drawer open={true} variant="permanent" sx={{ width }} PaperProps={{ sx: { width, background: 'var(--css-palette-background-default)' } }}>
+            <Toolbar />
+            <VersionList version={version} versions={versions} />
+            <Box
+              flex={1}
+              sx={{
+                overflow: "auto",
+              }}
+              pb={1}
+              pt={1}
+            >
+              <SidebarMenu data={menu} />
+            </Box>
+          </Drawer>
+        ) : null}
         <Container
-          sx={{ minHeight: "var(--container-min-height)", paddingBlock: 3}}
+          sx={{ minHeight: "var(--container-min-height)", paddingBlock: 3 }}
           className="markdown-body with-sidebar"
         >
           {children}
+          <Footer border={false} />
         </Container>
-        <Footer border={false} />
-      </Box>
+      </Stack>
     </>
   );
 }

src/app/[locale]/docs/[version]/[category]/version.tsx

@@ -36,10 +36,9 @@ export default function VersionList({ version, versions }: Props) {
       trigger={
         <Box
           sx={{
-            border: 1,
-            borderColor: "divider",
-            borderLeftWidth: 0,
-            borderTopWidth: 0,
+            borderBottomWidth: 1,
+            borderBottomStyle: 'solid',
+            borderBottomColor: "divider",
             paddingBlock: 1,
           }}
         >

src/app/[locale]/global.css

@@ -3,7 +3,13 @@
 }
 
 /* code hightlight */
-.hljs, pre code {
+code {
+  background: var(--css-palette-divider);
+  padding: 2px 8px;
+  border-radius: var(--css-shape-borderRadius);
+}
+
+.hljs, pre > code {
   border-radius: var(--css-shape-borderRadius);
   background: #1A1E22;
   color: #FFF;

src/components/CodeWithCopyButton.tsx

@@ -30,7 +30,7 @@ export default function CodeWithCopyButton(
     }
   };
 
-  if(navigator.clipboard === undefined) {
+  if(typeof window !== "undefined" && window.navigator.clipboard === undefined) {
     return <StyledCode {...props}>{props.children}</StyledCode>
   };
 

src/components/ElevationScrollAppBar.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { AppBar, AppBarProps } from "@mui/material";
+import { AppBar, AppBarProps, useTheme } from "@mui/material";
 import useScrollTrigger from "@mui/material/useScrollTrigger";
 import { usePathname } from "next/navigation";
 import { useEffect } from "react";
@@ -11,6 +11,7 @@ export const ElevationScrollAppBar = (props: AppBarProps) => {
     disableHysteresis: true,
     threshold: 100,
   });
+  const theme = useTheme();
 
   useEffect(() => {
     window.scrollTo({
@@ -24,6 +25,7 @@ export const ElevationScrollAppBar = (props: AppBarProps) => {
       {...props}
       sx={{
         boxShadow: trigger ? `0 10px 10px rgba(0,0,0, 0.1)` : "none",
+        zIndex: theme.zIndex.drawer + 1
       }}
       position="fixed"
     />

src/components/SidebarMenu.tsx

@@ -57,8 +57,6 @@ export function SidebarMenuItem({ level = 1, item }: SidebatMenuItemProps) {
     },
   };
 
-  console.log(item)
-
   useEffect(() => {
     const isOpen = checkOpen(pathname, item);
     if (isOpen) {