update side nav with new ui

dashboard/15-final/app/dashboard/layout.tsx

@@ -2,11 +2,11 @@ import SideNav from '@/app/ui/dashboard/sidenav';
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="flex h-screen overflow-hidden">
-      <div className="w-14 md:w-64">
+    <div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
+      <div className="w-full flex-none md:w-64">
         <SideNav />
       </div>
-      <div className="flex-grow overflow-y-auto p-4 sm:p-10 md:p-20">
+      <div className="flex-grow p-4 sm:p-10 md:overflow-y-auto md:p-20">
         {children}
       </div>
     </div>

dashboard/15-final/app/ui/dashboard/log-out-button.tsx

@@ -6,7 +6,7 @@ export default function LogOutButton() {
   return (
     <button
       onClick={() => signOut()}
-      className="flex gap-2 rounded p-2 font-semibold hover:text-blue-600"
+      className="my-2 flex grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2"
     >
       <PowerIcon className="w-6" />
       <div className="hidden md:block">Sign Out</div>

dashboard/15-final/app/ui/dashboard/nav-links.tsx

@@ -29,9 +29,9 @@ export default function NavLinks() {
             key={link.name}
             href={link.href}
             className={clsx(
-              'mt-2 flex gap-2 rounded-md p-2 font-semibold hover:bg-gray-50 hover:text-blue-600',
+              'my-2 flex grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2',
               {
-                'bg-gray-50 text-blue-600': pathname === link.href,
+                'bg-sky-100 text-blue-600': pathname === link.href,
               },
             )}
           >

dashboard/15-final/app/ui/dashboard/sidenav.tsx

@@ -5,20 +5,23 @@ import LogOutButton from './log-out-button';
 
 export default function SideNav() {
   return (
-    <div className="flex h-full flex-col justify-between border-r px-2 py-4">
-      <div>
-        <Link href="/">
-          <Image
-            src="/logo.png"
-            alt="The Next.js Symbol, a white N inside a black circle"
-            className="mb-4 ml-1"
-            width={32}
-            height={32}
-          />
-        </Link>
+    <div className="flex h-full flex-col border-r px-2 py-4">
+      <Link
+        className="flex h-20 items-end rounded-md bg-blue-600 p-4 md:h-40"
+        href="/"
+      >
+        <Image
+          src="/acme-logo.svg"
+          alt="The Next.js Symbol, a white N inside a black circle"
+          width={100}
+          height={100}
+        />
+      </Link>
+      <div className="flex grow flex-row justify-between space-x-2 md:flex-col">
         <NavLinks />
+        <div className="hidden h-auto w-full grow rounded-md bg-gray-50 md:block"></div>
+        <LogOutButton />
       </div>
-      <LogOutButton />
     </div>
   );
 }