Skip to content

Commit

Permalink
Adjust pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@slhmy
slhmy committed Sep 26, 2023
1 parent ee5e4f8 commit 4b28e9d
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 35 deletions.
31 changes: 8 additions & 23 deletions src/layouts/adminLayout/Sidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { Fragment, useState } from "react";
import { Dialog, Menu, Transition } from "@headlessui/react";
import {
Bars3Icon,
BellIcon,
HomeIcon,
UsersIcon,
XMarkIcon,
Expand All @@ -19,7 +18,7 @@ const user = {
imageUrl: "./avatars/male-avatar-1.svg",
};
const userNavigation = [
{ name: "Your profile", href: "#" },
{ name: "Main Page", href: "/problem" },
{ name: "Sign out", href: "#" },
];

Expand Down Expand Up @@ -141,7 +140,7 @@ export default function Sidebar(props: SidebarProps) {
</Transition.Root>

{/* Static sidebar for desktop */}
<div className="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
<div className="hidden max-w-xs lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-80 lg:flex-col">
{/* Sidebar component, swap this element with another sidebar if you like */}
<div className="flex grow flex-col gap-y-5 overflow-y-auto bg-indigo-600 px-6 pb-4">
<div className="flex h-16 shrink-0 items-center gap-4">
Expand Down Expand Up @@ -187,8 +186,8 @@ export default function Sidebar(props: SidebarProps) {
</div>
</div>

<div className="lg:pl-72">
<div className="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 border-b border-gray-200 bg-white px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:px-8">
<div className="lg:pl-80">
<div className="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 border-b border-gray-200 bg-white px-4 shadow-sm sm:gap-x-6">
<button
type="button"
className="-m-2.5 p-2.5 text-gray-700 lg:hidden"
Expand All @@ -200,20 +199,6 @@ export default function Sidebar(props: SidebarProps) {

<div className="flex flex-1 justify-end gap-x-4 self-stretch lg:gap-x-6">
<div className="flex items-center gap-x-4 lg:gap-x-6">
<button
type="button"
className="-m-2.5 p-2.5 text-gray-400 hover:text-gray-500"
>
<span className="sr-only">View notifications</span>
<BellIcon className="h-6 w-6" aria-hidden="true" />
</button>

{/* Separator */}
<div
className="hidden lg:block lg:h-6 lg:w-px lg:bg-gray-900/10"
aria-hidden="true"
/>

{/* Profile dropdown */}
<Menu as="div" className="relative">
<Menu.Button className="-m-1.5 flex items-center p-1.5">
Expand All @@ -238,22 +223,22 @@ export default function Sidebar(props: SidebarProps) {
</Menu.Button>
<Transition
as={Fragment}
enter="transition ease-out duration-100"
enter="transition ease-out duration-200"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="absolute right-0 z-10 mt-2.5 w-32 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none">
<Menu.Items className="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
{userNavigation.map((item) => (
<Menu.Item key={item.name}>
{({ active }) => (
<a
href={item.href}
className={classNames(
active ? "bg-gray-50" : "",
"block px-3 py-1 text-sm leading-6 text-gray-900",
active ? "bg-gray-100" : "",
"block px-4 py-2 text-sm text-gray-700",
)}
>
{item.name}
Expand Down
28 changes: 16 additions & 12 deletions src/layouts/userLayout/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
TrophyIcon,
ListBulletIcon,
} from "@heroicons/react/24/outline";
import { ChevronDownIcon } from "@heroicons/react/20/solid";

const user = {
name: "Tom Cook",
Expand All @@ -28,8 +29,7 @@ const navigation = [
},
];
const userNavigation = [
{ name: "Your Profile", href: "#" },
{ name: "Settings", href: "#" },
{ name: "Admin Page", href: "/admin" },
{ name: "Sign out", href: "#" },
];

Expand All @@ -42,7 +42,7 @@ export default function Header() {
<Disclosure as="nav" className="h-auto border-b border-gray-200 bg-white">
{({ open }) => (
<>
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="mx-auto px-4">
<div className="flex h-16 justify-between">
<div className="flex">
<div className="flex flex-shrink-0 items-center">
Expand Down Expand Up @@ -77,24 +77,28 @@ export default function Header() {
</div>
</div>
<div className="hidden sm:ml-6 sm:flex sm:items-center">
<button
type="button"
className="rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
>
<span className="sr-only">View notifications</span>
<BellIcon className="h-6 w-6" aria-hidden="true" />
</button>

{/* Profile dropdown */}
<Menu as="div" className="relative ml-3">
<div>
<Menu.Button className="flex max-w-xs items-center rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
<Menu.Button className="-m-1.5 flex items-center p-1.5">
<span className="sr-only">Open user menu</span>
<img
className="h-8 w-8 rounded-full"
src={user.imageUrl}
alt=""
/>
<span className="hidden lg:flex lg:items-center">
<span
className="ml-4 text-sm font-semibold leading-6 text-gray-900"
aria-hidden="true"
>
{user.name}
</span>
<ChevronDownIcon
className="ml-2 h-5 w-5 text-gray-400"
aria-hidden="true"
/>
</span>
</Menu.Button>
</div>
<Transition
Expand Down

0 comments on commit 4b28e9d

Please sign in to comment.