update responsive styles

Author: Lee-Minhoon

src/components/layouts/HorizontalLayout/HorizontalLayout.tsx

@@ -1,6 +1,5 @@
 import { Flex } from "@chakra-ui/react";
-import HorizontalLayoutHeader from "./HorizontalLayoutHeader";
-import { HorizontalLayoutSidebar } from "./HorizontalLayoutSidebar";
+import { Sidebar, SubHeader } from "../common";
 
 interface HorizontalLayoutProps {
   children?: React.ReactNode;
@@ -9,7 +8,7 @@ interface HorizontalLayoutProps {
 const HorizontalLayout = ({ children }: HorizontalLayoutProps) => {
   return (
     <Flex>
-      <HorizontalLayoutSidebar />
+      <Sidebar />
       <Flex
         flex={1}
         direction={"column"}
@@ -18,7 +17,7 @@ const HorizontalLayout = ({ children }: HorizontalLayoutProps) => {
         maxH={"100vh"}
         overflow={"hidden"}
       >
-        <HorizontalLayoutHeader />
+        <SubHeader />
         <Flex
           as={"main"}
           flex={1}

src/components/layouts/HorizontalLayout/HorizontalLayoutSidebar/HorizontalLayoutNavbar/index.ts

@@ -0,0 +1,38 @@
+import { Logo } from "@/components";
+import { PageRoutes } from "@/constants";
+import { useAlphaColor, useSafePush } from "@/hooks";
+import { toUrl } from "@/utils";
+import { Flex, Icon, IconButton } from "@chakra-ui/react";
+import { GiHamburgerMenu } from "react-icons/gi";
+
+interface MobileHeaderProps {
+  onClick?: () => void;
+}
+
+const MobileHeader = ({ onClick }: MobileHeaderProps) => {
+  const { push } = useSafePush();
+  const alphaColor = useAlphaColor();
+
+  return (
+    <Flex
+      as={"header"}
+      pos={"sticky"}
+      align={"center"}
+      bgColor={alphaColor(50)}
+      top={"0"}
+      gap={"4"}
+      p={"4"}
+    >
+      <IconButton
+        aria-label={"Open Sidebar"}
+        variant={"outline"}
+        onClick={onClick}
+      >
+        <Icon as={GiHamburgerMenu} />
+      </IconButton>
+      <Logo onClick={() => push(toUrl(PageRoutes.Home))} />
+    </Flex>
+  );
+};
+
+export default MobileHeader;

src/components/layouts/HorizontalLayout/HorizontalLayoutSidebar/HorizontalLayoutSidebar.tsx

@@ -0,0 +1,46 @@
+import { Flex } from "@chakra-ui/react";
+import { useCallback, useState } from "react";
+import { Footer, SubHeader } from "../common";
+import MobileHeader from "./MobileHeader";
+import MobileNavigation from "./MobileNavigation";
+
+interface MobileLayoutProps {
+  children?: React.ReactNode;
+}
+
+const MobileLayout = ({ children }: MobileLayoutProps) => {
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+
+  const handleSidebarOpen = useCallback(() => {
+    setIsSidebarOpen((prev) => !prev);
+  }, []);
+
+  return (
+    <Flex direction={{ base: "column", lg: "row" }} minH={"100vh"}>
+      <MobileHeader onClick={handleSidebarOpen} />
+      <MobileNavigation isOpen={isSidebarOpen} onClose={handleSidebarOpen} />
+      <Flex
+        flex={1}
+        direction={"column"}
+        p={"8"}
+        gap={"4"}
+        maxH={{ base: "initial", lg: "100vh" }}
+        overflow={"hidden"}
+      >
+        <SubHeader />
+        <Flex
+          as={"main"}
+          flex={1}
+          direction={"column"}
+          overflow={"hidden"}
+          p={"0.5"}
+        >
+          {children}
+        </Flex>
+      </Flex>
+      <Footer />
+    </Flex>
+  );
+};
+
+export default MobileLayout;

src/components/layouts/HorizontalLayout/HorizontalLayoutSidebar/index.ts

@@ -0,0 +1,20 @@
+import { Drawer, DrawerContent, DrawerOverlay } from "@chakra-ui/react";
+import { Sidebar } from "../common";
+
+interface MobileNavigationProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const MobileNavigation = ({ isOpen, onClose }: MobileNavigationProps) => {
+  return (
+    <Drawer isOpen={isOpen} onClose={onClose} placement={"left"}>
+      <DrawerOverlay />
+      <DrawerContent maxW={"fit-content"}>
+        <Sidebar />
+      </DrawerContent>
+    </Drawer>
+  );
+};
+
+export default MobileNavigation;

src/components/layouts/MobileLayout/MobileHeader.tsx

@@ -0,0 +1 @@
+export { default as MobileLayout } from "./MobileLayout";

src/components/layouts/MobileLayout/MobileLayout.tsx

@@ -0,0 +1,30 @@
+import { useLayout } from "@/hooks";
+import { useMemo } from "react";
+import { HorizontalLayout } from "../HorizontalLayout";
+import { MobileLayout } from "../MobileLayout";
+import { VerticalLayout } from "../VerticalLayout";
+
+interface ResponsiveLayoutProps {
+  children?: React.ReactNode;
+}
+
+const ResponsiveLayout = ({ children }: ResponsiveLayoutProps) => {
+  const { layout } = useLayout();
+
+  const Layout = useMemo(() => {
+    switch (layout) {
+      case "horizontal":
+        return HorizontalLayout;
+      case "vertical":
+        return VerticalLayout;
+      case "mobile":
+        return MobileLayout;
+      default:
+        throw new Error(`Invalid layout: ${layout}`);
+    }
+  }, [layout]);
+
+  return <Layout>{children}</Layout>;
+};
+
+export default ResponsiveLayout;

src/components/layouts/MobileLayout/MobileNavigation.tsx

@@ -0,0 +1 @@
+export { default as ResponsiveLayout } from "./ResponsiveLayout";