refactor: create hook screen type (instead of using plain media queries)

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 }) => ({

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;

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