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="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/logo-icon.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+const LogoIcon: React.FC = () => {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 112 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clip-path="url(#clip0_137_1487)">
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M14.4164 26.996C18.0401 26.8714 21.4154 25.098 23.5809 22.2307C21.9268 22.0847 20.1007 21.8278 18.1637 21.4631C17.07 23.824 15.7617 25.7423 14.4164 26.996ZM10.3813 28.5242C17.8483 30.5222 25.5222 26.0904 27.523 18.6235C29.5241 11.1549 25.092 3.47822 17.6235 1.47703C10.1549 -0.524151 2.47822 3.908 0.477034 11.3765C-1.52415 18.8451 2.908 26.5218 10.3765 28.523C10.3781 28.5234 10.3797 28.5238 10.3813 28.5242ZM10.8921 26.5905C10.8928 26.5907 10.8935 26.5909 10.8942 26.5911C10.8949 26.5913 10.8956 26.5915 10.8963 26.5917C11.0745 26.6388 11.4156 26.6494 11.9936 26.3286C12.5855 26 13.2984 25.3861 14.0589 24.4346C14.7833 23.528 15.4954 22.3845 16.1447 21.0523C14.992 20.8006 13.8096 20.5136 12.6088 20.1918C11.4081 19.8701 10.2406 19.5274 9.11646 19.1691C9.01271 20.6474 9.0576 21.9938 9.23173 23.1411C9.41449 24.3454 9.72492 25.2335 10.0733 25.8141C10.4135 26.3809 10.7141 26.5422 10.8921 26.5905ZM7.16253 18.5154C6.9293 21.1068 7.10314 23.4223 7.64139 25.1806C4.56545 23.2609 2.5291 20.0374 2.08737 16.4715C3.59288 17.1721 5.30268 17.8627 7.16253 18.5154ZM9.34227 17.1407C10.5498 17.5331 11.8158 17.9088 13.1265 18.26C14.4372 18.6112 15.7214 18.9188 16.9634 19.1828C17.3445 18.2112 17.6895 17.1683 17.9844 16.0676C18.2794 14.9669 18.502 13.8913 18.6577 12.8593C17.4502 12.4669 16.1842 12.0912 14.8735 11.74C13.5628 11.3888 12.2786 11.0812 11.0366 10.8172C10.6555 11.7888 10.3105 12.8317 10.0156 13.9324C9.72063 15.0331 9.498 16.1087 9.34227 17.1407ZM9.04478 10.4244C8.68617 11.3724 8.36285 12.3729 8.0837 13.4147C7.80455 14.4565 7.58431 15.4846 7.42086 16.485C5.38535 15.7556 3.56006 14.9864 2.02297 14.2214C2.07401 13.4491 2.20092 12.6703 2.40889 11.8942C2.61685 11.118 2.89632 10.3802 3.23831 9.68573C4.95196 9.79178 6.91732 10.0383 9.04478 10.4244ZM11.8553 8.94772C13.008 9.19942 14.1904 9.48642 15.3911 9.80815C16.5919 10.1299 17.7594 10.4726 18.8835 10.8309C18.9873 9.35256 18.9424 8.00622 18.7683 6.85886C18.5855 5.65457 18.2751 4.76645 17.9267 4.18591C17.5852 3.61685 17.2835 3.4565 17.1058 3.40889C16.9281 3.36128 16.5867 3.3493 16.0064 3.67138C15.4145 3.99995 14.7015 4.61387 13.9411 5.56543C13.2166 6.47201 12.5046 7.61553 11.8553 8.94772ZM13.5836 3.00404C12.2383 4.25767 10.93 6.17596 9.83626 8.53687C7.89925 8.17217 6.07323 7.91532 4.41913 7.76928C6.58463 4.90198 9.9599 3.12856 13.5836 3.00404ZM18.9552 19.5756C19.3138 18.6275 19.6371 17.6271 19.9163 16.5853C20.1954 15.5435 20.4157 14.5154 20.5791 13.515C22.6146 14.2444 24.4399 15.0136 25.977 15.7786C25.926 16.5509 25.7991 17.3297 25.5911 18.1058C25.3831 18.882 25.1037 19.6198 24.7617 20.3143C23.048 20.2082 21.0827 19.9617 18.9552 19.5756ZM20.8375 11.4846C22.6973 12.1373 24.4071 12.8279 25.9126 13.5284C25.4709 9.96255 23.4345 6.73908 20.3586 4.8194C20.8969 6.57773 21.0707 8.89314 20.8375 11.4846Z"
+          fill="white"
+        />
+      </g>
+      <path
+        d="M36.808 25.872L33.48 26L33.16 24.528H33.352C34.3333 24.4213 35.08 24.1547 35.592 23.728C36.1253 23.28 36.5733 22.5547 36.936 21.552L43.72 3.28H45.256L52.808 22.064C53.256 23.1093 53.6507 23.792 53.992 24.112C54.3547 24.432 54.9307 24.592 55.72 24.592L56.072 26C54.408 25.8933 52.904 25.84 51.56 25.84C50.2373 25.84 48.9467 25.8933 47.688 26L47.4 24.624H47.528C49.2133 24.6027 50.056 24.304 50.056 23.728C50.056 23.4507 49.288 21.552 47.752 18.032H39.784L38.216 22.384C38.152 22.64 38.12 22.864 38.12 23.056C38.12 23.504 38.3227 23.8453 38.728 24.08C39.1333 24.3147 39.8267 24.464 40.808 24.528L41.192 26L36.808 25.872ZM43.464 7.92L40.392 16.368H47.016L43.464 7.92ZM67.4188 14.832C67.0561 14.4693 66.5548 14.1067 65.9148 13.744C65.2748 13.3813 64.5388 13.2 63.7068 13.2C62.8748 13.2 62.1068 13.6587 61.4028 14.576C60.6988 15.472 60.3468 16.7413 60.3468 18.384C60.3468 20.0267 60.7734 21.4453 61.6268 22.64C62.4801 23.8133 63.7494 24.4 65.4348 24.4C66.7788 24.4 67.8881 23.9627 68.7628 23.088C68.8054 23.0453 68.8588 23.024 68.9228 23.024C68.9868 23.024 69.0401 23.0453 69.0828 23.088L69.7228 23.824C68.1441 25.5307 66.3094 26.384 64.2188 26.384C62.1494 26.384 60.4961 25.7227 59.2588 24.4C58.0428 23.0773 57.4348 21.4133 57.4348 19.408C57.4348 16.9333 58.1174 15.056 59.4828 13.776C60.8694 12.496 62.5974 11.856 64.6667 11.856C65.5628 11.856 66.4694 11.984 67.3868 12.24C68.3254 12.496 69.0294 12.816 69.4988 13.2C69.5201 13.2427 69.5308 13.2853 69.5308 13.328C69.5308 13.6267 69.2001 14.256 68.5388 15.216C68.4534 15.3013 68.3361 15.344 68.1868 15.344C68.0588 15.344 67.8028 15.1733 67.4188 14.832ZM72.071 14.192L71.591 14.224L71.303 13.296C72.7963 12.9333 73.895 12.5707 74.599 12.208C75.303 11.8453 75.6977 11.6427 75.783 11.6C76.0603 11.6 76.2203 11.6213 76.263 11.664C76.3483 11.7493 76.4123 12.432 76.455 13.712C78.1617 12.4747 79.7083 11.856 81.095 11.856C82.9297 11.856 84.2097 12.496 84.935 13.776C86.727 12.496 88.391 11.856 89.927 11.856C93.0203 11.856 94.567 13.4453 94.567 16.624V23.728C94.567 24.112 94.663 24.3787 94.855 24.528C95.047 24.656 95.5163 24.752 96.263 24.816L96.551 26.096L93.415 26L89.959 26.096L89.703 24.816C90.727 24.7307 91.335 24.6453 91.527 24.56C91.7403 24.4533 91.847 24.176 91.847 23.728V17.712C91.847 16.3467 91.5803 15.3973 91.047 14.864C90.5137 14.3093 89.6817 14.032 88.551 14.032C87.4417 14.032 86.3857 14.384 85.383 15.088C85.4897 15.6213 85.543 16.1333 85.543 16.624V23.728C85.543 24.112 85.639 24.3787 85.831 24.528C86.023 24.656 86.4923 24.752 87.239 24.816L87.527 26.096L84.391 26L80.935 26.096L80.679 24.816C81.703 24.7307 82.311 24.6453 82.503 24.56C82.7163 24.4533 82.823 24.176 82.823 23.728V17.712C82.823 16.3467 82.5563 15.3867 82.023 14.832C81.511 14.2773 80.743 14 79.719 14C78.695 14 77.6283 14.2987 76.519 14.896V23.728C76.519 24.112 76.615 24.3787 76.807 24.528C76.999 24.656 77.4683 24.752 78.215 24.816L78.503 26.096L75.367 26L71.911 26.096L71.655 24.816C72.679 24.7307 73.287 24.6453 73.479 24.56C73.6923 24.4533 73.799 24.176 73.799 23.728V16.24C73.799 15.472 73.6603 14.9387 73.383 14.64C73.1057 14.3413 72.6683 14.192 72.071 14.192ZM110.658 18.224H101.378V18.64C101.378 20.1973 101.815 21.552 102.69 22.704C103.565 23.8347 104.727 24.4 106.178 24.4C107.629 24.4 108.823 23.9307 109.762 22.992C109.826 22.928 109.879 22.896 109.922 22.896C109.965 22.896 110.018 22.928 110.082 22.992L110.786 23.792C109.186 25.52 107.33 26.384 105.218 26.384C103.127 26.384 101.474 25.7227 100.258 24.4C99.0633 23.0773 98.466 21.3173 98.466 19.12C98.466 16.9013 99.1487 15.1413 100.514 13.84C101.879 12.5173 103.437 11.856 105.186 11.856C106.935 11.856 108.311 12.3893 109.314 13.456C110.317 14.5013 110.818 15.9733 110.818 17.872C110.818 18.1067 110.765 18.224 110.658 18.224ZM107.618 16.72C107.618 14.3733 106.711 13.2 104.898 13.2C103.938 13.2 103.159 13.5413 102.562 14.224C101.965 14.8853 101.602 15.7173 101.474 16.72H107.618Z"
+        fill="white"
+      />
+      <defs>
+        <clipPath id="clip0_137_1487">
+          <rect
+            width="28"
+            height="28"
+            fill="white"
+            transform="translate(0 1)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default LogoIcon;

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',
+              ' 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

@@ -2,23 +2,24 @@ import Image from 'next/image';
 import Link from 'next/link';
 import NavLinks from '@/app/ui/dashboard/nav-links';
 import LogOutButton from './log-out-button';
+import LogoIcon from './logo-icon';
 
 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="mb-2 flex h-20 items-end justify-center rounded-md bg-blue-600 p-4 md:h-40 md:justify-start"
+        href="/"
+      >
+        <span className="h-8">
+          <LogoIcon />
+        </span>
+      </Link>
+      <div className="flex grow flex-row justify-between space-x-2 md:flex-col md:space-x-0 md:space-y-2">
         <NavLinks />
+        <div className="hidden h-auto w-full grow rounded-md bg-gray-50 md:block"></div>
+        <LogOutButton />
       </div>
-      <LogOutButton />
     </div>
   );
 }