fix: active tab bar line (#3614)

dailydotdev · Oct 2, 2024 · d7d2c55 · d7d2c55
1 parent eadf50c
commit d7d2c55
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 39 deletions.
diff --git a/packages/shared/src/components/squads/layout/SquadDirectoryLayout.tsx b/packages/shared/src/components/squads/layout/SquadDirectoryLayout.tsx
@@ -69,46 +69,45 @@ export const SquadDirectoryLayout = (
 
   const isDiscover = pathname === squadCategoriesPaths.discover;
 
+  if (!loadedSettings) {
+    return null;
+  }
+
   return (
-    loadedSettings && (
-      <BaseFeedPage className="relative mb-4 flex-col px-4 pt-4 laptop:px-18 laptop:pt-8">
-        {isDiscover && (
-          <div className="absolute inset-0 -z-1 hidden h-[25rem] w-full bg-gradient-to-t from-accent-cabbage-default to-background-default tablet:flex" />
-        )}
+    <BaseFeedPage className="relative mb-4 flex-col px-4 pt-4 laptop:px-18 laptop:pt-8">
+      {isDiscover && (
+        <div className="absolute inset-0 -z-1 hidden h-[25rem] w-full bg-gradient-to-t from-accent-cabbage-default to-background-default tablet:flex" />
+      )}
 
-        <header className="flex w-full flex-col gap-2">
-          <section className="flex w-full flex-row items-center justify-between typo-body laptop:hidden">
-            <strong>Squads</strong>
-            <NewSquadButton
-              icon={<PlusIcon />}
-              variant={ButtonVariant.Primary}
-            />
-          </section>
-          <div className="flex max-w-full flex-row flex-nowrap items-center justify-between gap-6 laptop:gap-22">
-            <SquadDirectoryNavbar className="min-h-14 min-w-0 flex-1">
-              {Object.entries(categoryPaths ?? {}).map(([category, path]) => (
-                <SquadDirectoryNavbarItem
-                  buttonSize={buttonSize}
-                  elementProps={{ id: `squad-item-${category}-${id}` }}
-                  isActive={path === pathname || path === asPath}
-                  key={category}
-                  label={category}
-                  path={path}
-                />
-              ))}
-            </SquadDirectoryNavbar>
-            <div className="hidden laptop:block">
-              <NewSquadButton />
-            </div>
-          </div>
-        </header>
-        <section
-          {...attrs}
-          className={classNames('flex w-full flex-col pt-5', className)}
-        >
-          {children}
+      <header className="flex w-full flex-col gap-2">
+        <section className="flex w-full flex-row items-center justify-between typo-body laptop:hidden">
+          <strong>Squads</strong>
+          <NewSquadButton icon={<PlusIcon />} variant={ButtonVariant.Primary} />
         </section>
-      </BaseFeedPage>
-    )
+        <div className="flex max-w-full flex-row flex-nowrap items-center justify-between gap-6 laptop:gap-22">
+          <SquadDirectoryNavbar className="min-h-14 min-w-0 flex-1">
+            {Object.entries(categoryPaths ?? {}).map(([category, path]) => (
+              <SquadDirectoryNavbarItem
+                buttonSize={buttonSize}
+                elementProps={{ id: `squad-item-${category}-${id}` }}
+                isActive={path === pathname || path === asPath}
+                key={category}
+                label={category}
+                path={path}
+              />
+            ))}
+          </SquadDirectoryNavbar>
+          <div className="hidden laptop:block">
+            <NewSquadButton />
+          </div>
+        </div>
+      </header>
+      <section
+        {...attrs}
+        className={classNames('flex w-full flex-col pt-5', className)}
+      >
+        {children}
+      </section>
+    </BaseFeedPage>
   );
 };
diff --git a/packages/shared/src/components/squads/layout/SquadDirectoryNavbarItem.tsx b/packages/shared/src/components/squads/layout/SquadDirectoryNavbarItem.tsx
@@ -31,7 +31,7 @@ export function SquadDirectoryNavbarItem({
       {...elementProps}
       className={classNames(
         'relative py-3',
-        'after:absolute after:bottom-0 after:left-0 after:right-0 after:mx-auto after:w-14 after:border-b-2',
+        'after:absolute after:bottom-0 after:left-0 after:right-0 after:mx-auto after:w-1/2 after:border-b-2',
         { 'after:hidden': !isActive },
         elementProps?.className,
       )}

diff --git a/packages/webapp/pages/squads/discover/my.tsx b/packages/webapp/pages/squads/discover/my.tsx
@@ -2,13 +2,21 @@ import React, { ReactElement } from 'react';
 import { NextSeo } from 'next-seo';
 import { useAuthContext } from '@dailydotdev/shared/src/contexts/AuthContext';
 import { SquadList } from '@dailydotdev/shared/src/components/cards/squad/SquadList';
+import { useRouter } from 'next/router';
+import { squadCategoriesPaths } from '@dailydotdev/shared/src/lib/constants';
 import { getLayout } from '../../../components/layouts/FeedLayout';
 import { mainFeedLayoutProps } from '../../../components/layouts/MainFeedPage';
 import { SquadDirectoryLayout } from '../../../../shared/src/components/squads/layout/SquadDirectoryLayout';
 import { defaultSeo } from '../../../next-seo';
 
 function MySquadsPage(): ReactElement {
   const { squads } = useAuthContext();
+  const router = useRouter();
+
+  if (squads?.length === 0) {
+    router.push(squadCategoriesPaths.discover);
+    return null;
+  }
 
   return (
     <SquadDirectoryLayout className="gap-3">