improved design

2023-05-29 01:36:49 +03:30
parent ba8dd7dd8f
commit 785ddb9a3f
8 changed files with 51 additions and 29 deletions
@@ -27,13 +27,15 @@ export default function ({ text, icon, path, className }: SidebarItemProps) {
    <Link href={path}>
      <div
        className={`${
-          active ? "bg-sky-500" : "hover:bg-gray-50 hover:outline bg-gray-100"
-        } outline-sky-100 outline-1 duration-100 rounded-md my-1 p-2 cursor-pointer flex items-center gap-2 w-full ${className}`}
+          active ? "bg-sky-500" : "hover:bg-slate-200 bg-gray-100"
+        } duration-100 py-1 px-4 cursor-pointer flex items-center gap-2 w-full ${className}`}
      >
        {React.cloneElement(icon, {
-          className: `w-4 ${active ? "text-white" : "text-sky-300"}`,
+          className: `w-4 h-4 ${active ? "text-white" : "text-sky-300"}`,
        })}
-        <p className={`${active ? "text-white" : "text-sky-900"} truncate`}>
+        <p
+          className={`${active ? "text-white" : "text-sky-900"} truncate w-4/6`}
+        >
          {text}
        </p>
      </div>