From 09821de424d3d512560ab8837228006c9ea48c61 Mon Sep 17 00:00:00 2001
From: Sonny <sonnyasdev@gmail.com>
Date: Sun, 2 Jun 2024 01:39:31 +0200
Subject: [PATCH] refactor: create hook screen type (instead of using plain
 media queries)

---
 .../collection/header/collection_header.tsx   | 22 +++++++----
 .../hooks/{ => viewport}/use_media_query.tsx  |  0
 inertia/hooks/viewport/use_screen_type.tsx    |  9 +++++
 inertia/pages/dashboard.tsx                   | 39 +++++++------------
 4 files changed, 38 insertions(+), 32 deletions(-)
 rename inertia/hooks/{ => viewport}/use_media_query.tsx (100%)
 create mode 100644 inertia/hooks/viewport/use_screen_type.tsx

diff --git a/inertia/components/dashboard/collection/header/collection_header.tsx b/inertia/components/dashboard/collection/header/collection_header.tsx
index 14494fe..6e37bb5 100644
--- a/inertia/components/dashboard/collection/header/collection_header.tsx
+++ b/inertia/components/dashboard/collection/header/collection_header.tsx
@@ -11,13 +11,17 @@ import useActiveCollection from '~/hooks/use_active_collection';
 const paddingLeft = '1.25em';
 const paddingRight = '1.65em';
 
-const CollectionHeaderWrapper = styled.div<{ padding?: boolean }>(
-  ({ padding }) => ({
-    minWidth: 0,
-    width: '100%',
-    paddingInline: padding ? `${paddingLeft} ${paddingRight}` : 0,
-  })
-);
+const CollectionHeaderWrapper = styled.div(({ theme }) => ({
+  minWidth: 0,
+  width: '100%',
+  paddingInline: `${paddingLeft} ${paddingRight}`,
+  marginBottom: 0,
+
+  [`@media (max-width: ${theme.media.tablet})`]: {
+    paddingInline: 0,
+    marginBottom: '1rem',
+  },
+}));
 
 const CollectionHeaderStyle = styled.div({
   display: 'flex',
@@ -35,6 +39,10 @@ const CollectionName = styled.h2(({ theme }) => ({
   display: 'flex',
   gap: '0.35em',
   alignItems: 'center',
+
+  [`@media (max-width: ${theme.media.tablet})`]: {
+    width: `calc(100% - (${paddingLeft} + ${paddingRight} + 1.75em))`,
+  },
 }));
 
 const LinksCount = styled.div(({ theme }) => ({
diff --git a/inertia/hooks/use_media_query.tsx b/inertia/hooks/viewport/use_media_query.tsx
similarity index 100%
rename from inertia/hooks/use_media_query.tsx
rename to inertia/hooks/viewport/use_media_query.tsx
diff --git a/inertia/hooks/viewport/use_screen_type.tsx b/inertia/hooks/viewport/use_screen_type.tsx
new file mode 100644
index 0000000..7f28c93
--- /dev/null
+++ b/inertia/hooks/viewport/use_screen_type.tsx
@@ -0,0 +1,9 @@
+import { Theme } from '@emotion/react';
+import { useMediaQuery } from '~/hooks/viewport/use_media_query';
+import { media } from '~/styles/media_queries';
+
+type ScreenTypes = keyof Theme['media'];
+const useScreenType = (screen: ScreenTypes) =>
+  useMediaQuery(`(max-width: ${media[screen]})`);
+
+export default useScreenType;
diff --git a/inertia/pages/dashboard.tsx b/inertia/pages/dashboard.tsx
index b65f8f3..6e282a0 100644
--- a/inertia/pages/dashboard.tsx
+++ b/inertia/pages/dashboard.tsx
@@ -1,4 +1,3 @@
-import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { ReactNode, useEffect } from 'react';
 import { CiMenuBurger } from 'react-icons/ci';
@@ -9,8 +8,8 @@ import DashboardProviders from '~/components/dashboard/dashboard_provider';
 import SideNavigation from '~/components/dashboard/side_nav/side_navigation';
 import SwiperHandler from '~/components/dashboard/swiper_handler';
 import DashboardLayout from '~/components/layouts/dashboard_layout';
-import { useMediaQuery } from '~/hooks/use_media_query';
 import useToggle from '~/hooks/use_modal';
+import useScreenType from '~/hooks/viewport/use_screen_type';
 import { rgba } from '~/lib/color';
 import { CollectionWithLinks } from '~/types/app';
 
@@ -55,10 +54,18 @@ const RightSideBar = styled(SideBar)(({ opened }) => ({
   alignItems: 'flex-end',
 }));
 
+const BugerIcon = styled(CiMenuBurger)(({ theme }) => ({
+  cursor: 'pointer',
+  height: '24px',
+  minHeight: 'fit-content',
+  width: '24px',
+  minWidth: 'fit-content',
+  color: theme.colors.primary,
+}));
+
 function DashboardPage(props: Readonly<DashboardPageProps>) {
-  const theme = useTheme();
-  const isMobile = useMediaQuery(`(max-width: ${theme.media.mobile})`);
-  const isTablet = useMediaQuery(`(max-width: ${theme.media.tablet})`);
+  const isMobile = useScreenType('mobile');
+  const isTablet = useScreenType('tablet');
 
   const {
     isShowing: isNavigationOpen,
@@ -118,27 +125,9 @@ function DashboardPage(props: Readonly<DashboardPageProps>) {
         </LeftSideBar>
         <CollectionContainer
           openNavigationItem={
-            <CiMenuBurger
-              size={24}
-              onClick={openNavigation}
-              css={{
-                cursor: 'pointer',
-                marginRight: '1em',
-                color: theme.colors.primary,
-              }}
-            />
-          }
-          openCollectionItem={
-            <CiMenuBurger
-              size={24}
-              onClick={openCollectionList}
-              css={{
-                cursor: 'pointer',
-                marginLeft: '1em',
-                color: theme.colors.primary,
-              }}
-            />
+            <BugerIcon css={{ marginRight: '1em' }} onClick={openNavigation} />
           }
+          openCollectionItem={<BugerIcon onClick={openCollectionList} />}
           showButtons={isMobile || isTablet}
         />
         <RightSideBar