Features/responsive

src/features/global/navigation/NavBar.tsx

@@ -1,23 +1,62 @@
-import FullNavBar from './FullNavBar';
-
 import { useRouter } from 'next/router';
 
 import { useViewportSize } from '@mantine/hooks';
-import ResponsiveNavBar from './ResponsiveNavBar';
-import { useAppSelector } from 'store/hooks/hooks';
+import { Navbar, UnstyledButton, ScrollArea, Group } from '@mantine/core';
+
+import { useAppSelector, useAppDispatch } from 'store/hooks/hooks';
+import { useGetUserInfos } from 'hooks/api/useGetUserInfos';
+
+import UserButton from './components/fullNavBar/UserButton';
+
+import { logoutHandling } from './utils/logoutHandling';
+import { SlLogout } from "react-icons/sl";
+
+import Navigationtabs from './components/fullNavBar/NavigationTabs';
+import { useNavBarStyles } from './styles/useNavBarStyles';
 
-const NavBar: React.FC = () => {
+
+const NavBar = () => {
     const userRole = useAppSelector((state) => state.user.auth.accessToken?.charAt(0));
     const { pathname } = useRouter();
+    const router = useRouter();
     const { width } = useViewportSize();
+    const { data: user } = useGetUserInfos();
+    const { classes } = useNavBarStyles();
+    const dispatch = useAppDispatch();
+
+    let page = pathname;
+
+    if (page === "/home/pld/generator" || page === "/home/pld/images" || page === "/home/pld/changes")
+        page = "/home/pld";
+
+    return pathname.includes("home") && userRole && width >= 800 ? (
+        <Navbar p="xs" width={{ base: 275 }} style={{borderWidth: 0}} className={classes.navbar}>
+            <Navbar.Section>
+                <UserButton
+                    firstname={user?.firstname}
+                    lastname={user?.lastname}
+                    email={user?.email}
+                />
+            </Navbar.Section>
+
+            <Navbar.Section mt="xl" grow component={ScrollArea}>
+                <Navigationtabs active={page} userRole={userRole} />
+            </Navbar.Section>
 
-    return pathname.includes("home") && userRole ? (
-        <>
-            {width >= 800
-                ? <FullNavBar page={pathname} userRole={userRole}  />
-                : <ResponsiveNavBar page={pathname} userRole={userRole} />
-            }
-        </>
+            <Navbar.Section className={classes.footer}>
+                <UnstyledButton
+                    mb={5}
+                    style={{width: "100%"}}
+                    className={classes.link}
+                    onClick={() => {logoutHandling({dispatch, router})}}
+                >
+                    <Group className={classes.iconGroup}>
+                        <SlLogout className={classes.linkIcon} />
+                    </Group>
+                    <span>Logout</span>
+                </UnstyledButton>
+            </Navbar.Section>
+        </Navbar>
     ) : <></>;
 }
 

src/features/global/navigation/NavigationDrawer.tsx

@@ -0,0 +1,57 @@
+import { Container, Drawer, Group, Stack, Text, UnstyledButton } from "@mantine/core";
+import { useGetUserInfos } from "hooks/api/useGetUserInfos";
+import { useRouter } from "next/router";
+import { SlLogout } from "react-icons/sl";
+import { useAppDispatch, useAppSelector } from "store/hooks/hooks";
+import Navigationtabs from "./components/fullNavBar/NavigationTabs";
+import UserButton from "./components/fullNavBar/UserButton";
+import { useNavBarStyles } from "./styles/useNavBarStyles";
+import { logoutHandling } from "./utils/logoutHandling";
+
+interface Props {
+    opened: boolean;
+    onClose: () => void;
+}
+
+const NavigationDrawer: React.FC<Props> = ({ opened, onClose }) => {
+    const { data: user } = useGetUserInfos();
+    const { classes } = useNavBarStyles();
+    const router = useRouter();
+    const dispatch = useAppDispatch();
+    const userRole = useAppSelector((state) => state.user.auth.accessToken?.charAt(0));
+    const { pathname } = useRouter();
+    let page = pathname;
+
+    if (page === "/home/pld/generator" || page === "/home/pld/images" || page === "/home/pld/changes")
+        page = "/home/pld";
+
+    return pathname.includes("home") && userRole ? (
+        <Drawer opened={opened} onClose={onClose} withCloseButton={false} size={"60%"}>
+            <Stack style={{height: "95vh"}} justify={"space-between"}>
+                <div>
+                    <UserButton
+                        firstname={user?.firstname}
+                        lastname={user?.lastname}
+                        email={user?.email}
+                    />
+                    <div style={{ marginTop: 30 }}>
+                        <Navigationtabs active={page} userRole={userRole} onClose={onClose} />
+                    </div>
+                </div>
+                <UnstyledButton
+                    mb={5}
+                    style={{width: "100%"}}
+                    className={classes.link}
+                    onClick={() => {logoutHandling({dispatch, router})}}
+                >
+                    <Group className={classes.iconGroup}>
+                        <SlLogout className={classes.linkIcon} />
+                    </Group>
+                    <span>Logout</span>
+                </UnstyledButton>
+            </Stack>
+        </Drawer>
+    ) : <></>;
+}
+
+export default NavigationDrawer;

src/features/global/navigation/components/fullNavBar/NavigationTabs.tsx

@@ -2,22 +2,24 @@ import Link from "next/link";
 
 import { Divider, Group } from "@mantine/core";
 
-import { useStyles } from "../../styles/fullNavBarStyle";
+import { useNavBarStyles } from "../../styles/useNavBarStyles";
 
 import { userTabs, editorTabs, adminTabs } from "features/global/navigation/utils/links";
 
 interface Props {
     active: string;
     userRole: string;
+    onClose?: () => void;
 }
 
-const Navigationtabs: React.FC<Props> = ({active, userRole}) => {
-    const { classes, cx } = useStyles();
+const Navigationtabs: React.FC<Props> = ({active, userRole, onClose}) => {
+    const { classes, cx } = useNavBarStyles();
 
     const userNav = userTabs.map((item) => (
         <Link
             className={cx(classes.link, { [classes.linkActive]: item.link === active })}
             href={item.link}
+            onClick={onClose && (() => onClose())}
             key={item.label}
         >
             <Group className={cx(classes.iconGroup, { [classes.iconGroupActive]: item.link === active })}>
@@ -31,6 +33,7 @@ const Navigationtabs: React.FC<Props> = ({active, userRole}) => {
         <Link
             className={cx(classes.link, { [classes.linkActive]: item.link === active })}
             href={item.link}
+            onClick={onClose && (() => onClose())}
             key={item.label}
         >
             <Group className={cx(classes.iconGroup, { [classes.iconGroupActive]: item.link === active })}>
@@ -44,6 +47,7 @@ const Navigationtabs: React.FC<Props> = ({active, userRole}) => {
         <Link
             className={cx(classes.link, { [classes.linkActive]: item.link === active })}
             href={item.link}
+            onClick={onClose && (() => onClose())}
             key={item.label}
         >
             <Group className={cx(classes.iconGroup, { [classes.iconGroupActive]: item.link === active })}>

src/features/global/navigation/styles/fullNavBarStyle.ts → src/features/global/navigation/styles/useNavBarStyles.ts

@@ -1,6 +1,6 @@
 import { createStyles, getStylesRef } from "@mantine/core";
 
-export const useStyles = createStyles((theme, _params) => {
+export const useNavBarStyles = createStyles((theme, _params) => {
     const icon = getStylesRef('icon');
 
     return {

src/features/home/admin/configModal/ConfigModal.tsx

@@ -88,7 +88,7 @@ const ConfigModal: React.FC<Props> = ({opened, setOpened, actualConfig, refetch}
                         );
                     })}
                     <Group position="center" mt={30} grow>
-                        <Button disabled={!form.isDirty()} color={"violet"} leftIcon={<IoSaveOutline size={20} />} miw={240} maw={400} variant="outline" type="submit">
+                        <Button color={"violet"} leftIcon={<IoSaveOutline size={20} />} miw={240} maw={400} variant="outline" type="submit">
                             Save
                         </Button>
                     </Group>