Feat/responsive navbar responsive

apps/web/lib/features/task/task-filters.tsx

@@ -184,8 +184,13 @@ export type I_TaskFilter = ReturnType<typeof useTaskFilter>;
 type Props = { hook: I_TaskFilter; profile: I_UserProfilePage };
 export function TaskFilter({ className, hook, profile }: IClassName & Props) {
 	return (
-		<div className="relative z-10">
-			<div className={clsxm('flex justify-between xs:flex-row flex-col items-center', className)}>
+		<div className="relative w-full z-10">
+			<div
+				className={clsxm(
+					'flex justify-between flex-col xs:flex-row  items-center w-full flex-wrap-reverse md:flex-nowrap',
+					className
+				)}
+			>
 				<TabsNav hook={hook} />
 				<InputFilters profile={profile} hook={hook} />
 			</div>
@@ -200,7 +205,7 @@ export function TaskFilter({ className, hook, profile }: IClassName & Props) {
 				leave="transition duration-75 ease-out"
 				leaveFrom="transform scale-100 opacity-100"
 				leaveTo="transform scale-95 opacity-0 ease-out"
-				// className="pb-3"
+				className="w-full"
 				ref={hook.outclickFilterCard.targetEl}
 			>
 				{/* {hook.filterType !== undefined && <Divider className="mt-4" />} */}
@@ -291,22 +296,23 @@ function InputFilters({ hook, profile }: Props) {
 /* It's a function that returns a nav element. */
 function TabsNav({ hook }: { hook: I_TaskFilter }) {
 	return (
-		<nav className="flex mt-4 space-x-1 md:space-x-4 md:mt-0">
+		<nav className="flex justify-center md:justify-start items-center mt-4 space-x-1 w-full md:space-x-4 md:mt-0">
 			{hook.tabs.map((item, i) => {
 				const active = item.tab === hook.tab;
+
 				return (
-					<Tooltip key={i} placement="top-start" label={item.description}>
+					<Tooltip key={i} placement="top-start" label={item.description} className="">
 						<button
 							onClick={() => hook.setTab(item.tab)}
 							className={clsxm(
-								'md:text-lg text-xs text-gray-500 font-normal outline-none py-[1.5rem] px-[2.5rem] relative mt-4 md:mt-0 min-w-[10.625rem]',
+								`md:text-lg text-xs text-gray-500 font-normal outline-none md:py-[1.5rem] px-[2.5rem] relative mt-4 md:mt-0 w-full md:min-w-[10.625rem] flex flex-col md:flex-row gap-1 items-center `,
 								active && ['text-primary dark:text-white']
 							)}
 						>
 							{item.name}{' '}
 							<span
 								className={clsxm(
-									'bg-gray-lighter p-1 px-2 text-xs rounded-md',
+									'bg-gray-lighter p-1 px-2 text-xs rounded-md m-1',
 									active && ['bg-primary dark:bg-[#47484D] text-white']
 								)}
 							>
@@ -342,28 +348,28 @@ function TaskStatusFilter({ hook }: { hook: I_TaskFilter }) {
 				<TaskStatusDropdown
 					key={key + 1}
 					onValueChange={(_, values) => hook.onChangeStatusFilter('status', values || [])}
-					className="lg:min-w-[170px] mt-4 lg:mt-0"
+					className="lg:min-w-[170px] mt-4 mb-2 lg:mt-0"
 					multiple={true}
 				/>
 
 				<TaskPropertiesDropdown
 					key={key + 2}
 					onValueChange={(_, values) => hook.onChangeStatusFilter('priority', values || [])}
-					className="lg:min-w-[170px] mt-4 lg:mt-0"
+					className="lg:min-w-[170px] mt-4 mb-2 lg:mt-0"
 					multiple={true}
 				/>
 
 				<TaskSizesDropdown
 					key={key + 3}
 					onValueChange={(_, values) => hook.onChangeStatusFilter('size', values || [])}
-					className="lg:min-w-[170px] mt-4 lg:mt-0"
+					className="lg:min-w-[170px] mt-4 mb-2 lg:mt-0"
 					multiple={true}
 				/>
 
 				<TaskLabelsDropdown
 					key={key + 4}
 					onValueChange={(_, values) => hook.onChangeStatusFilter('label', values || [])}
-					className="lg:min-w-[170px] mt-4 lg:mt-0"
+					className="lg:min-w-[170px] mt-4 mb-2 lg:mt-0"
 					multiple={true}
 				/>
 
@@ -428,7 +434,7 @@ export function TaskNameFilter({
 	};
 
 	return (
-		<div className={clsxm('flex flex-row w-1/2 gap-2 mt-3 ml-auto', fullWidth && '!w-full')}>
+		<div className={clsxm('flex flex-row w-full md:w-1/2 gap-2 mt-3 ml-auto', fullWidth && '!w-full')}>
 			<InputField
 				value={tempValue}
 				autoFocus={true}

apps/web/lib/features/timer/timer.tsx

@@ -58,7 +58,7 @@ export function Timer({ className }: IClassName) {
 	useHotkeys(HostKeys.START_STOP_TIMER, handleStartSTOPTimer);
 
 	return (
-		<div className={clsxm('flex flex-row mb-12 2xl:mb-0', className)}>
+		<div className={clsxm('flex flex-row mb-6 md:mb-12 2xl:mb-0', className)}>
 			<div className="flex items-start justify-between border-r-[2px] dark:border-r-[#28292F] pr-5">
 				<div className="w-[11rem]">
 					<Text.Heading

apps/web/lib/features/user-nav-menu.tsx

@@ -26,6 +26,10 @@ import stc from 'string-to-color';
 import gauzyDark from '../../public/assets/themeImages/gauzyDark.png';
 import gauzyLight from '../../public/assets/themeImages/gauzyLight.png';
 import { TimerStatus, getTimerStatusValue } from './timer/timer-status';
+import Collaborate from '@components/shared/collaborate';
+import { TeamsDropDown } from './team/teams-dropdown';
+import { KeyboardShortcuts } from 'lib/components/keyboard-shortcuts';
+import { useRouter } from 'next/router';
 
 export function UserNavAvatar() {
 	const { user } = useAuthenticateUser();
@@ -125,13 +129,20 @@ function UserNavMenu() {
 	const imageUrl = user?.image?.thumbUrl || user?.image?.fullUrl || user?.imageUrl;
 	const name = user?.name || user?.firstName || user?.lastName || user?.username;
 	const { timerStatus } = useTimer();
-	const { activeTeam } = useOrganizationTeams();
+	const { activeTeam, isTeamMember } = useOrganizationTeams();
 	const publicTeam = useRecoilValue(publicState);
 	const members = activeTeam?.members || [];
 	const currentMember = members.find((m) => {
 		return m.employee.userId === user?.id;
 	});
 
+	const router = useRouter();
+
+	const isTeamDropdownAllowed = useMemo(() => {
+		const notAllowedList = ['/task/[id]', '/profile/[memberId]'];
+		return !notAllowedList.includes(router.route);
+	}, [router.route]);
+
 	const timerStatusValue: ITimerStatusEnum = useMemo(() => {
 		return getTimerStatusValue(timerStatus, currentMember, publicTeam);
 	}, [timerStatus, currentMember, publicTeam]);
@@ -258,6 +269,14 @@ function UserNavMenu() {
 					</li>
 				</ul>
 				<Divider className="mt-4 mb-3" />
+				<ul className="md:hidden flex flex-col gap-2 justify-start items-center">
+					{!publicTeam && <Collaborate />}
+
+					{isTeamMember && isTeamDropdownAllowed ? <TeamsDropDown publicTeam={publicTeam || false} /> : null}
+
+					<KeyboardShortcuts />
+					<Divider className="mt-1 mb-3 w-full" />
+				</ul>
 				<ul className="w-full">
 					{/* Logout menu */}
 					<li>

apps/web/lib/layout/navbar.tsx

@@ -81,14 +81,15 @@ export function Navbar({
 									)}
 									{showTimer && <MinTimerFrame />}
 
-									{!publicTeam && <Collaborate />}
+									<div className="hidden md:flex gap-4 items-center">
+										{!publicTeam && <Collaborate />}
 
-									{isTeamMember && isTeamDropdownAllowed ? (
-										<TeamsDropDown publicTeam={publicTeam || false} />
-									) : null}
-
-									<KeyboardShortcuts />
+										{isTeamMember && isTeamDropdownAllowed ? (
+											<TeamsDropDown publicTeam={publicTeam || false} />
+										) : null}
 
+										<KeyboardShortcuts />
+									</div>
 									{!publicTeam && <UserNavAvatar />}
 								</div>
 							)}

apps/web/pages/index.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { useOrganizationTeams } from '@app/hooks';
 import { clsxm } from '@app/utils';
 import NoTeam from '@components/pages/main/no-team';
@@ -18,9 +19,9 @@
 import { useState } from 'react';
 import { IssuesView } from '@app/constants';
 import { TableCellsIcon, QueueListIcon, Squares2X2Icon } from '@heroicons/react/24/solid';
 import { useNetworkState } from '@uidotdev/usehooks';
 import { useRouter } from 'next/router';
 import KanbanIcon from '@components/ui/svgs/kanaban';
 import Offline from '@components/pages/offline';
 import UserTeamTableHeader from 'lib/features/team/user-team-table/user-team-table-header';
 
@@ -47,58 +48,46 @@
 
 					{/* <Collaborative /> */}
 					<div className="flex items-end gap-1">
-						<Tooltip
-							label={'Cards'}
-							placement="top-start"
-						>
-						<button
-							className={clsxm(
-								'rounded-md px-3 py-1 text-sm font-medium',
-								view === IssuesView.CARDS
-									? 'bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100'
-									: 'text-gray-700 dark:text-gray-300'
-							)}
-							onClick={() => setView(IssuesView.CARDS)}
-						>
-							<QueueListIcon className="w-5 h-5 inline" />
-						</button>
+						<Tooltip label={'Cards'} placement="top-start">
+							<button
+								className={clsxm(
+									'rounded-md px-3 py-1 text-sm font-medium',
+									view === IssuesView.CARDS
+										? 'bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100'
+										: 'text-gray-700 dark:text-gray-300'
+								)}
+								onClick={() => setView(IssuesView.CARDS)}
+							>
+								<QueueListIcon className="w-5 h-5 inline" />
+							</button>
 						</Tooltip>
-						<Tooltip
-							label={'Table'}
-							placement="top-start"
-						>
-						<button
-							className={clsxm(
-								'rounded-md px-3 py-1 text-sm font-medium',
-								view === IssuesView.TABLE
-									? 'bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100'
-									: 'text-gray-700 dark:text-gray-300'
-							)}
-							onClick={() => setView(IssuesView.TABLE)}
-						>
-							<TableCellsIcon className="w-5 h-5 inline" />
-						</button>
+						<Tooltip label={'Table'} placement="top-start">
+							<button
+								className={clsxm(
+									'rounded-md px-3 py-1 text-sm font-medium',
+									view === IssuesView.TABLE
+										? 'bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100'
+										: 'text-gray-700 dark:text-gray-300'
+								)}
+								onClick={() => setView(IssuesView.TABLE)}
+							>
+								<TableCellsIcon className="w-5 h-5 inline" />
+							</button>
 						</Tooltip>
-						<Tooltip
-							label={'Blocks'}
-							placement="top-start"
-						>
-						<button
-							className={clsxm(
-								'rounded-md px-3 py-1 text-sm font-medium',
-								view === IssuesView.BLOCKS
-									? 'bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100'
-									: 'text-gray-700 dark:text-gray-300'
-							)}
-							onClick={() => setView(IssuesView.BLOCKS)}
-						>
-							<Squares2X2Icon className="w-5 h-5 inline" />
-						</button>
+						<Tooltip label={'Blocks'} placement="top-start">
+							<button
+								className={clsxm(
+									'rounded-md px-3 py-1 text-sm font-medium',
+									view === IssuesView.BLOCKS
+										? 'bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100'
+										: 'text-gray-700 dark:text-gray-300'
+								)}
+								onClick={() => setView(IssuesView.BLOCKS)}
+							>
+								<Squares2X2Icon className="w-5 h-5 inline" />
+							</button>
 						</Tooltip>
-						<Tooltip
-							label={'Kanban'}
-							placement="top-start"
-						>
+						<Tooltip label={'Kanban'} placement="top-start">
 							<button
 								className={clsxm(
 									'rounded-md px-3 py-1 text-sm font-medium',
@@ -147,6 +136,7 @@
 }
 
 function TaskTimerSection({ isTrackingEnabled }: { isTrackingEnabled: boolean }) {
+	const [showInput, setShowInput] = React.useState(false);
 	return (
 		<Card
 			shadow="bigger"
@@ -156,8 +146,13 @@
 			)}
 		>
 			{/* Task inputs */}
-			<AuthUserTaskInput className="w-4/5 md:w-1/2 2xl:w-full " />
+			{/* {showInput && ( */}
+			<AuthUserTaskInput className={clsxm('w-4/5 md:w-1/2 2xl:w-full ', !showInput && '!hidden md:!flex')} />
+			{/* )}  */}
 
+			<button className="border rounded py-1 px-2 md:hidden" onClick={() => setShowInput((p) => !p)}>
+				{showInput ? 'hide the issue input' : 'show the issue input'}
+			</button>
 			{/* Timer  */}
 			{isTrackingEnabled ? <Timer /> : null}
 		</Card>

apps/web/pages/profile/[memberId].tsx

@@ -43,7 +43,7 @@ const Profile = () => {
 					</div>
 
 					{/* User Profile Detail */}
-					<div className="flex flex-col items-center justify-between py-10 xs:flex-row">
+					<div className="flex flex-col items-center justify-between py-5 md:py-10 md:flex-row">
 						<UserProfileDetail member={profile.member} />
 
 						{profileIsAuthUser && isTrackingEnabled && (
@@ -86,7 +86,7 @@ function UserProfileDetail({ member }: { member?: OT_Member }) {
 		<div className="flex items-center mb-4 space-x-4 md:mb-0">
 			<div
 				className={clsx(
-					`w-[100px] h-[100px]`, // removed the size variable from width and height, as passing variables is not supported by tailwind
+					` w-[100px] h-[100px]`, // removed the size variable from width and height, as passing variables is not supported by tailwind
 					'flex justify-center items-center relative',
 					'rounded-full text-white',
 					'shadow-md text-7xl dark:text-6xl font-thin font-PlusJakartaSans ',
@@ -123,7 +123,7 @@ function UserProfileDetail({ member }: { member?: OT_Member }) {
 			</div>
 
 			<div className="flex flex-col gap-3.5">
-				<Text.Heading as="h3" className="text-4xl">
+				<Text.Heading as="h3" className="text-2xl md:text-4xl">
 					{user?.firstName} {user?.lastName}
 				</Text.Heading>
 				<Text className="text-lg text-gray-500">{user?.email}</Text>