removed sidebar and header
This commit is contained in:
anovazzi1
parent
6a0f5322d9
commit
f8c52f51d6
8 changed files with 2 additions and 175 deletions
|
|
@ -8,7 +8,6 @@ import SuccessAlert from "./alerts/success";
|
|||
import ExtraSidebar from "./components/ExtraSidebarComponent";
|
||||
import { alertContext } from "./contexts/alertContext";
|
||||
import { locationContext } from "./contexts/locationContext";
|
||||
import Sidebar from "./components/SidebarComponent";
|
||||
import Header from "./components/HeaderComponent";
|
||||
import TabsManagerComponent from "./pages/FlowPage/components/tabsManagerComponent";
|
||||
|
||||
|
|
@ -82,9 +81,7 @@ export default function App() {
|
|||
<Header></Header>
|
||||
</div>
|
||||
<div className="flex grow shrink basis-auto min-h-0 flex-1 overflow-hidden">
|
||||
<Sidebar />
|
||||
<ExtraSidebar />
|
||||
|
||||
{/* Main area */}
|
||||
<main className="min-w-0 flex-1 border-t border-gray-200 dark:border-gray-700 flex">
|
||||
{/* Primary column */}
|
||||
|
|
|
|||
|
|
@ -25,12 +25,6 @@ export default function ExtraSidebar() {
|
|||
<span className="text-gray-900 dark:text-white text-lg ml-2 font-semibold">
|
||||
{extraNavigation.title}
|
||||
</span>
|
||||
<button
|
||||
className="text-gray-400 flex-shrink-0 inline-flex items-center justify-center rounded-lg"
|
||||
onClick={() => setIsStackedOpen(false)}
|
||||
>
|
||||
<ChevronLeftIcon className="h-6 w-6"></ChevronLeftIcon>
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex flex-grow flex-col w-full">
|
||||
{extraNavigation.options ? (
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import {
|
|||
MoonIcon,
|
||||
SunIcon,
|
||||
} from '@heroicons/react/24/outline'
|
||||
import Breadcrumb from '../breadcrumbComponent'
|
||||
import { alertContext } from '../../contexts/alertContext'
|
||||
import { useLayer } from 'react-laag'
|
||||
import AlertDropdown from '../../alerts/alertDropDown'
|
||||
|
|
@ -25,25 +24,8 @@ export default function Header(){
|
|||
const {dark, setDark} = useContext(darkContext);
|
||||
return (
|
||||
<header className="relative flex h-16 w-full shrink-0 items-center bg-white dark:bg-gray-800">
|
||||
{/* Logo area */}
|
||||
<div className="static shrink-0">
|
||||
<a
|
||||
href="/"
|
||||
className="flex h-16 items-center justify-center bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-600 w-20"
|
||||
>
|
||||
<img
|
||||
className="h-8 w-auto"
|
||||
src="https://tailwindui.com/img/logos/mark.svg?color=white"
|
||||
alt="Your Company"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Desktop nav area */}
|
||||
<div className="flex min-w-0 flex-1 items-center justify-between">
|
||||
<div className="min-w-0 flex-1 ml-5">
|
||||
<Breadcrumb />
|
||||
</div>
|
||||
<div className="flex min-w-0 flex-1 flex-row-reverse items-center justify-between">
|
||||
<div className="ml-10 flex shrink-0 items-center space-x-10 pr-4">
|
||||
<div className="flex items-center space-x-8">
|
||||
<span className="inline-flex gap-6">
|
||||
|
|
|
|||
|
|
@ -1,66 +0,0 @@
|
|||
import SidebarButton from "./sidebarButton";
|
||||
import { BsPlusSquare } from "react-icons/bs";
|
||||
import { classNames } from "../../utils";
|
||||
import { ChevronRightIcon } from "@heroicons/react/24/outline";
|
||||
import { useContext } from "react";
|
||||
import { sidebarNavigation } from "../../entities/sidebarNav";
|
||||
import { locationContext } from "../../contexts/locationContext";
|
||||
|
||||
export default function Sidebar() {
|
||||
let { showSideBar, isStackedOpen, setIsStackedOpen } =
|
||||
useContext(locationContext);
|
||||
let current = false;
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
(showSideBar ? "w-20" : "w-0") +
|
||||
" h-full overflow-hidden flex-col transition-all duration-500"
|
||||
}
|
||||
>
|
||||
<div className="w-20 h-full">
|
||||
<nav
|
||||
aria-label="Sidebar"
|
||||
className="h-full overflow-y-auto bg-gray-800 dark:bg-gray-900"
|
||||
>
|
||||
<div className="flex flex-col h-full justify-between">
|
||||
<div className="relative flex w-20 flex-col space-y-3 p-3">
|
||||
{sidebarNavigation.map((item, index) => (
|
||||
<SidebarButton item={item} key={index}></SidebarButton>
|
||||
))}
|
||||
</div>
|
||||
<div className="relative flex w-20 flex-col items-center space-y-3 align-items: center;">
|
||||
<button
|
||||
key="New Project"
|
||||
onClick={() => {
|
||||
}}
|
||||
className={classNames(
|
||||
current
|
||||
? "bg-gray-900 text-white"
|
||||
: "text-gray-400 hover:bg-gray-700",
|
||||
"flex-shrink-0 inline-flex items-center justify-center h-14 w-14 rounded-lg"
|
||||
)}
|
||||
>
|
||||
<span className="sr-only">"New Project"</span>
|
||||
<BsPlusSquare className="h-8 w-8" aria-hidden="true" />
|
||||
</button>
|
||||
<div
|
||||
className={` ${
|
||||
isStackedOpen ? "h-0" : "h-12"
|
||||
} overflow-hidden transition-all duration-500`}
|
||||
>
|
||||
<div className="h-10">
|
||||
<button
|
||||
className="text-gray-400 flex-shrink-0 inline-flex items-center justify-center rounded-lg"
|
||||
onClick={() => setIsStackedOpen(true)}
|
||||
>
|
||||
<ChevronRightIcon className="h-6 w-6"></ChevronRightIcon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
import { classNames } from "../../../utils"
|
||||
import { Link } from "react-router-dom"
|
||||
import { useContext } from "react"
|
||||
import { locationContext } from "../../../contexts/locationContext";
|
||||
import { sidebarNavigationItemType } from "../../../types/entities";
|
||||
|
||||
export default function SidebarButton({item}:{item:sidebarNavigationItemType}){
|
||||
let {current}= useContext(locationContext);
|
||||
return (
|
||||
<>
|
||||
<Link
|
||||
key={item.name}
|
||||
to={item.href}
|
||||
className={classNames(
|
||||
item.href.split("/")[1]=== current[3]? 'bg-gray-900 text-white' : 'text-gray-400 hover:bg-gray-700',
|
||||
'flex-shrink-0 inline-flex items-center justify-center h-14 w-14 rounded-lg'
|
||||
)}
|
||||
>
|
||||
<span className="sr-only">{item.name}</span>
|
||||
<item.icon className="h-6 w-6" aria-hidden="true" />
|
||||
</Link>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
import { ChevronRightIcon, HomeIcon } from '@heroicons/react/20/solid'
|
||||
import { useContext } from 'react';
|
||||
import { Link } from 'react-router-dom'
|
||||
import { locationContext } from '../../contexts/locationContext';
|
||||
|
||||
const breadcrumbNameMap: { [key: string]: string } = {
|
||||
'/settings': 'Settings',
|
||||
'/settings/general': 'General',
|
||||
'/settings/general/main': 'Main',
|
||||
'/table': 'Table',
|
||||
};
|
||||
|
||||
|
||||
function getPages(atual:string[]){
|
||||
let pages = [];
|
||||
for(let i = 2; i <= atual.length; i++){
|
||||
let to = '/' + atual.slice(1,i).join('/');
|
||||
pages.push({ name: breadcrumbNameMap[to], href: to })
|
||||
}
|
||||
return (pages);
|
||||
|
||||
}
|
||||
|
||||
export default function Breadcrumb(){
|
||||
let {current} = useContext(locationContext);
|
||||
return (
|
||||
<div>
|
||||
<nav className="flex ml-2" aria-label="Breadcrumb">
|
||||
<ol className="flex items-center space-x-4">
|
||||
<li>
|
||||
<div>
|
||||
<Link to='/' className="text-gray-400 hover:text-gray-500">
|
||||
<HomeIcon className="h-5 w-5 flex-shrink-0" aria-hidden="true" />
|
||||
<span className="sr-only">Home</span>
|
||||
</Link>
|
||||
</div>
|
||||
</li>
|
||||
{getPages(current).map((page) => (
|
||||
<li key={page.href}>
|
||||
<div className="flex items-center">
|
||||
<ChevronRightIcon className="h-5 w-5 flex-shrink-0 text-gray-400" aria-hidden="true" />
|
||||
<a
|
||||
href={page.href}
|
||||
className="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
|
||||
>
|
||||
{page.name}
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -20,7 +20,6 @@ export default function ExtraSidebar() {
|
|||
str: "advanced",
|
||||
bool: "advanced",
|
||||
chatOutput: "chat",
|
||||
chatInput: "chat",
|
||||
}
|
||||
let result = await getAll();
|
||||
setData(result.data);
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ export default function FlowPage({ flow }:{flow:FlowType}) {
|
|||
|
||||
useEffect(() => {
|
||||
setExtraComponent(<ExtraSidebar />);
|
||||
setExtraNavigation({ title: "Nodes" });
|
||||
setExtraNavigation({ title: "Componets" });
|
||||
}, [setExtraComponent, setExtraNavigation]);
|
||||
|
||||
const onEdgesChangeMod = useCallback(
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue