Skip to content

Commit c251366

Browse files
Jee-vimJee-vim
committed
feat(responsive v6)
1 parent 16dab9f commit c251366

File tree

6 files changed

+63
-21
lines changed

6 files changed

+63
-21
lines changed

‎app/v6/layout.tsx

Lines changed: 2 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
1-
import Navbar from "@/components/shared/Navbar";
2-
import Sidebar from "@/components/shared/Sidebar";
1+
import LayoutWrapper from "@/components/v6/layout-wrapper";
32
import type { Metadata } from "next";
4-
import styles from "@/styles/component/layout.module.css";
5-
import { cn } from "@/lib/utils";
63

74
export const metadata: Metadata = {
85
title: "Dashboard Layout V6",
@@ -17,19 +14,7 @@ export default function RootLayout({
1714
return (
1815
<html lang="en">
1916
<body>
20-
<div className="overflow-hidden h-dvh">
21-
<Navbar />
22-
<main
23-
className={cn(
24-
"h-[calc(100vh-var(--h-navbar))]",
25-
styles.main_wrapper,
26-
)}
27-
>
28-
<Sidebar height="h-[calc(100vh-var(--h-navbar)]" />
29-
<main className={styles.main_content_with_navbar}>{children}</main>
30-
<Sidebar height="h-[calc(100vh-var(--h-navbar)]" />
31-
</main>
32-
</div>
17+
<LayoutWrapper>{children}</LayoutWrapper>
3318
</body>
3419
</html>
3520
);

‎components/v4/sidebar.tsx renamed to ‎components/shared/SidebarOpenClose.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,11 @@ import { useWindowSize } from "@/hooks";
44
import { cn } from "@/lib/utils";
55
import styles from "@/styles/component/sidebar.module.css";
66

7-
export default function Sidebar({ isOpen, setIsOpen }: ISidebar) {
7+
export default function SidebarWithOpenClose({
8+
isOpen,
9+
setIsOpen,
10+
className,
11+
}: ISidebar) {
812
const { width } = useWindowSize();
913
const isMobile = width <= 768;
1014
const refOutside = useRef<HTMLDivElement>(null);
@@ -34,7 +38,7 @@ export default function Sidebar({ isOpen, setIsOpen }: ISidebar) {
3438
}, [isMobile, isOpen]);
3539

3640
return (
37-
<div className="relative w-fit" ref={refOutside}>
41+
<div className={cn("relative w-fit", className)} ref={refOutside}>
3842
<div
3943
className={cn(styles.sidebarWithOpenClose, {
4044
[styles.sidebarWithOpenCloseActive]: !isOpen,

‎components/v3/close-open.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,17 @@ import { cn } from "@/lib/utils";
44
export default function CloseOpen({
55
isOpen,
66
setIsOpen,
7+
className,
78
}: {
89
isOpen: boolean;
910
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
11+
className?: string;
1012
}) {
1113
return (
1214
<button
1315
type="button"
1416
onClick={() => setIsOpen(!isOpen)}
15-
className={cn("absolute top-3 bg-dark-700 p-3 ", {
17+
className={cn("absolute top-3 bg-dark-700 p-3 ", className, {
1618
"right-0 rounded-l-lg ": isOpen,
1719
"left-0 rounded-r-lg": !isOpen,
1820
})}

‎components/v4/sidebar-wrapper.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
"use client";
22
import { useState } from "react";
33

4-
import Sidebar from "./sidebar";
4+
import Sidebar from "@/components/shared/SidebarOpenClose";
55
import Navbar from "@/components/shared/Navbar";
66
import CloseOpen from "./close-open";
77
import styles from "@/styles/component/layout.module.css";

‎components/v6/layout-wrapper.tsx

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
"use client";
2+
import Navbar from "@/components/shared/Navbar";
3+
import Sidebar from "@/components/shared/Sidebar";
4+
import styles from "@/styles/component/layout.module.css";
5+
import { cn } from "@/lib/utils";
6+
import { useState } from "react";
7+
import CloseOpen from "../v3/close-open";
8+
9+
export default function LayoutWrapper({
10+
children,
11+
}: {
12+
children: React.ReactNode;
13+
}) {
14+
const [isOpen, setIsOpen] = useState(false);
15+
16+
return (
17+
<div className="overflow-hidden h-dvh">
18+
<Navbar className="relative">
19+
<CloseOpen
20+
isOpen={isOpen}
21+
setIsOpen={setIsOpen}
22+
className={cn(`lg:!hidden !rounded-l-none !rounded-r-lg left-0 `, {
23+
"!w-fit": isOpen,
24+
})}
25+
/>
26+
</Navbar>
27+
<main
28+
className={cn(
29+
"relative h-[calc(100vh-var(--h-navbar))]",
30+
styles.main_wrapper,
31+
)}
32+
>
33+
<Sidebar
34+
className={cn(`absolute lg:block`, {
35+
"left-0 !min-w-[200px] !h-[calc(100vh-var(--h-navbar))]": isOpen,
36+
"left-[-280px]": !isOpen,
37+
})}
38+
height="h-[calc(100vh-var(--h-navbar)]"
39+
/>
40+
<main className={cn("px-2 lg:px-0", styles.main_content_with_navbar)}>
41+
{children}
42+
</main>
43+
<Sidebar
44+
className="hidden lg:block"
45+
height="h-[calc(100vh-var(--h-navbar)]"
46+
/>
47+
</main>
48+
</div>
49+
);
50+
}

‎types/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
declare interface ISidebar {
22
isOpen: boolean;
33
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
4+
className?: string;
45
}

0 commit comments

Comments
 (0)