hovering on sidebar looks nice now

components/app-sidebar.tsx

@@ -3,43 +3,15 @@
 import * as React from "react";
 
 import { NavMain } from "@/components/nav-main";
-import { NavProjects } from "@/components/nav-projects";
-import { NavUser } from "@/components/nav-user";
-import { TeamSwitcher } from "@/components/team-switcher";
+import { Sidebar, SidebarContent, SidebarRail } from "@/components/ui/sidebar";
 import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarHeader,
-  SidebarRail,
-} from "@/components/ui/sidebar";
-import {
-  GalleryVerticalEndIcon,
-  AudioLinesIcon,
   TerminalIcon,
   TerminalSquareIcon,
-  BotIcon,
   BookOpenIcon,
-  Settings2Icon,
-  FrameIcon,
   PieChartIcon,
-  MapIcon,
 } from "lucide-react";
 import { usePathname } from "next/navigation";
 
-/*
-(property) items: {
-    title: string;
-    url: string;
-    icon?: React.ReactNode;
-    isActive?: boolean;
-    items?: {
-        title: string;
-        url: string;
-    }[];
-}[]
-*/
-
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
   const checkActive = (url: string) => {
     // /dashboard

components/nav-main.tsx

@@ -30,7 +30,7 @@ export function NavMain({
         {items.map((item) => (
           <SidebarMenuItem
             key={item.title}
-            className="hover:bg-gray-900 rounded-4xl"
+            className="hover:bg-back hover:border-0"
           >
             <SidebarMenuButton tooltip={item.title}>
               {item.icon}

components/ui/sidebar.tsx

@@ -462,7 +462,7 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
     <li
       data-slot="sidebar-menu-item"
       data-sidebar="menu-item"
-      className={cn("group/menu-item relative", className)}
+      className={cn("group/menu-item relative rounded-4xl", className)}
       {...props}
     />
   );