Other unwanted files have been removed from header branch
This commit is contained in:
“Salar
parent
41726d47ac
commit
4dd580c53f
24
src/App.tsx
24
src/App.tsx
@ -1,24 +0,0 @@
|
|||||||
/* -------------------------------------------------------------------------- */
|
|
||||||
/* Libraries */
|
|
||||||
/* -------------------------------------------------------------------------- */
|
|
||||||
import React from "react";
|
|
||||||
import classNames from "classnames";
|
|
||||||
import Inputgroup from "components/Inputgroup";
|
|
||||||
import Header1 from "components/Header1";
|
|
||||||
|
|
||||||
/* -------------------------------------------------------------------------- */
|
|
||||||
/* Application root component */
|
|
||||||
/* -------------------------------------------------------------------------- */
|
|
||||||
/**
|
|
||||||
* Application root component
|
|
||||||
* @return {JSX.Element}
|
|
||||||
*/
|
|
||||||
function App() {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<Header1 />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default App;
|
|
||||||
@ -1,58 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import classNames from "classnames";
|
|
||||||
export type Props = {
|
|
||||||
className?: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
const Bell = ({ className }: Props) => {
|
|
||||||
return (
|
|
||||||
<div className={classNames("", className)}>
|
|
||||||
<svg
|
|
||||||
// width="24"
|
|
||||||
// height="25"
|
|
||||||
viewBox="0 0 24 25"
|
|
||||||
fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<g clip-path="url(#clip0_531_23239)">
|
|
||||||
<path
|
|
||||||
d="M18 8.5C18 6.9087 17.3679 5.38258 16.2426 4.25736C15.1174 3.13214 13.5913 2.5 12 2.5C10.4087 2.5 8.88258 3.13214 7.75736 4.25736C6.63214 5.38258 6 6.9087 6 8.5C6 15.5 3 17.5 3 17.5H21C21 17.5 18 15.5 18 8.5Z"
|
|
||||||
stroke="#262626"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M13.73 21.5C13.5542 21.8031 13.3018 22.0547 12.9982 22.2295C12.6946 22.4044 12.3504 22.4965 12 22.4965C11.6496 22.4965 11.3054 22.4044 11.0018 22.2295C10.6981 22.0547 10.4458 21.8031 10.27 21.5"
|
|
||||||
stroke="#262626"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
/>
|
|
||||||
<rect
|
|
||||||
x="13"
|
|
||||||
y="1.5"
|
|
||||||
width="10"
|
|
||||||
height="10"
|
|
||||||
rx="5"
|
|
||||||
fill="#FF4D4F"
|
|
||||||
stroke="white"
|
|
||||||
stroke-width="2"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
<defs>
|
|
||||||
<clipPath id="clip0_531_23239">
|
|
||||||
<rect
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
fill="white"
|
|
||||||
transform="translate(0 0.5)"
|
|
||||||
/>
|
|
||||||
</clipPath>
|
|
||||||
</defs>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Bell;
|
|
||||||
@ -1,40 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import classNames from "classnames";
|
|
||||||
export type Props = {
|
|
||||||
className?: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
const Burger = ({ className }: Props) => {
|
|
||||||
return (
|
|
||||||
<div className={classNames("", className)}>
|
|
||||||
<svg
|
|
||||||
// width="24"
|
|
||||||
// height="25"
|
|
||||||
viewBox="0 0 24 25"
|
|
||||||
fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M3 6.5L21 6.5"
|
|
||||||
stroke="#262626"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke-linecap="round"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M3 12.5L21 12.5"
|
|
||||||
stroke="#262626"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke-linecap="round"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M3 18.5L21 18.5"
|
|
||||||
stroke="#262626"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke-linecap="round"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Burger;
|
|
||||||
@ -1,98 +0,0 @@
|
|||||||
import React, { Fragment } from "react";
|
|
||||||
import classNames from "classnames";
|
|
||||||
import { Menu, Transition } from "@headlessui/react";
|
|
||||||
|
|
||||||
import Burger from "./Burger";
|
|
||||||
|
|
||||||
const Drop = () => {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<Menu as="div" className="relative inline-block text-left">
|
|
||||||
<div>
|
|
||||||
<Menu.Button
|
|
||||||
className="inline-flex justify-center w-full rounded-md border
|
|
||||||
border-gray-300 shadow-sm px-1 py-1 bg-white text-sm font-medium
|
|
||||||
text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2
|
|
||||||
focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-black"
|
|
||||||
>
|
|
||||||
About
|
|
||||||
</Menu.Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Transition
|
|
||||||
as={Fragment}
|
|
||||||
enter="transition ease-out duration-100"
|
|
||||||
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="origin-top-right absolute right-0 mt-5 w-56 rounded-md
|
|
||||||
shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
|
|
||||||
>
|
|
||||||
<div className="py-1">
|
|
||||||
<Menu.Item>
|
|
||||||
{({ active }) => (
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
className={classNames(
|
|
||||||
active ? "bg-gray-100 text-gray-900" : "text-gray-700",
|
|
||||||
"block px-4 py-2 text-sm"
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
About Freeland
|
|
||||||
</a>
|
|
||||||
)}
|
|
||||||
</Menu.Item>
|
|
||||||
<Menu.Item>
|
|
||||||
{({ active }) => (
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
className={classNames(
|
|
||||||
active ? "bg-gray-100 text-gray-900" : "text-gray-700",
|
|
||||||
"block px-4 py-2 text-sm"
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
Contact Us
|
|
||||||
</a>
|
|
||||||
)}
|
|
||||||
</Menu.Item>
|
|
||||||
<Menu.Item>
|
|
||||||
{({ active }) => (
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
className={classNames(
|
|
||||||
active ? "bg-gray-100 text-gray-900" : "text-gray-700",
|
|
||||||
"block px-4 py-2 text-sm"
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
Help
|
|
||||||
</a>
|
|
||||||
)}
|
|
||||||
</Menu.Item>
|
|
||||||
{/* <form method="POST" action="#">
|
|
||||||
<Menu.Item>
|
|
||||||
{({ active }) => (
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
className={classNames(
|
|
||||||
active ? "bg-gray-100 text-gray-900" : "text-gray-700",
|
|
||||||
"block w-full text-left px-4 py-2 text-sm"
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
Sign out
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</Menu.Item>
|
|
||||||
</form> */}
|
|
||||||
</div>
|
|
||||||
</Menu.Items>
|
|
||||||
</Transition>
|
|
||||||
</Menu>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Drop;
|
|
||||||
@ -1,64 +0,0 @@
|
|||||||
import React, { useRef } from "react";
|
|
||||||
import { useState } from "react";
|
|
||||||
import classNames from "classnames";
|
|
||||||
|
|
||||||
export type Props = {
|
|
||||||
className?: string;
|
|
||||||
selected?: string;
|
|
||||||
setSelected: (option: string) => void;
|
|
||||||
options: string[];
|
|
||||||
};
|
|
||||||
|
|
||||||
const Dropdown = ({ selected, setSelected, options, className }: Props) => {
|
|
||||||
const [isActive, setIsActive] = useState<boolean>(false);
|
|
||||||
|
|
||||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
|
||||||
const handleClickOutsideDropdown = (e: any) => {
|
|
||||||
if (isActive && !dropdownRef.current?.contains(e.target as Node)) {
|
|
||||||
setIsActive(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
window.addEventListener("click", handleClickOutsideDropdown);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={classNames("", className)} ref={dropdownRef}>
|
|
||||||
<div
|
|
||||||
className="group border-gray-200 hover:border-gray-500 p-2
|
|
||||||
select-none rounded
|
|
||||||
flex items-center justify-between"
|
|
||||||
onClick={(e) => setIsActive(!isActive)}
|
|
||||||
>
|
|
||||||
{selected}
|
|
||||||
<span
|
|
||||||
className="border-r-4 border-l-4 border-t-4 border-b-4 border-r-transparent
|
|
||||||
border-l-transparent border-t-black border-b-transparent h-0 w-0 mt-1
|
|
||||||
transition-all duration-300
|
|
||||||
|
|
||||||
"
|
|
||||||
></span>
|
|
||||||
</div>
|
|
||||||
{isActive && (
|
|
||||||
<div
|
|
||||||
className="float-left mt-1 border border-gray-200 hover:border-gray-500
|
|
||||||
rounded"
|
|
||||||
>
|
|
||||||
{options.map((option) => (
|
|
||||||
<div
|
|
||||||
className="p-1 hover:bg-gray-200 select-none"
|
|
||||||
onClick={(e) => {
|
|
||||||
setSelected(option);
|
|
||||||
setIsActive(false);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{option}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Dropdown;
|
|
||||||
|
|
||||||
//group-active:border-t-transparent group-active:border-b-black group-active:mb-2
|
|
||||||
@ -1,166 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import Dropdown from "./Dropdown";
|
|
||||||
import DropDown from "./Drop";
|
|
||||||
import Link from "./Link";
|
|
||||||
import Logo from "./Logo";
|
|
||||||
import Logofreeland from "./Logofreeland";
|
|
||||||
import { useState, useEffect } from "react";
|
|
||||||
import { Button } from "./Button/Button";
|
|
||||||
import Bell from "./Bell";
|
|
||||||
import Avatar from "./Avatar";
|
|
||||||
import ContextMenu from "components/containers/contextmenu/ContextMenu";
|
|
||||||
import ContextMenuAction from "components/containers/contextmenu/ContextMenuAction";
|
|
||||||
import Sidebar from "components/Sidebar";
|
|
||||||
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
|
|
||||||
import { Createnew, About, Mylibrary } from "components/pages/Overview";
|
|
||||||
import Navbar from "./Navbar";
|
|
||||||
import Drop from "./Drop";
|
|
||||||
|
|
||||||
// Icons Start -------------------------------------------
|
|
||||||
import { ReactComponent as SVGFiletext } from "assets/svg/filetext.svg";
|
|
||||||
// Icons End -------------------------------------------
|
|
||||||
|
|
||||||
// width and height
|
|
||||||
let Short: boolean;
|
|
||||||
function getWindowDimensions() {
|
|
||||||
const { innerWidth: width, innerHeight: height } = window;
|
|
||||||
|
|
||||||
if (width > 870) {
|
|
||||||
Short = true;
|
|
||||||
} else {
|
|
||||||
Short = false;
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
width,
|
|
||||||
height,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export function useWindowDimensions() {
|
|
||||||
const [windowDimensions, setWindowDimensions] = useState(
|
|
||||||
getWindowDimensions()
|
|
||||||
);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
function handleResize() {
|
|
||||||
setWindowDimensions(getWindowDimensions());
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener("resize", handleResize);
|
|
||||||
return () => window.removeEventListener("resize", handleResize);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return windowDimensions;
|
|
||||||
}
|
|
||||||
// width and height End
|
|
||||||
|
|
||||||
const Header1 = () => {
|
|
||||||
const [selected, setSelected] = useState("MY LIBRARY");
|
|
||||||
const [selectedB, setSelectedB] = useState("About");
|
|
||||||
const { height, width } = useWindowDimensions();
|
|
||||||
return (
|
|
||||||
<header
|
|
||||||
className="header flex justify-between items-center box-border w-full
|
|
||||||
border border-gray-75
|
|
||||||
h-16
|
|
||||||
px-4
|
|
||||||
gap-20
|
|
||||||
lg:gap-40 lg:px-8
|
|
||||||
xl:gap-60 xl:px-16"
|
|
||||||
>
|
|
||||||
{/* Logo and Menu */}
|
|
||||||
<div className="flex gap-8 xl:gap-x-16">
|
|
||||||
{/* Logo */}
|
|
||||||
<a className="Logo flex items-center gap-2 " href="/">
|
|
||||||
<Logo className=" w-10 " />
|
|
||||||
<Logofreeland className="w-28" />
|
|
||||||
</a>
|
|
||||||
|
|
||||||
{/* Menu( Create new - My library - About ) Start */}
|
|
||||||
{Short && (
|
|
||||||
<div
|
|
||||||
className="Menu flex items-center
|
|
||||||
gap-2"
|
|
||||||
>
|
|
||||||
<Link className="text-blue-500 px-4 font-bold" href="#">
|
|
||||||
CREATE NEW
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
{/* Dropdown start */}
|
|
||||||
<ContextMenu button="MY LIBRARY" className="text-white">
|
|
||||||
<ContextMenuAction
|
|
||||||
caption="My publications"
|
|
||||||
action={() => console.log("My publications")}
|
|
||||||
icon={<SVGFiletext className="stroke stroke-white h-5 w-4" />}
|
|
||||||
></ContextMenuAction>
|
|
||||||
<ContextMenuAction
|
|
||||||
caption="My favorites"
|
|
||||||
action={() => console.log("My favorites")}
|
|
||||||
icon={<SVGFiletext className="stroke stroke-white h-5 w-4" />}
|
|
||||||
></ContextMenuAction>
|
|
||||||
</ContextMenu>
|
|
||||||
{/* Dropdown End */}
|
|
||||||
|
|
||||||
{/* Dropdown start */}
|
|
||||||
<ContextMenu button="MY LIBRARY" className="text-white">
|
|
||||||
<ContextMenuAction
|
|
||||||
caption="My publications"
|
|
||||||
action={() => console.log("My publications")}
|
|
||||||
icon={<SVGFiletext className="stroke stroke-white h-5 w-4" />}
|
|
||||||
></ContextMenuAction>
|
|
||||||
<ContextMenuAction
|
|
||||||
caption="My favorites"
|
|
||||||
action={() => console.log("My favorites")}
|
|
||||||
icon={<SVGFiletext className="stroke stroke-white h-5 w-4" />}
|
|
||||||
></ContextMenuAction>
|
|
||||||
</ContextMenu>
|
|
||||||
{/* Dropdown End */}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Menu( Create new - My library - About ) End */}
|
|
||||||
</div>
|
|
||||||
<div className="Authentication flex items-center font-bold text-sm gap-4 ">
|
|
||||||
{/* -------------------------------------- */}
|
|
||||||
{/* Buttons Start */}
|
|
||||||
{/* <Button emphasis="low" className="text-xs px-1 md:text-sm lg:px-4">
|
|
||||||
Sign In
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
emphasis="medium"
|
|
||||||
className="text-xs px-1
|
|
||||||
md:text-sm
|
|
||||||
lg:px-4"
|
|
||||||
>
|
|
||||||
Sign Up
|
|
||||||
</Button> */}
|
|
||||||
{/* Buttons End */}
|
|
||||||
{/* -------------------------------------- */}
|
|
||||||
|
|
||||||
{/* Bell Start */}
|
|
||||||
<button>
|
|
||||||
<Bell className="h-6 w-6" />
|
|
||||||
</button>
|
|
||||||
{/* Bell End */}
|
|
||||||
|
|
||||||
{/* Avatar Start */}
|
|
||||||
{Short && (
|
|
||||||
<button>
|
|
||||||
<Avatar className="bg-[rgb(255,122,69)] text-white">K</Avatar>
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
{/* Avatar End */}
|
|
||||||
|
|
||||||
{/* Burger Start */}
|
|
||||||
{!Short && (
|
|
||||||
<button>
|
|
||||||
<Navbar />
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
{/* Burger End */}
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Header1;
|
|
||||||
@ -1,37 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import classNames from "classnames";
|
|
||||||
export type Props = {
|
|
||||||
className?: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const SVGFolderplus = ({ className }: Props) => {
|
|
||||||
return (
|
|
||||||
<div className={classNames("", className)}>
|
|
||||||
<svg
|
|
||||||
// width="24"
|
|
||||||
// height="25"
|
|
||||||
viewBox="0 0 24 25"
|
|
||||||
fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M20 19.5H4C3.44772 19.5 3 19.0523 3 18.5V6.5C3 5.94772 3.44772 5.5 4 5.5H8.58579C8.851 5.5 9.10536 5.60536 9.29289 5.79289L11.7071 8.20711C11.8946 8.39464 12.149 8.5 12.4142 8.5H20C20.5523 8.5 21 8.94772 21 9.5V18.5C21 19.0523 20.5523 19.5 20 19.5Z"
|
|
||||||
stroke="#262626"
|
|
||||||
stroke-width="2"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M13 11.5C13 10.9477 12.5523 10.5 12 10.5C11.4477 10.5 11 10.9477 11 11.5H13ZM11 16.5C11 17.0523 11.4477 17.5 12 17.5C12.5523 17.5 13 17.0523 13 16.5H11ZM11 11.5V16.5H13V11.5H11Z"
|
|
||||||
fill="#262626"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M14.5 15C15.0523 15 15.5 14.5523 15.5 14C15.5 13.4477 15.0523 13 14.5 13L14.5 15ZM9.5 13C8.94772 13 8.5 13.4477 8.5 14C8.5 14.5523 8.94772 15 9.5 15L9.5 13ZM14.5 13L9.5 13L9.5 15L14.5 15L14.5 13Z"
|
|
||||||
fill="#262626"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const SVGFolderplusminus = ({ className }: Props) => {
|
|
||||||
return <div className={classNames("", className)}></div>;
|
|
||||||
};
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
href?: string;
|
|
||||||
children: React.ReactNode;
|
|
||||||
disabled?: boolean;
|
|
||||||
className?: string;
|
|
||||||
} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "">;
|
|
||||||
|
|
||||||
export default function Link({ href, children, disabled, ...props }: Props) {
|
|
||||||
return (
|
|
||||||
// eslint-disable-next-line jsx-a11y/anchor-is-valid
|
|
||||||
<a
|
|
||||||
href={disabled ? undefined : href}
|
|
||||||
aria-disabled={disabled}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</a>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,69 +0,0 @@
|
|||||||
import React, { useState } from "react";
|
|
||||||
import { CSSTransition } from "react-transition-group";
|
|
||||||
import classNames from "classnames";
|
|
||||||
import { Link } from "react-router-dom";
|
|
||||||
import styled from "styled-components";
|
|
||||||
import { SidebarData } from "./SidebarData";
|
|
||||||
import Submenu from "./Submenu";
|
|
||||||
import SidebarLink from "./Submenu";
|
|
||||||
import Burger from "./Burger";
|
|
||||||
|
|
||||||
export type Props = {
|
|
||||||
className?: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
const SideBarNav = styled.div<{ sidebar: boolean }>`
|
|
||||||
left: ${({ sidebar }) => (sidebar ? "0" : "100%")};
|
|
||||||
`;
|
|
||||||
|
|
||||||
const Sidebar = ({ className }: Props) => {
|
|
||||||
const [sidebar, setSidebar] = useState(false);
|
|
||||||
const toggleSidebar = () => setSidebar(!sidebar);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<nav className="relative">
|
|
||||||
{/* Nav Start */}
|
|
||||||
<div
|
|
||||||
className="Burger flex items-center justify-start "
|
|
||||||
onClick={toggleSidebar}
|
|
||||||
>
|
|
||||||
<Burger className="w-6 bg-red-400" />
|
|
||||||
</div>
|
|
||||||
{/* Nav End */}
|
|
||||||
|
|
||||||
{/* Side bar Nav Start Lower one */}
|
|
||||||
{sidebar && (
|
|
||||||
<div
|
|
||||||
className="SideBarNav h-44 w-48 bg-sky-800 absolute -right-8 top-12
|
|
||||||
transition duration-1000 "
|
|
||||||
>
|
|
||||||
{/* Side bar Wrap Start */}
|
|
||||||
<div className="SidebarWrap pl-2 pt-2 h-4/5 flex flex-col items-center justify-around ">
|
|
||||||
{/* Burger Start */}
|
|
||||||
{/* <div
|
|
||||||
className="Burger relative w-6 h-6 flex items-center justify-start "
|
|
||||||
onClick={showSidebar}
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
className="w-5 border h-0 border-black rounded
|
|
||||||
|
|
||||||
before:content-[''] before:w-5 before:border before:border-black
|
|
||||||
before:absolute before:rounded before:top-1 before:left-0
|
|
||||||
|
|
||||||
after:content-[''] after:w-5 after:border after:border-black
|
|
||||||
after:absolute after:rounded after:bottom-1 after:left-0"
|
|
||||||
></span>
|
|
||||||
</div> */}
|
|
||||||
{/* Burger End */}
|
|
||||||
{SidebarData.map((item, index) => {
|
|
||||||
return <Submenu item={item} key={index} />;
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
{/* Side bar Wrap End */}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</nav>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Sidebar;
|
|
||||||
@ -1,28 +0,0 @@
|
|||||||
import { SidebarItem } from "./SidebarItem";
|
|
||||||
|
|
||||||
export const SidebarData: SidebarItem[] = [
|
|
||||||
{
|
|
||||||
title: "CREATE NEW",
|
|
||||||
path: "/overview",
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
title: "MY LIBRARY",
|
|
||||||
path: "/overview/mylibrary",
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
title: "ABOUT",
|
|
||||||
path: "/overview/about",
|
|
||||||
},
|
|
||||||
|
|
||||||
// {
|
|
||||||
// title: "Users",
|
|
||||||
// path: "/overview/users",
|
|
||||||
// },
|
|
||||||
|
|
||||||
// {
|
|
||||||
// title: "Revenue",
|
|
||||||
// path: "/overview/revenue",
|
|
||||||
// },
|
|
||||||
];
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
|
|
||||||
export interface SidebarItem {
|
|
||||||
title: string;
|
|
||||||
path: string;
|
|
||||||
icon?: any;
|
|
||||||
iconOpened?: any;
|
|
||||||
iconClosed?: any;
|
|
||||||
subnav?: SidebarItem[];
|
|
||||||
}
|
|
||||||
@ -1,35 +0,0 @@
|
|||||||
// import { iconButton } from "@material-tailwind/react";
|
|
||||||
import { type } from "@testing-library/user-event/dist/type";
|
|
||||||
import React from "react";
|
|
||||||
import { Link } from "react-router-dom";
|
|
||||||
import { SidebarItem } from "./SidebarItem";
|
|
||||||
import styled from "styled-components";
|
|
||||||
|
|
||||||
// import styled from "styled-components";
|
|
||||||
|
|
||||||
type SidebarLinkProps = {
|
|
||||||
item: SidebarItem;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const SidebarLink = styled(Link)`
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
&:hover {
|
|
||||||
background-color: green;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
// const SidebarLink = ({ item }: SidebarLinkProps) => {
|
|
||||||
const Submenu = ({ item }: SidebarLinkProps) => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<SidebarLink to={item.path} className="text-white">
|
|
||||||
<div className="select-none">{item.title}</div>
|
|
||||||
<div>{item?.subnav ? item?.iconClosed : item?.iconOpened}</div>
|
|
||||||
</SidebarLink>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Submenu;
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
|
|
||||||
const Createnew = () => {
|
|
||||||
return <div>Createnew</div>;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Createnew;
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
|
|
||||||
export const Createnew = () => {
|
|
||||||
return <></>;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const Mylibrary = () => {
|
|
||||||
return <></>;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const About = () => {
|
|
||||||
return <></>;
|
|
||||||
};
|
|
||||||
|
|
||||||
// export const Revenue = () => {
|
|
||||||
// return <div>Revenue</div>;
|
|
||||||
// };
|
|
||||||
|
|
||||||
// export const Order = () => {
|
|
||||||
// return <div>Order</div>;
|
|
||||||
// };
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
|
|
||||||
if (process.env.NODE_ENV === 'production') {
|
|
||||||
module.exports = require('./cjs/react-refresh-runtime.production.min.js');
|
|
||||||
} else {
|
|
||||||
module.exports = require('./cjs/react-refresh-runtime.development.js');
|
|
||||||
}
|
|
||||||
Loading…
x
Reference in New Issue
Block a user