Skip to content

Commit 0b14790

Browse files
igorihimbazweigorihimbazwe
authored
Fx sidebar scroll (#632)
* fix-siderbar-scroll * fix-siderbar-scroll
1 parent dc3387c commit 0b14790

19 files changed

+96
-79
lines changed

Diff for: ‎src/components/DashHeader.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export const TICKETS_NOTS_SUB = gql`
3939
}
4040
`;
4141

42-
function DashHeader() {
42+
function DashHeader({minimize}: any) {
4343
/* istanbul ignore next */
4444
const { minimized, toggleMinMenu, showNav, toggleNav } =
4545
useContext(MenuContext);
@@ -126,7 +126,7 @@ function DashHeader() {
126126
handleShowProfileDropdown={handleShowProfileDropdown}
127127
/>
128128
)}
129-
<div className="font-serif transform:sc w-full py-4 z-20 bg-indigo-100 dark:bg-dark-bg page-header">
129+
<div className="font-serif h-16 transform:sc w-full py-4 z-20 bg-indigo-100 dark:bg-dark-bg page-header">
130130
<div className="px-3 flex items-center w-full font-serif">
131131
<div className="flex px-5 lg:hidden">
132132
<div
@@ -144,7 +144,7 @@ function DashHeader() {
144144
</div>
145145
<div className="hidden lg:flex">
146146
<div
147-
onClick={toggleMinMenu}
147+
onClick={() => { minimize(!minimized); return toggleMinMenu() }}
148148
className="w-7"
149149
role="button"
150150
tabIndex={0}

Diff for: ‎src/components/Sidebar.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,10 @@ function Sidebar({ style, toggle }: { style: string; toggle: () => void }) {
3939
<div
4040
className={`${
4141
showNav ? 'block' : 'hidden'
42-
} lg:block page-sideNav fixed lg:static top-16 bottom-0 font-serif`}
42+
} lg:block lg:z-0 z-50 fixed top-14 bottom-0 lg:h-[calc(100vh-3rem)] `}
4343
>
4444
<div
45-
className={`${style} overflow-auto flex-col h-[100%] pt-2 bg-indigo-100 dark:bg-dark-bg shadow-lg lg:shadow-none dark:shadow-border-dark`}
45+
className={`${style} overflow-auto flex-col h-[100%] px-3 py-8 bg-indigo-100 dark:bg-dark-bg shadow-lg lg:shadow-none dark:shadow-border-dark`}
4646
>
4747
<div className="list-none">
4848
<SideNavLink onClick={toggle} name="Dashboard" to="/dashboard">

Diff for: ‎src/containers/DashRoutes.tsx

+4-5
Original file line numberDiff line numberDiff line change
@@ -83,18 +83,17 @@ const CoordinatorCards = React.lazy(
8383
const AdminSission = React.lazy(() => import('./admin-dashBoard/Sessions'));
8484

8585
function DashRoutes() {
86-
const { toggleNav } = useContext(MenuContext);
87-
86+
const { toggleNav } = useContext(MenuContext);
87+
const [minimized, setMinimized] = useState(false);
8888
const [nav, setNav] = useState(false);
8989
const handleClick = () => setNav(!nav);
90-
9190
return (
9291
<PrivateRoute>
9392
<MenuProvider>
94-
<DashHeader />
93+
<DashHeader minimize={setMinimized} />
9594
<Sidebar toggle={toggleNav} style="" />
9695
</MenuProvider>
97-
<main className=" px-4 md:px-8 py-4 md:py-8 w-[100%] bg-light-bg overflow-hidden dark:bg-dark-frame-bg">
96+
<main className={`px-4 md:px-8 py-4 md:py-8 ${!minimized ? 'lg:w-[calc(100%-14rem)]' : 'lg:w-[calc(100%-5rem)]'} ml-auto mr-0 bg-light-bg overflow-hidden dark:bg-dark-frame-bg`}>
9897
<Suspense>
9998
<Routes>
10099
<Route path="/dashboard" element={<Dashboard />} />

Diff for: ‎src/hook/menuProvider.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ export const MenuContext = createContext<any>({
1414
export function ThemeProvider({ children }: Props) {
1515
const [minimized, setMinimized] = useState(false);
1616
const [showNav, setShowNav] = useState(false);
17-
1817
const toggleMinMenu = () => setMinimized((p) => !p);
1918

2019
const toggleNav = () => setShowNav((p) => !p);

Diff for: ‎src/index.css

+4-4
Original file line numberDiff line numberDiff line change
@@ -484,10 +484,10 @@ th {
484484
.page-layout {
485485
display: grid;
486486
grid-template-areas:
487-
'header header'
488-
'side_nav main'
489-
'footer footer';
490-
grid-template-columns: auto 1fr;
487+
'header'
488+
'main'
489+
'footer';
490+
grid-template-columns: auto;
491491
grid-template-rows: auto 1fr auto;
492492
}
493493

Diff for: ‎tests/components/__snapshots__/AdminTraineeDashboard.test.tsx.snap

+1-1
Original file line numberDiff line numberDiff line change
@@ -463,7 +463,7 @@ Array [
463463
name="date"
464464
readOnly={true}
465465
type="text"
466-
value="2024-11-14"
466+
value="2024-11-19"
467467
/>
468468
</div>
469469
<div

Diff for: ‎tests/components/__snapshots__/DashHeader.test.tsx.snap

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
exports[`DashHeader test Should render DashHeader 1`] = `
44
<div
5-
className="font-serif transform:sc w-full py-4 z-20 bg-indigo-100 dark:bg-dark-bg page-header"
5+
className="font-serif h-16 transform:sc w-full py-4 z-20 bg-indigo-100 dark:bg-dark-bg page-header"
66
>
77
<div
88
className="px-3 flex items-center w-full font-serif"
@@ -36,6 +36,7 @@ exports[`DashHeader test Should render DashHeader 1`] = `
3636
>
3737
<div
3838
className="w-7"
39+
onClick={[Function]}
3940
role="button"
4041
tabIndex={0}
4142
>

Diff for: ‎tests/components/__snapshots__/Footer.test.tsx.snap

+7-1
Original file line numberDiff line numberDiff line change
@@ -216,7 +216,13 @@ exports[`<Footer/> Renders Header 1`] = `
216216
<li
217217
className="mb-1"
218218
>
219-
Community
219+
<a
220+
href="/community"
221+
onClick={[Function]}
222+
>
223+
Community
224+
225+
</a>
220226
</li>
221227
<li
222228
className="mb-1"

Diff for: ‎tests/components/__snapshots__/SideNavLink.test.tsx.snap

+2-2
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,10 @@ exports[`DashHeader test Should render navlink witthout active indicator 1`] =
2121

2222
exports[`DashHeader test Should render the sidebar with setings as active 1`] = `
2323
<div
24-
className="block lg:block page-sideNav fixed lg:static top-16 bottom-0 font-serif"
24+
className="block lg:block lg:z-0 z-50 fixed top-14 bottom-0 lg:h-[calc(100vh-3rem)] "
2525
>
2626
<div
27-
className=" overflow-auto flex-col h-[100%] pt-2 bg-indigo-100 dark:bg-dark-bg shadow-lg lg:shadow-none dark:shadow-border-dark"
27+
className=" overflow-auto flex-col h-[100%] px-3 py-8 bg-indigo-100 dark:bg-dark-bg shadow-lg lg:shadow-none dark:shadow-border-dark"
2828
>
2929
<div
3030
className="list-none"

Diff for: ‎tests/containers/__snapshots__/MainRoutes.test.tsx.snap

+14-2
Original file line numberDiff line numberDiff line change
@@ -1224,7 +1224,13 @@ exports[`Main Routes Should render 1`] = `
12241224
<li
12251225
className="mb-1"
12261226
>
1227-
Community
1227+
<a
1228+
href="/community"
1229+
onClick={[Function]}
1230+
>
1231+
Community
1232+
1233+
</a>
12281234
</li>
12291235
<li
12301236
className="mb-1"
@@ -1509,7 +1515,13 @@ exports[`Main Routes Should render 1`] = `
15091515
<li
15101516
className="mb-1"
15111517
>
1512-
Community
1518+
<a
1519+
href="/community"
1520+
onClick={[Function]}
1521+
>
1522+
Community
1523+
1524+
</a>
15131525
</li>
15141526
<li
15151527
className="mb-1"

Diff for: ‎tests/other-tests/__snapshots__/App.test.tsx.snap

+7-1
Original file line numberDiff line numberDiff line change
@@ -949,7 +949,13 @@ exports[`App test Should render app 1`] = `
949949
<li
950950
className="mb-1"
951951
>
952-
Community
952+
<a
953+
href="/community"
954+
onClick={[Function]}
955+
>
956+
Community
957+
958+
</a>
953959
</li>
954960
<li
955961
className="mb-1"

Diff for: ‎tests/other-tests/__snapshots__/Siderbar.test.tsx.snap

+7-1
Original file line numberDiff line numberDiff line change
@@ -946,7 +946,13 @@ exports[`<Home /> Renders Home 1`] = `
946946
<li
947947
className="mb-1"
948948
>
949-
Community
949+
<a
950+
href="/community"
951+
onClick={[Function]}
952+
>
953+
Community
954+
955+
</a>
950956
</li>
951957
<li
952958
className="mb-1"

Diff for: ‎tests/pages/TraineeAttendance.test.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -174,4 +174,4 @@ describe('Renders the TraineeAttendance Page', () => {
174174
expect(await screen.findByText("You don't have an attendance record in the system at the moment.")).toBeInTheDocument();
175175
});
176176

177-
});
177+
});

Diff for: ‎tests/pages/__snapshots__/AdminLogin.test.tsx.snap

+13-13
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@
33
exports[`Admin Login Should render 1`] = `
44
Array [
55
<div
6-
className="grow dark:bg-dark-frame-bg bg-indigo-50 flex flex-row font-serif"
6+
className="flex flex-row font-serif grow dark:bg-dark-frame-bg bg-indigo-50"
77
>
88
<div
99
className="hidden lg:flex w-[50%] h-full flex-col justify-center items-center mt-10 "
1010
>
1111
<div
12-
className=" flex flex-col justify-center items-center "
12+
className="flex flex-col items-center justify-center "
1313
>
1414
<div
1515
className="relative flex flex-row justify-center"
@@ -40,13 +40,13 @@ Array [
4040
className=" w-full lg:w-[50%] lg:p-5 flex flex-row items-end p-5"
4141
>
4242
<div
43-
className="max-w-lg w-full mx-auto my-28 bg-indigo-100 dark:bg-dark-bg p-5 sm:p-5 md:shadow-xl sm:shadow-none md:rounded-xl sm:rounded-none"
43+
className="w-full max-w-lg p-5 mx-auto bg-indigo-100 my-28 dark:bg-dark-bg sm:p-5 md:shadow-xl sm:shadow-none md:rounded-xl sm:rounded-none"
4444
>
4545
<div
4646
className=""
4747
>
4848
<div
49-
className="flex flex-col justify-center items-center"
49+
className="flex flex-col items-center justify-center"
5050
>
5151
<h2
5252
className="text-2xl font-bold text-primary dark:text-dark-text-fill "
@@ -59,7 +59,7 @@ Array [
5959
/>
6060
</div>
6161
<div
62-
className=" text-sm text-center dark:text-dark-text-fill"
62+
className="text-sm text-center dark:text-dark-text-fill"
6363
>
6464
<a
6565
className="mx-1 text-primary"
@@ -104,7 +104,7 @@ Array [
104104
/>
105105
</svg>
106106
<input
107-
className="bg-gray-100 outline-none text-sm flex-1 px-2 dark:border-white dark:bg-dark-bg dark:text-white "
107+
className="flex-1 px-2 text-sm bg-gray-100 outline-none dark:border-white dark:bg-dark-bg dark:text-white "
108108
data-testid="email"
109109
name="email"
110110
onBlur={[Function]}
@@ -114,13 +114,13 @@ Array [
114114
/>
115115
</div>
116116
<div
117-
className="text-left mb-1 pl-4"
117+
className="pl-4 mb-1 text-left"
118118
/>
119119
<div
120-
className="md:w-full border border-gray rounded-md bg-gray-100 p-2 my-4 flex items-center mb-2 dark:border-white dark:bg-dark-bg"
120+
className="flex items-center p-2 my-4 mb-2 bg-gray-100 border rounded-md md:w-full border-gray dark:border-white dark:bg-dark-bg"
121121
>
122122
<svg
123-
className="text-gray-400 mr-2 "
123+
className="mr-2 text-gray-400 "
124124
fill="currentColor"
125125
height="1em"
126126
stroke="currentColor"
@@ -143,7 +143,7 @@ Array [
143143
/>
144144
</svg>
145145
<input
146-
className="bg-gray-100 outline-none text-sm flex-1 dark:border-white dark:bg-dark-bg dark:text-white"
146+
className="flex-1 text-sm bg-gray-100 outline-none dark:border-white dark:bg-dark-bg dark:text-white"
147147
data-testid="password"
148148
name="password"
149149
onBlur={[Function]}
@@ -187,7 +187,7 @@ Array [
187187
className="pl-4 mb-1 text-left"
188188
/>
189189
<div
190-
className="flex w-full flex-col sm:flex-row justify-between items-center rounded mb-5 mt-5"
190+
className="flex flex-col items-center justify-between w-full mt-5 mb-5 rounded sm:flex-row"
191191
>
192192
<div
193193
className="w-50%"
@@ -197,7 +197,7 @@ Array [
197197
htmlFor="checkbox"
198198
>
199199
<input
200-
className="mr-1 dark:text-dark-text-fill dark:border-white dark:bg-dark-frame-bg"
200+
className="mr-1 dark:text-dark-text-fill dark:border-white dark:bg-dark-frame-bg"
201201
name="remember"
202202
type="checkbox"
203203
/>
@@ -217,7 +217,7 @@ Array [
217217
</div>
218218
</div>
219219
<div
220-
className="w-full justify-center"
220+
className="justify-center w-full"
221221
>
222222
<button
223223
className="btn transparentbtn md w-full bg-primary m-0 inline-block rounded-md lg:px-12 lg:py-2 sm:px-4 sm:py-1 md:font-semibold sm:mt-2 sm:font-medium text-white font-serif "

Diff for: ‎tests/pages/__snapshots__/AdminTraineeDashboard.test.tsx.snap

+1-1
Original file line numberDiff line numberDiff line change
@@ -463,7 +463,7 @@ Array [
463463
name="date"
464464
readOnly={true}
465465
type="text"
466-
value="2024-11-14"
466+
value="2024-11-19"
467467
/>
468468
</div>
469469
<div

Diff for: ‎tests/pages/__snapshots__/Home.test.tsx.snap

+7-1
Original file line numberDiff line numberDiff line change
@@ -946,7 +946,13 @@ exports[`Home page renders the landing page 1`] = `
946946
<li
947947
className="mb-1"
948948
>
949-
Community
949+
<a
950+
href="/community"
951+
onClick={[Function]}
952+
>
953+
Community
954+
955+
</a>
950956
</li>
951957
<li
952958
className="mb-1"

0 commit comments

Comments
 (0)