Skip to content

Commit

Permalink
Layout refactoring
Browse files Browse the repository at this point in the history
  • Loading branch information
@Raduc4
Raduc4 committed Jan 23, 2024
1 parent aabea5a commit 9af3d2e
Show file tree
Hide file tree
Showing 11 changed files with 447 additions and 121 deletions.
129 changes: 70 additions & 59 deletions components/common/Layout/Layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,21 @@
import React from 'react';
import { Fragment, useState } from 'react';
import { Dialog, Menu, Transition } from '@headlessui/react';
import { Dialog, Transition } from '@headlessui/react';
import {
Bars3Icon,
BellIcon,
CalendarIcon,
ChartPieIcon,
ChevronDownIcon,
Cog6ToothIcon,
DocumentDuplicateIcon,
FolderIcon,
HomeIcon,
MagnifyingGlassIcon,
UsersIcon,
XMarkIcon,
} from '@heroicons/react/24/outline';

import { useAppSelector } from 'redux/store';
import { usePathname } from 'next/navigation';
import WorkspacesBar from '@components/ui/workspacesBar';
import AddServerModal from '@components/ui/AddServer';
import Link from 'next/link';

const navigation = [
{ name: 'Dashboard', href: '#', icon: HomeIcon, current: true },
{ name: 'Team', href: '#', icon: UsersIcon, current: false },
{ name: 'Projects', href: '#', icon: FolderIcon, current: false },
{ name: 'Calendar', href: '#', icon: CalendarIcon, current: false },
{ name: 'Documents', href: '#', icon: DocumentDuplicateIcon, current: false },
{ name: 'Reports', href: '#', icon: ChartPieIcon, current: false },
];
const teams = [
{ id: 1, name: 'Heroicons', href: '#', initial: 'H', current: false },
{ id: 2, name: 'Tailwind Labs', href: '#', initial: 'T', current: false },
Expand All @@ -53,15 +41,9 @@ export const Layout = ({ children }: Props) => {
console.log(pathname);
const [navigation, _] = useState([
{
name: 'Find Peers',
href: `/server/findPeers/`,
name: 'Register Requests',
href: '/requests',
icon: UsersIcon,
current: true,
},
{
name: 'Storage',
href: '/server/storage/',
icon: DocumentDuplicateIcon,
current: false,
},
]);
Expand All @@ -75,11 +57,7 @@ export const Layout = ({ children }: Props) => {
).length;

return (
<div className="relative">
<ChevronDownIcon
className=" h-5 w-5 absolute top-2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-gray-900 hover:bg-gray-200 cursor-pointer "
aria-hidden="true"
/>
<>
<div>
<Transition.Root show={sidebarOpen} as={Fragment}>
<Dialog
Expand Down Expand Up @@ -134,7 +112,7 @@ export const Layout = ({ children }: Props) => {
</div>
</Transition.Child>
{/* Sidebar component, swap this element with another sidebar if you like */}
<div className="flex grow flex-col gap-y-5 overflow-y-auto bg-gray-900 px-6 pb-4 ring-1 ring-white/10">
<div className="flex grow flex-col gap-y-5 overflow-y-auto bg-gray-900 px-6 pb-2 ring-1 ring-white/10">
<div className="flex h-16 shrink-0 items-center">
<img
className="h-8 w-auto"
Expand Down Expand Up @@ -192,18 +170,6 @@ export const Layout = ({ children }: Props) => {
))}
</ul>
</li>
<li className="mt-auto">
<a
href="#"
className="group -mx-2 flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-400 hover:bg-gray-800 hover:text-white"
>
<Cog6ToothIcon
className="h-6 w-6 shrink-0"
aria-hidden="true"
/>
Settings
</a>
</li>
</ul>
</nav>
</div>
Expand All @@ -213,16 +179,27 @@ export const Layout = ({ children }: Props) => {
</Dialog>
</Transition.Root>

{addServerOpen && (
<div className="absolute z-[100] top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<AddServerModal
onCloseNavbar={setSidebarOpen}
onClose={setAddServerOpen}
/>
</div>
)}

{/* Static sidebar for desktop */}
<div className="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 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-gray-900 px-6 pb-4">
<div className="flex grow flex-col gap-y-5 overflow-y-auto bg-gray-900 px-6">
<div className="flex h-16 shrink-0 items-center">
<img
className="h-8 w-auto"
src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500"
alt="Your Company"
/>
<Link href="/">
<img
className="h-8 w-auto"
src="/assets/logo_citadel.jpg"
alt="Your Company"
/>
</Link>
</div>
<nav className="flex flex-1 flex-col">
<ul role="list" className="flex flex-1 flex-col gap-y-7">
Expand Down Expand Up @@ -274,32 +251,66 @@ export const Layout = ({ children }: Props) => {
))}
</ul>
</li>
<li className="mt-auto">
<li className="border-y-[1px] border-gray-500">
<ul className=" flex justify-between items-center ">
<li className="py-2 text-xs font-semibold cursor-pointer text-white hover:bg-slate-800">
All members
</li>
<li className="py-2 text-xs font-semibold text-white cursor-pointer hover:bg-slate-800">
Connected peers
</li>
</ul>
</li>
<li className="-mx-6 mt-auto">
<a
href="#"
className="group -mx-2 flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-400 hover:bg-gray-800 hover:text-white"
className="flex items-center gap-x-4 px-6 py-3 text-sm font-semibold leading-6 text-white hover:bg-gray-800"
>
<Cog6ToothIcon
className="h-6 w-6 shrink-0"
aria-hidden="true"
<img
className="h-8 w-8 rounded-full bg-gray-800"
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""
/>
Settings
<span className="sr-only">Your profile</span>
<span aria-hidden="true">Tom Cook</span>
</a>
</li>
</ul>
</nav>
</div>
</div>

<div className="sticky top-0 z-40 flex items-center gap-x-6 bg-gray-900 px-4 py-4 shadow-sm sm:px-6 lg:hidden">
<button
type="button"
className="-m-2.5 p-2.5 text-gray-400 lg:hidden"
onClick={() => setSidebarOpen(true)}
>
<span className="sr-only">Open sidebar</span>
<Bars3Icon className="h-6 w-6" aria-hidden="true" />
</button>
<div className="flex-1 text-sm font-semibold leading-6 text-white">
Dashboard
</div>
<a href="#">
<span className="sr-only">Your profile</span>
<img
className="h-8 w-8 rounded-full bg-gray-800"
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""
/>
</a>
</div>

<div className="lg:pl-72">
<main className="">
<div className="">
<WorkspacesBar />
{children}
</div>
<WorkspacesBar setAddServerOpener={setAddServerOpen} />
</div>
<div className="lg:pl-72 h-full" id="workspace">
<main className="bg-gray-900/95 h-[100%]" id="workspace">
{children}
</main>
</div>
</div>
</div>
</>
);
};
Loading

0 comments on commit 9af3d2e

Please sign in to comment.