Merge pull request stakwork#385 from Ekep-Obasi/fix/navbar-responsive…

…ness Make the Navigation Header Responsive
AbdulWahab3181 · Mar 12, 2024 · 250ffa3 · 250ffa3
2 parents 2d66ecd + 5468e62
commit 250ffa3
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 2 deletions.
diff --git a/src/people/main/Header.tsx b/src/people/main/Header.tsx
@@ -84,7 +84,13 @@ const Imgg = styled.div<ImageProps>`
 const Tabs = styled.div`
   display: flex;
   margin-left: 20px;
+  justify-content: space-around;
   height: 100%;
+  gap: 50px;
+
+  @media screen and (max-width: 990px) {
+    gap: 25px;
+  }
 `;
 
 const MTabs = styled.div`
@@ -97,7 +103,6 @@ interface TagProps {
 }
 const Tab = styled(Link)<TagProps>`
   display: flex;
-  margin-right: 50px;
   padding: 0 8px;
   color: ${(p: any) => (p.selected ? '#fff' : '#6B7A8D')};
   cursor: pointer;
@@ -454,7 +459,7 @@ function Header() {
             width: '100%'
           }}
         >
-          <Row style={{ height: '100%', marginBottom: '-2px' }}>
+          <Row style={{ height: '100%', marginBottom: '-2px', flex: 2 }}>
             <EuiHeaderSection grow={false}>
               <Img src="/static/people_logo.svg" />
             </EuiHeaderSection>

diff --git a/src/people/main/__tests__/Header.spec.tsx b/src/people/main/__tests__/Header.spec.tsx
@@ -18,6 +18,13 @@ beforeAll(() => {
   mockUsehistory();
 });
 
+const resizeWindowWidth = (x: number) => {
+  window.innerWidth = x;
+  act(() => {
+    window.dispatchEvent(new Event('resize'));
+  });
+};
+
 describe('AboutView Component', () => {
   nock(user.url).get('/person/id/1').reply(200, {});
   nock(user.url).get(`/person/${user.uuid}`).reply(200, {});
@@ -186,4 +193,35 @@ describe('AboutView Component', () => {
       expect(await screen.findByRole('button', { name: /Login with Sphinx/i })).toBeInTheDocument();
     });
   });
+
+  test.each([
+    1440, // Desktop
+    1200,
+    1024,
+    950 // The lower end of desktop viewport
+  ])('tests that username is visible at viewport width %ipx', async (width: number) => {
+    resizeWindowWidth(width); // resize window width
+
+    jest.spyOn(mainStore, 'getIsAdmin').mockReturnValue(Promise.resolve(false));
+    jest.spyOn(mainStore, 'getPersonById').mockReturnValue(Promise.resolve(person));
+    jest.spyOn(mainStore, 'getSelf').mockReturnValue(Promise.resolve());
+
+    uiStore.setMeInfo(user);
+    const history = createMemoryHistory();
+    await act(async () => {
+      render(
+        <Router history={history}>
+          <Header />
+        </Router>
+      );
+
+      const usernameElement = screen.getByText(person.owner_alias);
+      expect(usernameElement).toBeInTheDocument();
+
+      await waitFor(() => {
+        const isVisible = usernameElement.offsetParent === null;
+        expect(isVisible).toBe(true);
+      });
+    });
+  });
 });