💄 Passe la navigation de vue à React

public/css/app.css

@@ -11878,6 +11878,39 @@ select {
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
 }
+.container {
+  width: 100%;
+}
+@media (min-width: 640px) {
+
+  .container {
+    max-width: 640px;
+  }
+}
+@media (min-width: 768px) {
+
+  .container {
+    max-width: 768px;
+  }
+}
+@media (min-width: 1024px) {
+
+  .container {
+    max-width: 1024px;
+  }
+}
+@media (min-width: 1280px) {
+
+  .container {
+    max-width: 1280px;
+  }
+}
+@media (min-width: 1536px) {
+
+  .container {
+    max-width: 1536px;
+  }
+}
 .fixed {
   position: fixed;
 }
@@ -11902,6 +11935,9 @@ select {
 .z-50 {
   z-index: 50;
 }
+.m-0 {
+  margin: 0px;
+}
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -11954,6 +11990,12 @@ select {
 .mt-3 {
   margin-top: 0.75rem;
 }
+.mb-3 {
+  margin-bottom: 0.75rem;
+}
+.mb-0 {
+  margin-bottom: 0px;
+}
 .block {
   display: block;
 }
@@ -12177,6 +12219,9 @@ select {
 .p-2 {
   padding: 0.5rem;
 }
+.p-0 {
+  padding: 0px;
+}
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -12243,6 +12288,9 @@ select {
 .text-center {
   text-align: center;
 }
+.align-baseline {
+  vertical-align: baseline;
+}
 .font-sans {
   font-family: Nunito, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }

resources/js/app.js

@@ -1,7 +1,15 @@
+/**
+ * First we will load all of this project's JavaScript dependencies which
+ * includes React and other helpers. It's a great starting point while
+ * building robust, powerful web applications using React + Laravel.
+ */
+
 require('./bootstrap');
 
-import Alpine from 'alpinejs';
+/**
+ * Next, we will create a fresh React component instance and attach it to
+ * the page. Then, you may begin adding components to this application
+ * or customize the JavaScript scaffolding to fit your unique needs.
+ */
 
-window.Alpine = Alpine;
+require('./components/Example');
-
-Alpine.start();

resources/js/components/pages/App.tsx

@@ -42,8 +42,8 @@ function App() {
     const [listPages, setListPages]     = React.useState(pages);
     const [passphrase, setPassphrase]   = React.useState(sessionPassphrase);
     const history = useHistory();
-    const [user, setUser] = React.useState(false);
+    const [user, setUser] = React.useState(checkPassphrase());
-    const [error, isError] = React.useState(false);
+    const [error, isError] = React.useState(!checkPassphrase());
 
     const signin = cb => {
         const isAuthenticated = checkPassphrase();
@@ -57,6 +57,7 @@ function App() {
     };
 
     const signout = cb => {
+        sessionStorage.removeItem("key");
         setUser(false);
         cb();
     };
@@ -98,7 +99,7 @@ function App() {
             <p>
                 Bienvenue !{" "}
                 <Button variant="outlined" size="small" sx={{align: "right"}} onClick={() => {
-                    signout(() => history.push("/"));
+                    signout(() => history.push("/diary/public"));
                 }}>
                     Fermer mon carnet à clef
                 </Button>

resources/js/components/pages/AppWrapper.tsx

@@ -2,8 +2,18 @@ import * as React from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter as Router} from "react-router-dom";
 import App from "./App";
+import BasicMenu from "../user/BasicMenu";
+import MobileMenu from "../user/MobileMenu";
 
 const app = document.getElementById('app');
+const menu = document.getElementById("menu");
+const mobileMenu = document.getElementById("mobile-menu");
+if (menu) {
+    ReactDOM.render(<BasicMenu nickname={menu.getAttribute("data-user")} />, menu);
+}
+if (mobileMenu) {
+    ReactDOM.render(<MobileMenu nickname={mobileMenu.getAttribute("data-user")} />, mobileMenu);
+}
 if (app) {
     ReactDOM.render(<AppWrapper/>, app);
 }

resources/js/components/pages/Form.tsx

@@ -42,13 +42,14 @@ export default function PageForm({setListPages, csrf, url, passphrase}) {
         if (json.success) {
             HTMLForm.reset();
             setListPages(previousList => [
-                ...previousList,
                 {
                     id: uuid,
                     date: json.date,
                     title: decryptedFormData.get("title"),
                     content: decryptedFormData.get("text"),
-                }]);
+                },
+                ...previousList
+                ]);
         }
     }
 

resources/js/components/user/BasicMenu.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+
+export default function BasicMenu({nickname}) {
+    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+    const open = Boolean(anchorEl);
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    function logout() {
+        const logoutForm: HTMLFormElement = document.getElementById("logout-form") as HTMLFormElement;
+        logoutForm.submit();
+    }
+
+    return (
+        <div>
+            <Button
+                id="basic-button"
+                aria-controls={open ? 'basic-menu' : undefined}
+                aria-haspopup="true"
+                aria-expanded={open ? 'true' : undefined}
+                onClick={handleClick}
+                className={"flex items-center text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out"}
+            >
+                {nickname}
+            </Button>
+            <Menu
+                id="basic-menu"
+                anchorEl={anchorEl}
+                open={open}
+                onClose={handleClose}
+                MenuListProps={{
+                    'aria-labelledby': 'basic-button',
+                }}
+            >
+                {/*<MenuItem onClick={handleClose}>My account</MenuItem>*/}
+                <MenuItem onClick={logout}>Logout</MenuItem>
+            </Menu>
+        </div>
+    );
+}

resources/js/components/user/MobileMenu.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import SwipeableDrawer from '@mui/material/SwipeableDrawer';
+import Button from '@mui/material/Button';
+import List from '@mui/material/List';
+import Divider from '@mui/material/Divider';
+import ListItem from '@mui/material/ListItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import InboxIcon from '@mui/icons-material/MoveToInbox';
+import MailIcon from '@mui/icons-material/Mail';
+
+export default function MobileMenu({nickname}) {
+    const [state, setState] = React.useState(false);
+
+    const toggleDrawer =
+        (open: boolean) =>
+            (event: React.KeyboardEvent | React.MouseEvent) => {
+                if (
+                    event &&
+                    event.type === 'keydown' &&
+                    ((event as React.KeyboardEvent).key === 'Tab' ||
+                        (event as React.KeyboardEvent).key === 'Shift')
+                ) {
+                    return;
+                }
+
+                setState( open );
+            };
+
+    function logout() {
+        const logoutForm: HTMLFormElement = document.getElementById("logout-form") as HTMLFormElement;
+        logoutForm.submit();
+    }
+
+    return (
+        <div>
+            <Button onClick={toggleDrawer(true)}>
+                <svg className="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
+                    <path className="inline-flex" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
+                </svg>
+            </Button>
+            <SwipeableDrawer
+                anchor={"right"}
+                open={state}
+                onClose={toggleDrawer(false)}
+                onOpen={toggleDrawer(true)}
+            >
+                <Box
+                    sx={{ width: 250 }}
+                    role="presentation"
+                    onClick={toggleDrawer(false)}
+                    onKeyDown={toggleDrawer(false)}
+                >
+                    <List>
+                        <ListItem button key={"user"}>
+                            <ListItemIcon>
+                                <MailIcon />
+                            </ListItemIcon>
+                            <ListItemText primary={nickname} />
+                        </ListItem>
+                    </List>
+                    <Divider />
+                    <List>
+                        <ListItem button key={"user.logout"} onClick={logout}>
+                            <ListItemIcon>
+                                <InboxIcon />
+                            </ListItemIcon>
+                            <ListItemText primary={"Logout"} />
+                        </ListItem>
+                    </List>
+                </Box>
+            </SwipeableDrawer>
+        </div>
+    );
+}

resources/views/layouts/navigation.blade.php

@@ -1,4 +1,4 @@
-<nav x-data="{ open: false }" class="bg-white border-b border-gray-100">
+<nav class="bg-white border-b border-gray-100">
     <!-- Primary Navigation Menu -->
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="flex justify-between h-16">
@@ -20,72 +20,21 @@
 
             <!-- Settings Dropdown -->
             <div class="hidden sm:flex sm:items-center sm:ml-6">
-                <x-dropdown align="right" width="48">
+                <div id="menu" data-user="{{ Auth::user()->name }}"></div>
-                    <x-slot name="trigger">
-                        <button class="flex items-center text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out">
-                            <div>{{ Auth::user()->name }}</div>
-
-                            <div class="ml-1">
-                                <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-                                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
-                                </svg>
-                            </div>
-                        </button>
-                    </x-slot>
-
-                    <x-slot name="content">
                 <!-- Authentication -->
-                        <form method="POST" action="{{ route('logout') }}">
+                <form method="POST" action="{{ route('logout') }}" style="display: none;" id="logout-form">
                     @csrf
-
                     <x-dropdown-link :href="route('logout')"
                                      onclick="event.preventDefault();
                                             this.closest('form').submit();">
                         {{ __('Log Out') }}
                     </x-dropdown-link>
                 </form>
-                    </x-slot>
-                </x-dropdown>
             </div>
 
             <!-- Hamburger -->
             <div class="-mr-2 flex items-center sm:hidden">
-                <button @click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
+                <div id="mobile-menu" data-user="{{ Auth::user()->name }}"></div>
-                    <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
-                        <path :class="{'hidden': open, 'inline-flex': ! open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
-                        <path :class="{'hidden': ! open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                    </svg>
-                </button>
-            </div>
-        </div>
-    </div>
-
-    <!-- Responsive Navigation Menu -->
-    <div :class="{'block': open, 'hidden': ! open}" class="hidden sm:hidden">
-        <div class="pt-2 pb-3 space-y-1">
-            <x-responsive-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')">
-                {{ __('Dashboard') }}
-            </x-responsive-nav-link>
-        </div>
-
-        <!-- Responsive Settings Options -->
-        <div class="pt-4 pb-1 border-t border-gray-200">
-            <div class="px-4">
-                <div class="font-medium text-base text-gray-800">{{ Auth::user()->name }}</div>
-                <div class="font-medium text-sm text-gray-500">{{ Auth::user()->email }}</div>
-            </div>
-
-            <div class="mt-3 space-y-1">
-                <!-- Authentication -->
-                <form method="POST" action="{{ route('logout') }}">
-                    @csrf
-
-                    <x-responsive-nav-link :href="route('logout')"
-                            onclick="event.preventDefault();
-                                        this.closest('form').submit();">
-                        {{ __('Log Out') }}
-                    </x-responsive-nav-link>
-                </form>
             </div>
         </div>
     </div>

routes/web.php

@@ -26,7 +26,7 @@ Route::get('/first', [UserController::class, 'first'])->middleware(['auth', 'aut
 Route::post('/first', [UserController::class, 'storeFirst'])->middleware(['auth', 'auth.passphrase'])->name('user.storeFirst');
 
 Route::get('/dashboard', function () {
-    return view('dashboard');
+    return redirect(\route('pages.index'));
 })->middleware(['auth'])->name('dashboard');
 
 require __DIR__.'/auth.php';