Responsive Topbar (#944)

maffin-io · Jun 11, 2024 · 84562ab · 84562ab
1 parent e3c831a
commit 84562ab
Show file tree

Hide file tree

Showing 7 changed files with 102 additions and 68 deletions.
diff --git a/src/__tests__/app/layout.test.tsx b/src/__tests__/app/layout.test.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import Layout from '@/app/layout';
+import RootLayout from '@/layout/RootLayout';
+
+jest.mock('@/layout/RootLayout', () => jest.fn(
+  (props: React.PropsWithChildren) => (
+    <div data-testid="RootLayout">
+      {props.children}
+    </div>
+  ),
+));
+
+describe('Layout', () => {
+  it('renders as expected', async () => {
+    render(
+      <Layout>
+        <span>child</span>
+      </Layout>,
+    );
+
+    await screen.findByText('child');
+    expect(RootLayout).toHaveBeenCalled();
+  });
+});
diff --git a/src/__tests__/components/__snapshots__/ProfileDropdown.test.tsx.snap b/src/__tests__/components/__snapshots__/ProfileDropdown.test.tsx.snap
@@ -3,13 +3,15 @@
 exports[`ProfileDropdown renders with empty user 1`] = `
 <div>
   <div
-    class="group relative h-full bg-light-100/60 hover:bg-light-100 dark:bg-dark-800/50 dark:hover:bg-dark-800"
+    class="group relative h-full px-3 hover:bg-light-100 dark:hover:bg-dark-800"
   >
     <button
-      class="flex h-full w-full pl-3 pr-4 items-center"
+      class="flex h-full w-full items-center"
       type="button"
     >
-      <div>
+      <div
+        class="hidden md:inline-block"
+      >
         <p
           class="fontsemibold capitalize"
         >
@@ -21,7 +23,7 @@ exports[`ProfileDropdown renders with empty user 1`] = `
       </div>
     </button>
     <ul
-      class="absolute rounded-md w-40 hidden py-1 group-hover:block bg-white dark:bg-dark-700 "
+      class="absolute right-0 md:left-0 rounded-md w-40 hidden py-1 group-hover:inline-block bg-white dark:bg-dark-700 "
     >
       <li
         class="text-sm hover:bg-light-100 dark:hover:bg-dark-800"
@@ -79,15 +81,15 @@ exports[`ProfileDropdown renders with empty user 1`] = `
 exports[`ProfileDropdown renders with user 1`] = `
 <div>
   <div
-    class="group relative h-full bg-light-100/60 hover:bg-light-100 dark:bg-dark-800/50 dark:hover:bg-dark-800"
+    class="group relative h-full px-3 hover:bg-light-100 dark:hover:bg-dark-800"
   >
     <button
-      class="flex h-full w-full pl-3 pr-4 items-center"
+      class="flex h-full w-full items-center"
       type="button"
     >
       <img
         alt="user"
-        class="rounded-full mx-2 w-8 h-8"
+        class="rounded-full md:mr-2 w-8 h-8"
         data-nimg="1"
         decoding="async"
         height="24"
@@ -98,7 +100,9 @@ exports[`ProfileDropdown renders with user 1`] = `
         style="color: transparent;"
         width="24"
       />
-      <div>
+      <div
+        class="hidden md:inline-block"
+      >
         <p
           class="fontsemibold capitalize"
         >
@@ -112,7 +116,7 @@ exports[`ProfileDropdown renders with user 1`] = `
       </div>
     </button>
     <ul
-      class="absolute rounded-md w-40 hidden py-1 group-hover:block bg-white dark:bg-dark-700 "
+      class="absolute right-0 md:left-0 rounded-md w-40 hidden py-1 group-hover:inline-block bg-white dark:bg-dark-700 "
     >
       <li
         class="text-sm hover:bg-light-100 dark:hover:bg-dark-800"

diff --git a/src/__tests__/layout/__snapshots__/Topbar.test.tsx.snap b/src/__tests__/layout/__snapshots__/Topbar.test.tsx.snap
@@ -3,42 +3,42 @@
 exports[`Topbar renders as expected 1`] = `
 <div>
   <div
-    class="grid grid-cols-12 bg-white dark:bg-dark-700 shadow-sm h-20 fixed z-10 top-0 px-6 left-20 right-0"
+    class="flex justify-end lg:justify-between items-center bg-white dark:bg-dark-700 shadow-sm h-20 fixed z-10 top-0 pl-6 left-20 right-0"
   >
     <div
-      class="col-span-3"
+      class="hidden lg:inline-block lg:w-1/4"
     >
       <div
         data-testid="accountSelector"
       />
     </div>
     <div
-      class="col-span-9"
+      class="flex h-full gap-x-4 items-center"
     >
-      <div
-        class="flex h-full items-center justify-end"
+      <span
+        class="hidden lg:inline-block"
       >
-        <span
-          class="mr-3"
-        >
-          <div
-            data-testid="DateRangeInput"
-          />
-        </span>
         <div
-          class="px-2"
-        >
-          <div
-            data-testid="SaveButton"
-          />
-        </div>
+          data-testid="DateRangeInput"
+        />
+      </span>
+      <span
+        class="hidden lg:inline-block"
+      >
         <div
-          class="px-2"
-        >
-          <div
-            data-testid="ThemeButton"
-          />
-        </div>
+          data-testid="SaveButton"
+        />
+      </span>
+      <div
+        class="hidden lg:inline-block"
+      >
+        <div
+          data-testid="ThemeButton"
+        />
+      </div>
+      <div
+        class="h-full justify-self-end"
+      >
         <div
           data-testid="ProfileDropdown"
         />

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
+import type { Metadata, Viewport } from 'next';
+
 import RootLayout from '@/layout/RootLayout';
 
-export const metadata = {
+export const metadata: Metadata = {
   title: {
     template: '%s | Maffin',
     default: 'Maffin',
@@ -28,6 +30,10 @@ export const metadata = {
   },
 };
 
+export const viewport: Viewport = {
+  initialScale: 1.0,
+};
+
 export default function Layout({
   children,
 }: React.PropsWithChildren): JSX.Element {

diff --git a/src/components/ProfileDropdown.tsx b/src/components/ProfileDropdown.tsx
@@ -11,24 +11,26 @@ export default function ProfileDropdown(): JSX.Element {
   const { user } = useSession();
 
   return (
-    <div className="group relative h-full bg-light-100/60 hover:bg-light-100 dark:bg-dark-800/50 dark:hover:bg-dark-800">
+    <div
+      className="group relative h-full px-3 hover:bg-light-100 dark:hover:bg-dark-800"
+    >
       <button
         type="button"
-        className="flex h-full w-full pl-3 pr-4 items-center"
+        className="flex h-full w-full items-center"
       >
         {
           user && user.picture && (
             <Image
-              src={user.picture}
+              src={user.picture as string}
               width={24}
               height={24}
               referrerPolicy="no-referrer"
-              className="rounded-full mx-2 w-8 h-8"
+              className="rounded-full md:mr-2 w-8 h-8"
               alt="user"
             />
           )
         }
-        <div>
+        <div className="hidden md:inline-block">
           <p className="fontsemibold capitalize">
             {user?.name || '...'}
           </p>
@@ -37,7 +39,8 @@ export default function ProfileDropdown(): JSX.Element {
           </p>
         </div>
       </button>
-      <ul className="absolute rounded-md w-40 hidden py-1 group-hover:block bg-white dark:bg-dark-700 ">
+
+      <ul className="absolute right-0 md:left-0 rounded-md w-40 hidden py-1 group-hover:inline-block bg-white dark:bg-dark-700 ">
         <li className="text-sm hover:bg-light-100 dark:hover:bg-dark-800">
           <ImportButton
             className="text-left px-3 py-2 w-full text-cyan-700 hover:text-cyan-600 whitespace-nowrap"

diff --git a/src/layout/Topbar.tsx b/src/layout/Topbar.tsx
@@ -14,8 +14,8 @@ export default function Topbar(): JSX.Element {
   const router = useRouter();
 
   return (
-    <div className="grid grid-cols-12 bg-white dark:bg-dark-700 shadow-sm h-20 fixed z-10 top-0 px-6 left-20 right-0">
-      <div className="col-span-3">
+    <div className="flex justify-end lg:justify-between items-center bg-white dark:bg-dark-700 shadow-sm h-20 fixed z-10 top-0 pl-6 left-20 right-0">
+      <div className="hidden lg:inline-block lg:w-1/4">
         <AccountSelector
           id="globalSearch"
           className="py-5 pl-1"
@@ -29,18 +29,17 @@ export default function Topbar(): JSX.Element {
         />
       </div>
 
-      <div className="col-span-9">
-        <div className="flex h-full items-center justify-end">
-
-          <span className="mr-3">
-            <DateRangeInput />
-          </span>
-          <div className="px-2">
-            <SaveButton />
-          </div>
-          <div className="px-2">
-            <ThemeButton />
-          </div>
+      <div className="flex h-full gap-x-4 items-center">
+        <span className="hidden lg:inline-block">
+          <DateRangeInput />
+        </span>
+        <span className="hidden lg:inline-block">
+          <SaveButton />
+        </span>
+        <div className="hidden lg:inline-block">
+          <ThemeButton />
+        </div>
+        <div className="h-full justify-self-end">
           <ProfileDropdown />
         </div>
       </div>

diff --git a/tailwind.config.js → tailwind.config.ts b/tailwind.config.js → tailwind.config.ts
@@ -1,14 +1,12 @@
 import defaultTheme from 'tailwindcss/defaultTheme';
+import type { Config } from 'tailwindcss';
 
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  darkMode: 'class',
+const config = {
+  darkMode: ["class"],
   content: [
     './src/**/*.{js,ts,jsx,tsx,mdx}',
     './node_modules/react-tailwindcss-datepicker/dist/index.esm.js',
-  ],
-  // Tailwind optimises which classes are brought in. This breaks
-  // dynamic behavior in some cases.
+	],
   safelist: [
     // We use dynamic cols for TransactionForm when showing exchange rate
     'visible',
@@ -20,14 +18,12 @@ module.exports = {
       pattern: /pl-.*/,
     },
   ],
+  prefix: "",
   theme: {
+    fontFamily: {
+      sans: ['InterVariable', ...defaultTheme.fontFamily.sans],
+    },
     extend: {
-      fontFamily: {
-        sans: ['InterVariable', ...defaultTheme.fontFamily.sans],
-      },
-      gridTemplateColumns: {
-        '13': 'repeat(13, minmax(0, 1fr))'
-      },
       colors: {
         dark: {
           50: '#f3f4f5',
@@ -56,6 +52,6 @@ module.exports = {
       },
     },
   },
-  plugins: [],
-}
+} satisfies Config
 
+export default config