test: breakpoints

TobiTRy · Dec 11, 2023 · 7c26202 · 7c26202
1 parent 11af2bf
commit 7c26202
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 11 deletions.
diff --git a/src/Routes/ExperimentalRoute/ExperimentalRoute.tsx b/src/Routes/ExperimentalRoute/ExperimentalRoute.tsx
@@ -18,6 +18,7 @@ import { SingleToastMessage } from '@/components/molecules/SingleToastMessage';
 import { FancyCard } from '@/components/atoms/FancyCard';
 import { FancyChip } from '@/components/organisms/FancyChip';
 import { FancyNumberInput } from '@/components/organisms/FancyNumberInput';
+import Pill from '@/components/atoms/Pill/Pill';
 
 const Icon = (
   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
@@ -62,6 +63,7 @@ export default function ExperimentalRoute() {
 
   return (
     <DesignWrapper>
+      <Pill>Mooin</Pill>
       <DesignArea title="Test">
         <FancyNumberInput />
 

diff --git a/src/Routes/HeaderRoute/HeaderRoute.tsx b/src/Routes/HeaderRoute/HeaderRoute.tsx
@@ -18,6 +18,7 @@ import { FancyGrid } from '@/components/templates/FancyGrid';
 import { FancyMenu } from '@/components/templates/FancyMenueComponent/FancyMenu';
 import { FancyPopover } from '@/components/shared/FancyPopover';
 import { FancyFlexBox } from '@/components/templates/FancyFlexBox';
+import { breakPointStyle } from '@/Routes/HeaderRoute/breakPointStyle';
 
 const Logo = () => (
   <svg
@@ -73,21 +74,32 @@ const HeaderContent = () => {
 export default function HeaderRoute() {
   const [isOpen, setIsOpen] = useState(false);
 
+  console.log(breakPointStyle);
+
   return (
     <section>
       <FancyFlexBox className="hii"></FancyFlexBox>
       <FancyHeader externalStyle={{ height: '44px', padding: '0 12px' }}>
         <FancyGrid grid={8} gap="12px">
-          <FancyGrid.Item gridSpace={2}>
-            <FancyGrid.Item.FlexBox flexAlign="center" flexJustify="flex-start" className={'mooiiin'}>
-              <FancyHeader.Logo>
-                <FancyHeader.Logo.Icon>
+          <FancyGrid.Item gridSpace={1}>
+            <FancyGrid.Item.FlexBox
+              flexAlign="center"
+              flexJustify="flex-start"
+              className={'mooiiin'}
+              externalStyle={breakPointStyle}
+            >
+              <FancyHeader.Logo className="logo">
+                <FancyHeader.Logo.Icon className="logo_icon">
                   <Logo></Logo>
                 </FancyHeader.Logo.Icon>
-                <FancyHeader.Logo.Title type="h3">Mooiin</FancyHeader.Logo.Title>
+
+                <FancyHeader.Logo.Title type="h3" className="logo_text">
+                  Mooiin
+                </FancyHeader.Logo.Title>
               </FancyHeader.Logo>
             </FancyGrid.Item.FlexBox>
           </FancyGrid.Item>
+
           <FancyGrid.Item gridSpace={4}>
             <FancyGrid.Item.FlexBox flexAlign="center" flexJustify="center">
               <FancyHeader.Nav>
@@ -113,8 +125,8 @@ export default function HeaderRoute() {
                 refComponent={
                   <FancyMiniProfile
                     size={'sm'}
+                    headingText="mooin"
                     alignText="left"
-                    headingText="@TobiTRy"
                     src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg"
                   />
                 }

diff --git a/src/Routes/HeaderRoute/breakPointStyle.ts b/src/Routes/HeaderRoute/breakPointStyle.ts
@@ -0,0 +1,18 @@
+import { TTheme } from '@/interface/TTheme';
+import { css } from 'styled-components';
+
+export const breakPointStyle = css<{ theme: TTheme }>`
+  .logo {
+    &_text {
+      display: none;
+    }
+  }
+
+  @media ${({ theme }) => theme.breakpoints.md} {
+    .logo {
+      &_text {
+        display: flex;
+      }
+    }
+  }
+`;
diff --git a/src/components/templates/FancyGrid/FancyGridItem/FancyGridItem.tsx b/src/components/templates/FancyGrid/FancyGridItem/FancyGridItem.tsx
@@ -42,7 +42,7 @@ const GridItem = styled.div<TGirdItemProps & { as: React.ElementType }>`
     $breakpoints &&
     $breakpoints.map(
       (breakpoint) => css`
-        @media (min-width: ${breakpoint.breakpoint}) {
+        @media (${breakpoint.breakpoint}) {
           grid-column: span ${breakpoint.gridSize};
         }
       `

diff --git a/src/design/theme/brakePoints.ts b/src/design/theme/brakePoints.ts
@@ -1,6 +1,6 @@
 export const breakpoints = {
-  sm: 'screen and (max-width: 576px)',
-  md: 'screen and (max-width: 768px)',
-  lg: 'screen and (max-width: 992px)',
-  xl: 'screen and (max-width: 1200px)',
+  sm: 'screen and (min-width: 576px)',
+  md: 'screen and (min-width: 768px)',
+  lg: 'screen and (min-width: 992px)',
+  xl: 'screen and (min-width: 1200px)',
 };