property-practice-ui 0.4.0 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # property-practice-ui
 
+## 0.4.1
+
+### Patch Changes
+
+- b18d52d: fix issues with responsiveness
+
 ## 0.4.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "property-practice-ui",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "",
   "private": false,
   "type": "module",

package/src/molecules/ContentCard/ContentCard.tsx

@@ -11,7 +11,7 @@ const Container = styled.div`
   gap: 1rem;
   background-color: #ffffff;
   width: 284px;
-  height: 482px;
+  height: 100%;
   padding: 1.5rem;
   border-radius: 8px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

package/src/molecules/SideNav/SideNav.tsx

@@ -231,7 +231,7 @@ export const SideNav = ({
     const isActive = activeItem === item.href;
     return (
       <NavItem key={item.href}>
-        <NavLink href={item.href} $isActive={isActive}>
+        <NavLink href={item.href} $isActive={isActive} onClick={onClose}>
           {isActive ? <ActiveTriangle triangleColor={triangleColor} /> : <InactiveSpacer />}
           <TextButton
             asChild

package/src/organisms/FeatureCarousel/FeatureCarousel.tsx

@@ -17,12 +17,13 @@ const CarouselContainer = styled.div`
 
 const CardsWrapper = styled.div`
   display: flex;
+  align-items: stretch;
   gap: 1.5rem;
   padding: 1rem 0;
   
   /* Desktop: controlled by JS */
   @media (min-width: 768px) {
-    overflow-x: hidden;
+    overflow: hidden;
   }
   
   /* Mobile: native scroll with snap */
@@ -40,6 +41,7 @@ const CardsWrapper = styled.div`
 
 const CardContainer = styled.div<{ $translateX: number }>`
   display: flex;
+  align-items: stretch;
   gap: 1.5rem;
   
   /* Desktop: transform animation */

package/src/organisms/Header/Header.tsx

@@ -1,16 +1,22 @@
+import { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { ExtendedButton, TextButton } from '../../atoms';
 import { colors } from '../../tokens/colors';
 
 type BorderColor = keyof typeof colors.border;
 
-const HeaderContainer = styled.header`
+const HeaderContainer = styled.header<{ $isVisible: boolean }>`
   display: flex;
   justify-content: space-between;
   align-items: center;
   background-color: #ffffff;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   padding: 0 1rem;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  transform: translateY(${props => props.$isVisible ? '0' : '-100%'});
+  transition: transform 0.3s ease-in-out;
 `;
 
 const LogoWrapper = styled.div`
@@ -111,8 +117,27 @@ export const Header = ({
   secondaryBgVariant = 'transparent',
   secondaryTextVariant = 'brand',
 }: HeaderProps) => {
+  const [isVisible, setIsVisible] = useState(true);
+  const lastScrollY = useRef(0);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const currentScrollY = window.scrollY;
+      
+      if (currentScrollY < lastScrollY.current) {
+        setIsVisible(true);   
+      } else {
+        setIsVisible(false);  
+      }
+      
+      lastScrollY.current = currentScrollY;
+    };
+
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
   return (
-    <HeaderContainer>
+    <HeaderContainer $isVisible={isVisible}>
       <LogoWrapper>
         <img src={logo} alt="Logo" />
       </LogoWrapper>