fix bugs

src/Components/Buttons/Button.tsx

@@ -20,8 +20,9 @@ const Button: FC<ButtonProps> = ({
   variant = "primary",
   size = "md",
   disabled,
-  href,
   className = "",
+
+  href,
   ...props
 }) => {
   const sizeClasses = {
@@ -43,6 +44,7 @@ const Button: FC<ButtonProps> = ({
 
   const buttonClasses = [
     className,
+
     "font-semibold",
     "rounded-lg",
     sizeClasses[size],

src/Components/Icons/Icons.tsx

@@ -22,6 +22,8 @@ export { default as Edit } from "./Edit";
 export { default as Upload } from "./Upload";
 export { default as Trash } from "./Trash";
 export { ChevronUp, ChevronDown } from "./Chevron";
+export { default as Search } from "./Search";
+export { default as Menu } from "./Menu";
 export {
   GreenPlay,
   GreenHorn,

src/Components/Icons/Menu.tsx

@@ -0,0 +1,18 @@
+export default function Menu(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M3 12H15M3 6H21M3 18H21"
+        stroke="#667085"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+}

src/Components/Icons/Search.tsx

@@ -0,0 +1,17 @@
+export default function Search(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M17.5 17.5L14.5834 14.5833M16.6667 9.58333C16.6667 13.4954 13.4954 16.6667 9.58333 16.6667C5.67132 16.6667 2.5 13.4954 2.5 9.58333C2.5 5.67132 5.67132 2.5 9.58333 2.5C13.4954 2.5 16.6667 5.67132 16.6667 9.58333Z"
+        stroke-width="1.66667"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+}

src/Components/Layout.tsx

@@ -1,6 +1,6 @@
-import { Bars3Icon } from "@heroicons/react/24/outline";
 import { Navbar, Sidebar, Footer } from "./Components";
 import React, { useState } from "react";
+import { Menu } from "./Icons/Icons";
 
 interface LayoutProps {
   children: JSX.Element;
@@ -15,26 +15,23 @@ export default function Layout({ children, closeSidebar }: LayoutProps) {
 
   return (
     <>
-      <div>
-        <Navbar>
-          <button
-            type="button"
-            className="-mx-2 inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-500"
-            onClick={() => setSidebarOpen(true)}
-          >
-            <span className="sr-only">Open sidebar</span>
-            <Bars3Icon className="h-6 w-6" aria-hidden="true" />
-          </button>
-        </Navbar>
+      <Navbar>
+        <button
+          type="button"
+          className="-mx-2 inline-flex items-center  justify-center rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-500"
+          onClick={() => setSidebarOpen(true)}
+        >
+          <Menu className="h-6 w-6 stroke-gray-400" aria-hidden="true" />
+        </button>
+      </Navbar>
 
-        <Sidebar
-          isOpen={sidebarOpen}
-          closeSidebar={closeSidebar}
-          setSidebarOpen={setSidebarOpen}
-        ></Sidebar>
-        <div className="lg:hidden">
-          <Footer />
-        </div>
+      <Sidebar
+        isOpen={sidebarOpen}
+        closeSidebar={closeSidebar}
+        setSidebarOpen={setSidebarOpen}
+      ></Sidebar>
+      <div className="lg:hidden">
+        <Footer />
       </div>
 
       <div className={classNames(closeSidebar ? "lg:pl-20" : "lg:pl-56")}>