Merge pull request #320 from EscolaLMS/feature/mobile-dropdown-catego…

…ries dropdown categories mobile
EscolaLMS · Feb 22, 2024 · c267868 · c267868
2 parents df46cc7 + 46ae7e2
commit c267868
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 20 deletions.
diff --git a/src/components/molecules/DropdownCategories/DropdownCategories.tsx b/src/components/molecules/DropdownCategories/DropdownCategories.tsx
@@ -14,30 +14,34 @@ interface Props {
   onClick?: () => void;
   onClear?: () => void;
   child?: React.ReactElement<{ onClick?: () => void; $isMenuOpen?: boolean }>;
+  forMobile?: boolean;
 }
 
-const Wrapper = styled.div`
+const Wrapper = styled.div<{ $forMobile?: boolean }>`
   position: relative;
-  width: max-content;
+  width: ${({ $forMobile }) => ($forMobile ? "100%" : "max-content")};
   cursor: pointer;
 `;
 
-const DropdownMenuWrapper = styled.ul`
-  top: 10px;
-  position: absolute;
+const DropdownMenuWrapper = styled.ul<{ $forMobile?: boolean }>`
+  top: 30px;
+  position: ${({ $forMobile }) => ($forMobile ? "static" : "absolute")};
   left: 0;
   z-index: 1000;
   display: flex;
   flex-direction: column;
-  width: max-content;
-  box-shadow: 0px 10px 15px #00000019;
+  width: ${({ $forMobile }) => ($forMobile ? "100%" : "max-content")};
+  box-shadow: ${({ $forMobile }) =>
+    $forMobile ? "none" : "0px 10px 15px #00000019"};
   min-width: 175px;
   padding: 0px;
-  padding-bottom: 19px;
-  border: 1px solid ${({ theme }) => theme.gray3};
+  padding-bottom: ${({ $forMobile }) => ($forMobile ? "0px" : "19px")};
+  border: ${({ $forMobile, theme }) =>
+    $forMobile ? "none" : `1px solid ${theme.gray3}`};
   background: ${({ theme }) => theme.white};
   border-radius: ${({ theme }) => theme.buttonRadius}px;
   min-width: 300px;
+  margin-top: 0px;
   &.fade-enter {
     opacity: 0;
   }
@@ -138,6 +142,7 @@ export const DropdownCategories: React.FC<Props> = ({
   onClick,
   onChange,
   onClear,
+  forMobile,
 }) => {
   const dropdownMenuRef = useRef<HTMLUListElement | null>(null);
   const [isOpen, setIsOpen] = useState(isInitiallyOpen);
@@ -157,19 +162,20 @@ export const DropdownCategories: React.FC<Props> = ({
   };
 
   return (
-    <Wrapper onClick={onClick}>
-      {cloneElement(child as React.ReactElement, {
-        onClick: () => setIsOpen((prev) => !prev),
-        $isMenuOpen: isOpen,
-      })}
+    <Wrapper onClick={onClick} $forMobile={forMobile}>
+      {!!child &&
+        cloneElement(child as React.ReactElement, {
+          onClick: () => setIsOpen((prev) => !prev),
+          $isMenuOpen: isOpen,
+        })}
       <CSSTransition
         in={isOpen}
         timeout={300}
         nodeRef={dropdownMenuRef}
         classNames="fade"
         unmountOnExit
       >
-        <DropdownMenuWrapper ref={dropdownMenuRef}>
+        <DropdownMenuWrapper ref={dropdownMenuRef} $forMobile={forMobile}>
           <ClearItem>
             <Text size="16">Wybierz</Text>
             <button onClick={handleClear}>

diff --git a/src/components/molecules/Navigation/Navigation.tsx b/src/components/molecules/Navigation/Navigation.tsx
@@ -103,7 +103,8 @@ export interface NavigationProps extends ExtendableStyledComponent {
 }
 
 const GlobalStyle = createGlobalStyle`
-.rc-drawer-content-wrapper {
+
+.custom-drawer-wrapper {
   @media (max-width: 530px) {
     width: 90% !important;
   }
@@ -294,7 +295,7 @@ export const Navigation: React.FC<NavigationProps> = (props) => {
               Object.keys(menuItem).length > 0 && (
                 <li key={i}>
                   <div
-                    role={menuItem.children && "button"}
+                    role={menuItem.children ? "button" : undefined}
                     className="drawer-menu-item"
                     onClick={() =>
                       menuItem.children
@@ -367,9 +368,11 @@ export const Navigation: React.FC<NavigationProps> = (props) => {
 
           <Drawer
             open={mobileMenuOpen}
-            handler={false}
-            className={"drawer"}
-            level={null}
+            className={"drawer drawer-header-wrapper"}
+            classNames={{
+              wrapper: "drawer-content-wrapper custom-drawer-wrapper",
+              content: "drawer-content",
+            }}
           >
             <div className="drawer-header">
               {Object.keys(drawerSubmenuHistory).length > 0 ? (

diff --git a/src/components/skeletons/CourseCard/CourseCard.tsx b/src/components/skeletons/CourseCard/CourseCard.tsx
@@ -7,6 +7,11 @@ import { Col, ScreenClass } from "react-grid-system";
 const CardSkeleton = styled.div`
   max-width: 278px;
   min-height: 414px;
+
+  @media (max-width: 768px) {
+    max-width: 100%;
+    min-height: auto;
+  }
 `;
 
 type ColProps = React.ComponentProps<typeof Col>;