Responsive done for computer screens

src/components/SideNav.tsx

@@ -32,9 +32,10 @@ const SideNav: React.FC<SideNavProps> = (
   return (
     <div className={classnames(
         "relative h-full flex flex-col text-deepcove text-center transition-all duration-500",
-        bgColor, maxWidth,
+        bgColor,
         {
-            "w-16" : !isSidebarOpen,
+            "w-[5vw]" : !isSidebarOpen,
+            "w-[11vw]" : isSidebarOpen
         }
 
     )}>
@@ -45,10 +46,10 @@ const SideNav: React.FC<SideNavProps> = (
         >
             {isSidebarOpen ? <FaArrowCircleLeft size={30} /> : <FaArrowCircleRight size={30} />}
         </Button>
-        <div className="flex flex-col divide-y divide-bluetang"></div>
+        <div className="flex flex-col divide-y divide-bluetang">
             {navItems.map((navItem, index) => (
                 <a href={navItem.url} className={classnames(
-                    "w-full h-20 flex justify-center items-center hover:text-platinum",
+                    "w-full h-20 flex justify-center items-center font-semibold hover:text-platinum",
                     {"bg-bluetang text-platinum" : index == 0}
                 )}>
                     {isSidebarOpen ? (
@@ -58,6 +59,7 @@ const SideNav: React.FC<SideNavProps> = (
                     )}
                 </a> 
             ))}
+        </div>
     </div>
   );
 }