mokhtar/shellphone.app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

allow logging out from settings

Browse Source
This commit is contained in:
m5r 2021-10-15 22:30:57 +02:00
parent 5b9eef73ae
commit c3bdef4800
2 changed files with 27 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/settings/components/divider.tsx
View File

@ -1,6 +1,8 @@
export default function Divider() { import clsx from "clsx";
export default function Divider({ className = "" }) {
return ( return (
<div className="relative"> <div className={clsx(className, "relative")}>
<div className="absolute inset-0 flex items-center"> <div className="absolute inset-0 flex items-center">
<div className="w-full border-t border-gray-300" /> <div className="w-full border-t border-gray-300" />
</div> </div>

28
app/settings/components/settings-layout.tsx
View File

@ -1,9 +1,17 @@
import type { FunctionComponent } from "react"; import type { FunctionComponent } from "react";
import { Link, Routes, useRouter } from "blitz"; import { Link, Routes, useMutation, useRouter } from "blitz";
import clsx from "clsx"; import clsx from "clsx";
import { IoChevronBack, IoNotificationsOutline, IoCardOutline, IoPersonCircleOutline } from "react-icons/io5"; import {
IoChevronBack,
IoLogOutOutline,
IoNotificationsOutline,
IoCardOutline,
IoPersonCircleOutline,
} from "react-icons/io5";
import Layout from "../../core/layouts/layout"; import Layout from "app/core/layouts/layout";
import logout from "app/auth/mutations/logout";
import Divider from "./divider";
const subNavigation = [ const subNavigation = [
{ name: "Account", href: Routes.Account(), icon: IoPersonCircleOutline }, { name: "Account", href: Routes.Account(), icon: IoPersonCircleOutline },
@ -13,6 +21,7 @@ const subNavigation = [
const SettingsLayout: FunctionComponent = ({ children }) => { const SettingsLayout: FunctionComponent = ({ children }) => {
const router = useRouter(); const router = useRouter();
const [logoutMutation] = useMutation(logout);
return ( return (
<Layout title="Settings"> <Layout title="Settings">
@ -27,7 +36,7 @@ const SettingsLayout: FunctionComponent = ({ children }) => {
<main className="flex flex-col flex-grow mx-auto w-full max-w-7xl pb-10 lg:py-12 lg:px-8"> <main className="flex flex-col flex-grow mx-auto w-full max-w-7xl pb-10 lg:py-12 lg:px-8">
<div className="flex flex-col flex-grow lg:grid lg:grid-cols-12 lg:gap-x-5"> <div className="flex flex-col flex-grow lg:grid lg:grid-cols-12 lg:gap-x-5">
<aside className="py-6 px-2 sm:px-6 lg:py-0 lg:px-0 lg:col-span-3"> <aside className="py-6 px-2 sm:px-6 lg:py-0 lg:px-0 lg:col-span-3">
<nav className="space-y-1"> <nav className="h-full flex flex-col">
{subNavigation.map((item) => { {subNavigation.map((item) => {
const isCurrentPage = item.href.pathname === router.pathname; const isCurrentPage = item.href.pathname === router.pathname;
@ -38,7 +47,7 @@ const SettingsLayout: FunctionComponent = ({ children }) => {
isCurrentPage isCurrentPage
? "bg-gray-50 text-primary-600 hover:bg-white" ? "bg-gray-50 text-primary-600 hover:bg-white"
: "text-gray-900 hover:text-gray-900 hover:bg-gray-50", : "text-gray-900 hover:text-gray-900 hover:bg-gray-50",
"group rounded-md px-3 py-2 flex items-center text-sm font-medium", "mb-1 group rounded-md px-3 py-2 flex items-center text-sm font-medium",
)} )}
aria-current={isCurrentPage ? "page" : undefined} aria-current={isCurrentPage ? "page" : undefined}
> >
@ -56,6 +65,15 @@ const SettingsLayout: FunctionComponent = ({ children }) => {
</Link> </Link>
); );
})} })}
<Divider className="mt-auto mb-1" />
<button
onClick={() => logoutMutation()}
className="group text-gray-900 hover:text-gray-900 hover:bg-gray-50 rounded-md px-3 py-2 flex items-center text-sm font-medium"
>
<IoLogOutOutline className="text-gray-400 group-hover:text-gray-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6" />
Log out
</button>
</nav> </nav>
</aside> </aside>