Skip to content

Commit f252097

Browse files
Ammar7077Ammar7077
committed
Drawer edited
1 parent 66181d3 commit f252097

File tree

2 files changed

+84
-48
lines changed

2 files changed

+84
-48
lines changed

‎src/shared/components/DrawerWrapper.component.tsx‎

Lines changed: 66 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,42 +3,84 @@
33
import { useState, useEffect } from "react";
44
import { EnumLocalStorage } from "@/shared/constants/LocalStorage.constants";
55
import { MiniDrawer } from "./MiniDrawer.component";
6+
import logo from "../../assets/images/logo/logo.png";
7+
import Image from "next/image";
68

79
export const DrawerWrapper = ({ children }: { children: React.ReactNode }) => {
810
const [isDrawerOpen, setIsDrawerOpen] = useState(false);
11+
const [isTablet, setIsTablet] = useState(false);
12+
const [isMobile, setIsMobile] = useState(false);
913

1014
useEffect(() => {
11-
const storedValue = localStorage.getItem(EnumLocalStorage.isDrawerOpen);
12-
const shouldBeOpen = storedValue === "true";
13-
setIsDrawerOpen(window.innerWidth >= 1000 || shouldBeOpen);
14-
}, []);
15-
16-
useEffect(() => {
17-
localStorage.setItem(EnumLocalStorage.isDrawerOpen, String(isDrawerOpen));
18-
}, [isDrawerOpen]);
15+
const updateScreenSize = () => {
16+
const tablet = window.innerWidth < 900;
17+
const mobile = window.innerWidth < 600;
18+
setIsTablet(tablet);
19+
setIsMobile(mobile);
1920

20-
useEffect(() => {
21-
const handleResize = () => {
22-
if (window.innerWidth < 1030) {
23-
setIsDrawerOpen(false);
21+
if (!tablet) {
22+
const storedValue = localStorage.getItem(EnumLocalStorage.isDrawerOpen);
23+
const shouldBeOpen = storedValue === "true";
24+
setIsDrawerOpen(window.innerWidth >= 1000 || shouldBeOpen);
2425
} else {
25-
setIsDrawerOpen(true);
26+
setIsDrawerOpen(false);
2627
}
2728
};
2829

29-
window.addEventListener("resize", handleResize);
30-
return () => window.removeEventListener("resize", handleResize);
30+
updateScreenSize();
31+
window.addEventListener("resize", updateScreenSize);
32+
return () => window.removeEventListener("resize", updateScreenSize);
3133
}, []);
3234

35+
useEffect(() => {
36+
if (!isTablet) {
37+
localStorage.setItem(EnumLocalStorage.isDrawerOpen, String(isDrawerOpen));
38+
}
39+
}, [isDrawerOpen, isTablet]);
40+
3341
return (
34-
<div>
35-
<MiniDrawer
36-
isDrawerOpen={isDrawerOpen}
37-
setIsDrawerOpen={setIsDrawerOpen}
38-
/>
39-
<main className={`${isDrawerOpen ? "ml-72" : "ml-24"} duration-300`}>
40-
{children}
41-
</main>
42-
</div>
42+
<main
43+
className={`${
44+
isDrawerOpen && !isTablet ? "ml-72" : isMobile ? "ml-0" : "ml-24"
45+
} duration-300`}
46+
>
47+
{isMobile && !isDrawerOpen ? (
48+
// Mobile app bar
49+
<div className="fixed top-0 left-2 z-50">
50+
<div
51+
className="justify-center items-center justify-items-center py-2 cursor-pointer inline-flex w-full gap-3 font-bold"
52+
onClick={() => {
53+
setIsDrawerOpen(!isDrawerOpen);
54+
}}
55+
>
56+
<Image
57+
alt="logo"
58+
src={logo}
59+
className="self-center justify-center w-14 h-w-14"
60+
/>
61+
{isDrawerOpen && (
62+
<span className="inline-flex">
63+
<p className="text-blue-400">Dev</p>-
64+
<p className="text-orange-400">G</p>it
65+
</span>
66+
)}
67+
</div>
68+
</div>
69+
) : (
70+
<MiniDrawer
71+
isDrawerOpen={isDrawerOpen}
72+
setIsDrawerOpen={setIsDrawerOpen}
73+
/>
74+
)}
75+
76+
{(isMobile || isTablet) && isDrawerOpen && (
77+
<div
78+
className="fixed inset-0 bg-black bg-opacity-50 z-40"
79+
onClick={() => setIsDrawerOpen(false)}
80+
/>
81+
)}
82+
83+
{children}
84+
</main>
4385
);
4486
};

‎src/shared/components/MiniDrawer.component.tsx‎

Lines changed: 18 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
"use client";
22

3-
import { Menu, ChevronLeft, ChevronDown } from "lucide-react";
3+
import { ChevronDown } from "lucide-react";
44
import {
55
IPagesConstants,
66
pagesConstants,
@@ -37,29 +37,27 @@ export const MiniDrawer = ({
3737

3838
return (
3939
<aside
40-
className={`bg-slate-950 text-white fixed top-0 left-0 h-full transition-all duration-300 ${
40+
className={`bg-slate-950 text-white fixed top-0 left-0 h-full transition-all duration-300 border-r-2 border-slate-700 z-50 ${
4141
isDrawerOpen ? "w-64" : "w-20"
4242
}`}
4343
>
44-
{/* <div className="flex h-16 justify-items-center items-center px-2 border-b border-b-slate-600">
45-
<button
46-
onClick={() => setIsDrawerOpen(!isDrawerOpen)}
47-
className="w-full p-2 rounded-lg hover:bg-slate-100 hover:text-slate-500"
48-
>
49-
{!isDrawerOpen ? (
50-
<Menu className="h-6 w-6 justify-self-center" />
51-
) : (
52-
<ChevronLeft className="h-6 w-6" />
53-
)}
54-
</button>
55-
</div> */}
56-
57-
<div className="justify-center items-center justify-items-center py-2">
44+
<div
45+
className="justify-center items-center justify-items-center py-2 cursor-pointer inline-flex w-full gap-3 font-bold"
46+
onClick={() => {
47+
setIsDrawerOpen(!isDrawerOpen);
48+
}}
49+
>
5850
<Image
5951
alt="logo"
6052
src={logo}
6153
className="self-center justify-center w-14 h-w-14"
6254
/>
55+
{isDrawerOpen && (
56+
<span className="inline-flex">
57+
<p className="text-blue-400">Dev</p>-
58+
<p className="text-orange-400">G</p>it
59+
</span>
60+
)}
6361
</div>
6462
<div
6563
className={`overflow-y-auto max-h-full pb-28 scrollbar-hide items-center ${
@@ -68,7 +66,6 @@ export const MiniDrawer = ({
6866
>
6967
{pagesConstants.map((page: any, index: number) => {
7068
const isActive = pathname.includes(page.route);
71-
//* prefetch for docs page only
7269
const isPrefetchable = page.subMenu
7370
? `${page.subMenu[0].route}`.endsWith("docs")
7471
: page.route.endsWith("docs");
@@ -98,9 +95,7 @@ export const MiniDrawer = ({
9895
>
9996
{page.icon}
10097
{isDrawerOpen && (
101-
<div
102-
className={`w-full flex items-center justify-between`}
103-
>
98+
<div className="w-full flex items-center justify-between">
10499
{page.label}
105100
{page.subMenu && (
106101
<ChevronDown
@@ -141,6 +136,7 @@ export const MiniDrawer = ({
141136
)}
142137
</Link>
143138
)}
139+
144140
{isPrefetchable && (
145141
<a
146142
href={page.subMenu ? `${page.subMenu[0].route}` : page.route}
@@ -163,9 +159,7 @@ export const MiniDrawer = ({
163159
>
164160
{page.icon}
165161
{isDrawerOpen && (
166-
<div
167-
className={`w-full flex items-center justify-between`}
168-
>
162+
<div className="w-full flex items-center justify-between">
169163
{page.label}
170164
{page.subMenu && (
171165
<ChevronDown
@@ -219,7 +213,7 @@ export const MiniDrawer = ({
219213
(buttonRefs.current[index]?.getBoundingClientRect()
220214
.left ?? 0) +
221215
(buttonRefs.current[index]?.offsetWidth ?? 0) +
222-
15, // margin
216+
15,
223217
}}
224218
>
225219
{page.label}

0 commit comments

Comments
 (0)