fix invisible menu icon

Author: junzyx

packages/htmldocs/src/app/components/shell.tsx

@@ -1,9 +1,11 @@
 "use client";
 import * as React from "react";
 import { cn } from "~/lib/utils";
+import { List } from "@phosphor-icons/react";
 import { Sidebar } from "./sidebar";
 import { Topbar } from "./topbar";
 import { Logo } from "./logo";
+import { Button } from "./ui/button";
 
 type RootProps = React.ComponentPropsWithoutRef<"div">;
 
@@ -30,35 +32,22 @@ export const Shell = ({
 
   return (
     <>
-      <div className="flex bg-background text-white flex-col h-screen overflow-x-hidden print-hide">
+      <div className="flex bg-background text-foreground flex-col h-screen overflow-x-hidden print-hide">
         <div className="flex lg:hidden items-center px-6 justify-between h-[70px] border-b border-slate-6">
           <div className="h-[70px] flex items-center">
             <Logo />
           </div>
 
-          <button
-            className="h-6 w-6 rounded flex items-center justify-center text-white"
+          <Button
+            className="group"
+            variant="ghost"
+            size="icon"
             onClick={() => {
               setSidebarToggled((v) => !v);
             }}
-            type="button"
           >
-            <svg
-              fill="none"
-              height="16"
-              stroke="white"
-              viewBox="0 0 15 15"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                clipRule="evenodd"
-                d="M1.5 3C1.22386 3 1 3.22386 1 3.5C1 3.77614 1.22386 4 1.5 4H13.5C13.7761 4 14 3.77614 14 3.5C14 3.22386 13.7761 3 13.5 3H1.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H13.5C13.7761 7 14 7.22386 14 7.5C14 7.77614 13.7761 8 13.5 8H1.5C1.22386 8 1 7.77614 1 7.5ZM1 11.5C1 11.2239 1.22386 11 1.5 11H13.5C13.7761 11 14 11.2239 14 11.5C14 11.7761 13.7761 12 13.5 12H1.5C1.22386 12 1 11.7761 1 11.5Z"
-                fill="currentColor"
-                fillRule="evenodd"
-              />
-            </svg>
-          </button>
+            <List height={20} width={20} className="text-muted-foreground group-hover:text-foreground transition-colors duration-150"/>
+          </Button>
         </div>
 
         <div className="flex bg-slate-2">