tablet navigation: removed code redundancy & fixed alignment (#1241)

* minor design changes to tablet navigation

* added white icon logo

* reduced code redundancy in tablet view & fixed alignment

components/Logo.tsx

@@ -1,13 +1,17 @@
-export default function Logo({ small }: { small?: boolean }) {
+export default function Logo({ small, icon }: { small?: boolean; icon?: boolean }) {
   return (
-    <h1 className="brand-logo inline">
+    <h1 className="inline">
       <strong>
-        <img
-          className={small ? "h-4 w-auto" : "h-5 w-auto"}
-          alt="Cal"
-          title="Cal"
-          src="/calendso-logo-white-word.svg"
-        />
+        {icon ? (
+          <img className="w-9 mx-auto" alt="Cal" title="Cal" src="/cal-com-icon-white.svg" />
+        ) : (
+          <img
+            className={small ? "h-4 w-auto" : "h-5 w-auto"}
+            alt="Cal"
+            title="Cal"
+            src="/calendso-logo-white-word.svg"
+          />
+        )}
       </strong>
     </h1>
   );

components/Shell.tsx

@@ -196,60 +196,22 @@ export default function Shell(props: {
       </div>
 
       <div className="flex h-screen overflow-hidden bg-gray-100">
-        <div className="hidden lg:flex lg:flex-shrink-0">
+        <div className="hidden md:flex lg:flex-shrink-0">
           <div className="flex flex-col w-14 lg:w-56">
             <div className="flex flex-col flex-1 h-0 bg-white border-r border-gray-200">
-              <div className="flex flex-col flex-1 pt-5 pb-4 overflow-y-auto">
+              <div className="flex flex-col flex-1 pt-3 lg:pt-5 pb-4 overflow-y-auto">
                 <Link href="/event-types">
-                  <a className="px-4">
+                  <a className="px-4 md:hidden lg:inline">
                     <Logo small />
                   </a>
                 </Link>
-                <nav className="flex-1 px-2 mt-5 space-y-1 bg-white">
-                  {navigation.map((item) => (
-                    <Link key={item.name} href={item.href}>
-                      <a
-                        className={classNames(
-                          item.current
-                            ? "bg-neutral-100 text-neutral-900"
-                            : "text-neutral-500 hover:bg-gray-50 hover:text-neutral-900",
-                          "group flex items-center px-2 py-2 text-sm font-medium rounded-sm"
-                        )}>
-                        <item.icon
-                          className={classNames(
-                            item.current
-                              ? "text-neutral-500"
-                              : "text-neutral-400 group-hover:text-neutral-500",
-                            "mr-3 flex-shrink-0 h-5 w-5"
-                          )}
-                          aria-hidden="true"
-                        />
-                        {item.name}
-                      </a>
-                    </Link>
-                  ))}
-                </nav>
-              </div>
-              <div className="p-2 pt-2 pr-2 m-2 rounded-sm hover:bg-gray-100">
-                <UserDropdown />
-              </div>
-            </div>
-          </div>
-        </div>
-        <div className="hidden md:flex md:flex-shrink-0 lg:hidden">
-          <div className="flex flex-col w-14 lg:w-56">
-            <div className="flex flex-col flex-1 h-0 bg-white border-r border-gray-200">
-              <div className="flex flex-col flex-1 pb-4 overflow-y-auto">
+                {/* logo icon for tablet */}
                 <Link href="/event-types">
-                  <a className="px-2 my-3">
-                    <h1 className="inline">
-                      <strong>
-                        <img className="w-auto h-9" alt="Cal" title="Cal" src="/cal-com-icon.svg" />
-                      </strong>
-                    </h1>
+                  <a className="md:inline lg:hidden">
+                    <Logo small icon />
                   </a>
                 </Link>
-                <nav className="flex-1 px-2 space-y-1 bg-white">
+                <nav className="flex-1 px-2 mt-2 lg:mt-5 space-y-1 bg-white">
                   {navigation.map((item) => (
                     <Link key={item.name} href={item.href}>
                       <a
@@ -268,13 +230,19 @@ export default function Shell(props: {
                           )}
                           aria-hidden="true"
                         />
+                        <span className="hidden lg:inline">{item.name}</span>
                       </a>
                     </Link>
                   ))}
                 </nav>
               </div>
               <div className="p-2 pt-2 pr-2 m-2 rounded-sm hover:bg-gray-100">
-                <UserDropdown small />
+                <span className="hidden lg:inline">
+                  <UserDropdown />
+                </span>
+                <span className="hidden md:inline lg:hidden">
+                  <UserDropdown small />
+                </span>
               </div>
             </div>
           </div>

public/cal-com-icon-white.svg

@@ -0,0 +1 @@
+<svg width="56" height="56" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.628 36.781c2.846 0 4.946-1.096 6.183-2.59l-2.38-2.03c-.957 1.05-2.147 1.587-3.733 1.587-3.22 0-5.204-2.427-5.204-5.413 0-2.987 1.984-5.46 5.134-5.46 1.47 0 2.683.513 3.663 1.54l2.31-2.007c-1.47-1.75-3.313-2.567-5.973-2.567-5.04 0-8.517 3.803-8.517 8.493 0 4.667 3.663 8.447 8.517 8.447ZM31.69 36.781c2.17 0 3.267-.91 3.92-2.286v1.983h3.057V24.344H35.54v1.914c-.653-1.307-1.75-2.17-3.85-2.17-3.337 0-5.997 2.87-5.997 6.37s2.66 6.323 5.997 6.323Zm-2.847-6.346c0-1.89 1.354-3.5 3.36-3.5 2.077 0 3.407 1.633 3.407 3.523 0 1.89-1.33 3.477-3.407 3.477-2.006 0-3.36-1.657-3.36-3.5ZM41.472 36.478h3.15V19.444h-3.15v17.034Z" fill="#292929"/></svg>