first commit
This commit is contained in:
@@ -0,0 +1,49 @@
|
||||
'use client'
|
||||
|
||||
|
||||
|
||||
import React from 'react'
|
||||
import ScrollspyNav from 'react-scrollspy-nav'
|
||||
|
||||
export default function DocScrollNav() {
|
||||
return (
|
||||
<nav className="d-none d-xl-block col-xl-2 doc-sideNav">
|
||||
<div className="wrapper">
|
||||
<nav className="main-side-nav">
|
||||
<ScrollspyNav
|
||||
scrollTargetIds={[
|
||||
"installing",
|
||||
"verifying",
|
||||
"manual-installation",
|
||||
"running-example",
|
||||
"launching-server",
|
||||
"loading-dialog",
|
||||
]}
|
||||
activeNavClass="active"
|
||||
offset={-90}
|
||||
scrollDuration="300"
|
||||
>
|
||||
<a href="#installing" className="nav-link">
|
||||
Installing Deski
|
||||
</a>
|
||||
<a href="#verifying" className="nav-link">
|
||||
Verifying Installation
|
||||
</a>
|
||||
<a href="#manual-installation" className="nav-link">
|
||||
Manual Installation
|
||||
</a>
|
||||
<a href="#running-example" className="nav-link">
|
||||
Running example website
|
||||
</a>
|
||||
<a href="#launching-server" className="nav-link">
|
||||
Launching the server
|
||||
</a>
|
||||
<a href="#loading-dialog" className="nav-link">
|
||||
Loading dialog
|
||||
</a>
|
||||
</ScrollspyNav>
|
||||
</nav>
|
||||
</div>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
|
||||
'use client'
|
||||
|
||||
import ScrollspyNav from 'react-scrollspy-nav'
|
||||
import React from 'react'
|
||||
|
||||
export default function DocScrollNavTwo() {
|
||||
return (
|
||||
<nav className="d-none d-xl-block col-xl-2 doc-sideNav">
|
||||
<div className="wrapper">
|
||||
<nav className="main-side-nav">
|
||||
<ScrollspyNav
|
||||
scrollTargetIds={[
|
||||
"installing",
|
||||
"verifying",
|
||||
"manual-installation",
|
||||
"running-example",
|
||||
"launching-server",
|
||||
"loading-dialog",
|
||||
]}
|
||||
activeNavClass="active"
|
||||
offset={-90}
|
||||
scrollDuration="300"
|
||||
>
|
||||
<a href="#installing" className="nav-link">
|
||||
Installing Deski
|
||||
</a>
|
||||
<a href="#verifying" className="nav-link">
|
||||
Verifying Installation
|
||||
</a>
|
||||
<a href="#manual-installation" className="nav-link">
|
||||
Manual Installation
|
||||
</a>
|
||||
<a href="#running-example" className="nav-link">
|
||||
Running example website
|
||||
</a>
|
||||
<a href="#launching-server" className="nav-link">
|
||||
Launching the server
|
||||
</a>
|
||||
<a href="#loading-dialog" className="nav-link">
|
||||
Loading dialog
|
||||
</a>
|
||||
</ScrollspyNav>
|
||||
</nav>
|
||||
</div>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
|
||||
|
||||
'use client'
|
||||
import React, { useState } from "react";
|
||||
|
||||
import DocSidebarContent from "./DocSidebarContent";
|
||||
import Image from "next/image";
|
||||
|
||||
export default function DocSidebar() {
|
||||
const handleSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
};
|
||||
const [click, setClick] = useState(false);
|
||||
const handleClick = () => setClick(!click);
|
||||
return (
|
||||
<div className="col-md-3 col-xl-2 doc-sidebar">
|
||||
<div className="clearfix">
|
||||
<div className="mob-header">
|
||||
<button className="toggler-menu" onClick={handleClick}>
|
||||
<div className={click ? "active" : ""}>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
{/* End Header */}
|
||||
</div>
|
||||
<nav
|
||||
className={
|
||||
click
|
||||
? "doc-links collapse clearfix nav-fix show"
|
||||
: "doc-links collapse clearfix nav-fix"
|
||||
}
|
||||
id="doc-sidebar-nav"
|
||||
>
|
||||
<div className="search-form">
|
||||
<form onClick={handleSubmit}>
|
||||
<input type="text" placeholder="Search here.." />
|
||||
<button>
|
||||
<Image width="17" height="16" src="/images/icon/59.svg" alt="icon" />
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<DocSidebarContent />
|
||||
</nav>
|
||||
{/* /.doc-links */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,191 @@
|
||||
|
||||
'use client'
|
||||
|
||||
import React from "react";
|
||||
|
||||
import {
|
||||
Accordion,
|
||||
AccordionItem,
|
||||
AccordionItemHeading,
|
||||
AccordionItemButton,
|
||||
AccordionItemPanel,
|
||||
} from "react-accessible-accordion";
|
||||
import HeaderThree from "../header/HeaderThree";
|
||||
|
||||
const FaqContent = [
|
||||
{
|
||||
title: " Getting Started",
|
||||
sidebarContent: [
|
||||
{
|
||||
itemName: "Quick start",
|
||||
activeClass: "",
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
itemName: " Installation",
|
||||
activeClass: "active",
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
itemName: "Site Preparation",
|
||||
activeClass: "",
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
itemName: "Manual Installation",
|
||||
activeClass: "",
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
itemName: "Publishing your site",
|
||||
activeClass: "",
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
itemName: "Deski",
|
||||
activeClass: "",
|
||||
link: "",
|
||||
},
|
||||
],
|
||||
expand: "a",
|
||||
},
|
||||
{
|
||||
title: " Customization",
|
||||
sidebarContent: [
|
||||
{
|
||||
itemName: "Theme color",
|
||||
activeClass: "",
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
itemName: " Header",
|
||||
activeClass: "",
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
itemName: "Blog widget",
|
||||
activeClass: "",
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
itemName: "Theme Footer",
|
||||
activeClass: "",
|
||||
link: "",
|
||||
},
|
||||
],
|
||||
expand: "b",
|
||||
},
|
||||
|
||||
{
|
||||
title: "Layout",
|
||||
sidebarContent: [
|
||||
{
|
||||
itemName: "Box Layout",
|
||||
activeClass: "",
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
itemName: "Full width Layout",
|
||||
activeClass: "",
|
||||
link: "",
|
||||
},
|
||||
],
|
||||
expand: "c",
|
||||
},
|
||||
|
||||
{
|
||||
title: "Table of Content",
|
||||
sidebarContent: [
|
||||
{
|
||||
itemName: "HTML Structure",
|
||||
activeClass: "",
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
itemName: "Favicon Settings",
|
||||
activeClass: "",
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
itemName: "Logo Settings",
|
||||
activeClass: "",
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
itemName: "CSS Structure",
|
||||
activeClass: "",
|
||||
link: "",
|
||||
},
|
||||
],
|
||||
expand: "d",
|
||||
},
|
||||
|
||||
{
|
||||
title: "API",
|
||||
sidebarContent: [
|
||||
{
|
||||
itemName: "Getting started",
|
||||
activeClass: "",
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
itemName: " Subscriptions",
|
||||
activeClass: "",
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
itemName: "Invoices",
|
||||
activeClass: "",
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
itemName: "Refunds",
|
||||
activeClass: "",
|
||||
link: "",
|
||||
},
|
||||
],
|
||||
expand: "e",
|
||||
},
|
||||
];
|
||||
|
||||
const DocSidebarContent = () => {
|
||||
return (
|
||||
<div className="accordion-style-two doc-sidebar-menu">
|
||||
|
||||
{/* End Page SEO Content */}
|
||||
<HeaderThree />
|
||||
{/* End Header */}
|
||||
|
||||
<div className="faq-wrraper ">
|
||||
<Accordion preExpanded={["a"]} allowZeroExpanded>
|
||||
{FaqContent.map((item, i) => (
|
||||
<AccordionItem className="card" key={i} uuid={item.expand}>
|
||||
<AccordionItemHeading className="card-header">
|
||||
<AccordionItemButton>
|
||||
<h4 className="mb-0">
|
||||
<button className="btn btn-link">{item.title}</button>{" "}
|
||||
</h4>
|
||||
</AccordionItemButton>
|
||||
</AccordionItemHeading>
|
||||
{/* Accordion Heading */}
|
||||
<AccordionItemPanel className="card-body fadeInUp">
|
||||
<ul className="sub-menu">
|
||||
{item.sidebarContent.map((val, i) => (
|
||||
<li key={i}>
|
||||
<a className={val.activeClass} href={val.link}>
|
||||
{val.itemName}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</AccordionItemPanel>
|
||||
{/* Accordion Body Content */}
|
||||
</AccordionItem>
|
||||
))}
|
||||
</Accordion>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DocSidebarContent;
|
||||
@@ -0,0 +1,49 @@
|
||||
|
||||
|
||||
'use client'
|
||||
import React, { useState } from "react";
|
||||
import Image from "next/image";
|
||||
import DocSidebarContent from "./DocSidebarContent";
|
||||
|
||||
export default function DocSidebarThree() {
|
||||
const handleSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
};
|
||||
const [click, setClick] = useState(false);
|
||||
const handleClick = () => setClick(!click);
|
||||
return (
|
||||
<div className="col-xl-3 col-md-4 doc-sidebar">
|
||||
<div className="clearfix">
|
||||
<div className="mob-header">
|
||||
<button className="toggler-menu" onClick={handleClick}>
|
||||
<div className={click ? "active" : ""}>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
{/* End Header */}
|
||||
</div>
|
||||
<nav
|
||||
className={
|
||||
click
|
||||
? "doc-links collapse clearfix nav-fix show"
|
||||
: "doc-links collapse clearfix nav-fix"
|
||||
}
|
||||
id="doc-sidebar-nav"
|
||||
>
|
||||
<div className="search-form">
|
||||
<form onClick={handleSubmit}>
|
||||
<input type="text" placeholder="Search here.." />
|
||||
<button>
|
||||
<Image width={17} height={16} style={{height:'fit-content'}} src="/images/icon/59.svg" alt="icon" />
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<DocSidebarContent />
|
||||
</nav>
|
||||
{/* /.doc-links */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user