Use hamburger for sidebar

etowahadams · Oct 31, 2024 · cea5982 · cea5982
1 parent fd6104b
commit cea5982
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 31 deletions.
diff --git a/viz/src/components/LandingPage.tsx b/viz/src/components/LandingPage.tsx
@@ -3,7 +3,7 @@ import { Link } from "react-router-dom";
 import { useIsMobile } from "../hooks/use-mobile";
 import HomeNavigator from "./HomeNavigator";
 import { useState } from "react";
-
+import { Menu } from "lucide-react";
 const LandingPage: React.FC = () => {
   const isMobile = useIsMobile();
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
@@ -18,14 +18,7 @@ const LandingPage: React.FC = () => {
               onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
               className="text-gray-600 hover:text-gray-900"
             >
-              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M4 6h16M4 12h16M4 18h16"
-                />
-              </svg>
+              <Menu />
             </button>
             {isMobileMenuOpen && (
               <nav className="fixed inset-0 bg-white z-50 flex flex-col items-center justify-center space-y-8">
@@ -61,7 +54,7 @@ const LandingPage: React.FC = () => {
                   className="text-2xl text-gray-600 hover:text-gray-900"
                   onClick={() => setIsMobileMenuOpen(false)}
                 >
-                  Hugging Face
+                  Models
                 </Link>
                 <a
                   href="mailto:[email protected]"
@@ -87,7 +80,7 @@ const LandingPage: React.FC = () => {
               to="https://huggingface.co/liambai/InterProt-ESM2-SAEs"
               className="text-gray-600 hover:text-gray-900"
             >
-              Hugging Face
+              Models
             </Link>
             <a href="mailto:[email protected]" className="text-gray-600 hover:text-gray-900">
               Contact

diff --git a/viz/src/components/ui/sidebar.tsx b/viz/src/components/ui/sidebar.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { VariantProps, cva } from "class-variance-authority";
-import { PanelLeft } from "lucide-react";
+import { Menu } from "lucide-react";
 
 import { useIsMobile } from "@/hooks/use-mobile";
 import { cn } from "@/lib/utils";
@@ -249,26 +249,9 @@ Sidebar.displayName = "Sidebar";
 const SidebarTrigger = React.forwardRef<
   React.ElementRef<typeof Button>,
   React.ComponentProps<typeof Button>
->(({ className, onClick, ...props }, ref) => {
+>(({ className, ...props }) => {
   const { toggleSidebar } = useSidebar();
-
-  return (
-    <Button
-      ref={ref}
-      data-sidebar="trigger"
-      variant="ghost"
-      size="icon"
-      className={cn("h-7 w-7", className)}
-      onClick={(event) => {
-        onClick?.(event);
-        toggleSidebar();
-      }}
-      {...props}
-    >
-      <PanelLeft />
-      <span className="sr-only">Toggle Sidebar</span>
-    </Button>
-  );
+  return <Menu size={26} className={className} onClick={toggleSidebar} {...props} />;
 });
 SidebarTrigger.displayName = "SidebarTrigger";