header responsive

components/Dashboard/Header.tsx

@@ -16,6 +16,7 @@ import {
   FaMicrophoneAltSlash,
   FaVolumeMute,
   FaLayerGroup,
+  FaUser,
 } from "react-icons/fa";
 import { useTeamDashboardContext } from "../../contexts/teamDashboardContext";
 import router from "next/router";
@@ -155,10 +156,22 @@ export default function Header() {
   );
   const UserMenu = (
     <Menu title="user menu">
-      <Menu.Item key={2} onClick={() => router.push("/teams/profile")}>
+      <Menu.Item
+        key={2}
+        onClick={() => router.push("/teams/profile")}
+        icon={<FaUser />}
+      >
         <button>Profile</button>
       </Menu.Item>
 
+      <Menu.Item
+        onClick={() => window.open("/teams", "_self")}
+        key={"team hub"}
+        icon={<FaLayerGroup />}
+      >
+        <button>Team Hub</button>
+      </Menu.Item>
+
       <Menu.Divider />
 
       <Menu.Item danger key={3} onClick={handleSignOut}>
@@ -300,10 +313,10 @@ export default function Header() {
       </span>
 
       {/* header control section */}
-      <span className="flex flex-row items-center space-x-5">
+      <span className="flex-row items-center space-x-5 hidden md:flex ml-auto">
         {/* search bar */}
 
-        <FaBell className="text-lg text-gray-200 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer" />
+        <FaBell className=" shrink-0 text-lg text-gray-200 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer" />
 
         {renderAudioOutput()}
 
@@ -319,20 +332,20 @@ export default function Header() {
             {team.name} <FaAngleDown />
           </button>
         </Dropdown>
-
-        {/* avatar */}
-        <Dropdown overlay={UserMenu} trigger={["click"]}>
-          <span className="relative flex hover:cursor-pointer">
-            <span className="bg-gray-200 bg-opacity-30 rounded-full shadow-md absolute w-full h-full"></span>
-            <UserStatusBubble status={user.userStatus} />
-            <img
-              src={user.avatarUrl}
-              alt="asdf"
-              className="rounded-full w-12"
-            />
-          </span>
-        </Dropdown>
       </span>
+
+      {/* avatar */}
+      <Dropdown
+        overlay={UserMenu}
+        trigger={["click"]}
+        className="ml-2 shrink-0"
+      >
+        <span className="relative flex hover:cursor-pointer">
+          <span className="bg-gray-200 bg-opacity-30 rounded-full shadow-md absolute w-full h-full"></span>
+          <UserStatusBubble status={user.userStatus} />
+          <img src={user.avatarUrl} alt="asdf" className="rounded-full w-12" />
+        </span>
+      </Dropdown>
     </section>
   );
 }

pages/teams/index.tsx

@@ -137,7 +137,7 @@ function RouteHandler() {
                     {team.name}
                   </span>
                   <Tooltip title={"Number of pro spots purchased"}>
-                    <span className="bg-teal-600 bg-opacity-50 text-xs rounded-full w-5 h-5 flex items-center justify-evenly text-white ">
+                    <span className="bg-teal-600 bg-opacity-50 text-xs rounded-full w-5 h-5 flex items-center justify-evenly text-white shrink-0">
                       {team.allowedUserCount || 2}
                     </span>
                   </Tooltip>
@@ -146,7 +146,7 @@ function RouteHandler() {
                 {team.companySite && (
                   <span
                     onClick={() => window.open(team.companySite, "_blank")}
-                    className="text-xs hover:cursor-pointer font-semibold text-teal-600 p-1 bg-teal-500 bg-opacity-20 rounded"
+                    className="text-xs hover:cursor-pointer font-semibold text-gray-500"
                   >
                     {team.companySite}
                   </span>