Merge pull request #40 from qridwan:39-improve-notes-view-layout

feat: Add create note functionality and toggle button to create or discard note
qridwan · Jul 7, 2024 · 766c21b · 766c21b
2 parents 7f13c11 + 50c2952
commit 766c21b
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 38 deletions.
diff --git a/src/components/Home/NoteLists.tsx b/src/components/Home/NoteLists.tsx
@@ -1,16 +1,37 @@
-import { Grid, Text } from '@mantine/core';
+import { Button, Grid, Text } from '@mantine/core';
 import { noteType } from '../../types/note';
 import BoiLoader from '../../atoms/Loader';
 import { SingleNote } from './SingleNote';
+import React, { useEffect } from 'react';
+import CreateNote from '../../pages/CreateNote';
+import { IconSquarePlus, IconX } from '@tabler/icons-react';
 
 const NoteLists = ({ type, notes, isLoading }: { type: string, notes: noteType[] | any, isLoading: boolean }) => {
+	const [isAddNoteOpen, setIsAddNoteOpen] = React.useState<boolean>(false);
+
+	useEffect(() => {
+		isLoading && setIsAddNoteOpen(false);
+	}, [isLoading]);
+	const addNote = <Grid.Col span={12}>
+		<Button variant={isAddNoteOpen ? "light" : "white"} leftIcon={isAddNoteOpen ? <IconX /> : <IconSquarePlus />} size='lg' onClick={() => setIsAddNoteOpen(!isAddNoteOpen)} color="gray" fullWidth>{isAddNoteOpen ? "Discard" : "Create Note"}</Button>
+		{
+			isAddNoteOpen && <CreateNote />
+		}
+	</Grid.Col>
 
 	return (
 		<Grid justify='center' align='stretch'>
+
 			{
-				isLoading ? <BoiLoader /> : notes?.length > 0 ? notes.map((note: any) => <Grid.Col key={note.id} sm={6} md={4} lg={type == 'all' ? 6 : 3} >
-					<SingleNote note={note} />
-				</Grid.Col>) : <Text>No notes Found!</Text>
+				isLoading ? <BoiLoader /> : notes?.length > 0 ? <>
+					{addNote}
+					{notes.map((note: any) => <Grid.Col key={note.id} sm={6} md={4} lg={type == 'all' ? 6 : 3} >
+						<SingleNote note={note} />
+					</Grid.Col>)}
+				</> : <>
+					{addNote}
+					<Text>No notes Found!</Text>
+				</>
 			}
 		</Grid>
 	);

diff --git a/src/components/layouts/Header.tsx b/src/components/layouts/Header.tsx
@@ -134,14 +134,17 @@ export default XHeader;
 
 const useStyles = createStyles((theme) => ({
 	header: {
-		paddingTop: theme.spacing.sm,
+		// paddingTop: theme.spacing.sm,
 		backgroundColor: theme.colors.gray[1],
 		borderBottom: theme.colors.yellow,
-		// marginBottom: rem(10),
+		position: "fixed",
+		top: 0,
+		width: "100%",
+		zIndex: 1,
 	},
 
 	mainSection: {
-		paddingBottom: theme.spacing.sm,
+		// paddingBottom: theme.spacing.sm,
 	},
 
 	user: {

diff --git a/src/components/layouts/Sidebar.module.css b/src/components/layouts/Sidebar.module.css
@@ -1,12 +1,13 @@
 .navbar {
   background-color: var(--mantine-color-gray-1);
-  width: rem(300px);
+  width: rem(250px);
   padding: var(--mantine-spacing-md);
-  padding-top: 0;
+  padding-top: 100px;
   display: flex;
   flex-direction: column;
   border-right: rem(1px) solid
     light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+  position: fixed;
 }
 
 /* //media query */

diff --git a/src/components/layouts/Sidebar.tsx b/src/components/layouts/Sidebar.tsx
@@ -76,23 +76,24 @@ export function XSidebar({ toggle }: { toggle: () => void }) {
 		<nav className={classes.navbar}>
 			<div className={classes.section}>
 				{/* <UserButton /> */}
+				<SearchArea value={value} onChange={(event) => {
+					setValue(event.currentTarget.value)
+					if (event.currentTarget.value === '') {
+						setSearchTerm('')
+					}
+				}} rightSection={
+					<ActionIcon disabled={isLoading} onClick={() => {
+
+						setSearchTerm(value)
+					}} size={32} radius="xl" color={theme.primaryColor} variant="filled">
+						{(
+							!isLoading ? <IconArrowRight size="1.1rem" stroke={1.5} />
+								: <Loader size="xs" color='white' />
+						)}
+					</ActionIcon>
+				} />
 			</div>
-			<SearchArea value={value} onChange={(event) => {
-				setValue(event.currentTarget.value)
-				if (event.currentTarget.value === '') {
-					setSearchTerm('')
-				}
-			}} rightSection={
-				<ActionIcon disabled={isLoading} onClick={() => {
 
-					setSearchTerm(value)
-				}} size={32} radius="xl" color={theme.primaryColor} variant="filled">
-					{(
-						!isLoading ? <IconArrowRight size="1.1rem" stroke={1.5} />
-							: <Loader size="xs" color='white' />
-					)}
-				</ActionIcon>
-			} />
 			{/* <TextInput
 				placeholder="Search"
 				size="xs"

diff --git a/src/components/shared/Footer.tsx b/src/components/shared/Footer.tsx
@@ -13,7 +13,7 @@ const useStyles = createStyles((theme) => ({
 		backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[1],
 		borderTop: `${rem(1)} solid ${theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[2]
 			}`,
-		position: "absolute",
+		// position: "absolute",
 		bottom: 0,
 		width: "100%"
 	},
@@ -52,17 +52,13 @@ export default function Footer() {
 		</Link>
 	));
 
-	return (
-		<>
-			<div className={classes.footer}>
-				<div className={classes.inner}>
-					<BrandLogo textSize='sm' imgHeight={20} />
-					<Group className={classes.links}>{items}</Group>
-					<Social />
-				</div>
-			</div>
-		</>
-	);
+	return (<div className={classes.footer}>
+		<div className={classes.inner}>
+			<BrandLogo textSize='sm' imgHeight={20} />
+			<Group className={classes.links}>{items}</Group>
+			<Social />
+		</div>
+	</div>);
 }
 
 const links = [

diff --git a/src/layouts/MainLayout.tsx b/src/layouts/MainLayout.tsx
@@ -1,4 +1,4 @@
-import { AppShell, Box, ScrollArea } from "@mantine/core";
+import { AppShell, Box, rem } from "@mantine/core";
 import { Outlet, useNavigate } from "react-router-dom";
 import Footer from "../components/shared/Footer";
 import XHeader from "../components/layouts/Header";
@@ -51,7 +51,7 @@ export function MainLayout() {
 			})}
 			footer={<Footer />}
 		>
-			<Box h={"85vh"} style={{ paddingBottom: "2vh" }} component={ScrollArea}>
+			<Box mih={"90vh"} ml={rem('350px')} mt={rem('40px')} style={{ padding: "2vh", }} >
 				<Outlet />
 			</Box>
 		</AppShell>