expand with animation

.changeset/four-snakes-kiss.md

@@ -0,0 +1,7 @@
+---
+"hyperbook-simple-template": minor
+---
+
+The sections can now be opened and closed. The active page will always
+start opened. For each section you can overwrite the default expanded
+state by adding `expanded: true` to the frontmatter of the section.

.changeset/polite-scissors-visit.md

@@ -0,0 +1,5 @@
+---
+"@hyperbook/element-collapsible": minor
+---
+
+The Element Collapsible now has a little animation when opening and closing.

packages/element-collapsible/package.json

@@ -41,7 +41,8 @@
   "dependencies": {
     "@hyperbook/provider": "workspace:*",
     "@hyperbook/store": "workspace:*",
-    "object-hash": "3.0.0"
+    "object-hash": "3.0.0",
+    "react-collapsed": "^3.4.0"
   },
   "peerDependencies": {
     "react": "18.x",

packages/element-collapsible/src/index.css

@@ -9,6 +9,11 @@
   padding: 8px 16px;
   transition: 0.3s;
   border-radius: 4px;
+  margin-bottom: 10px;
+}
+
+.element-collapsible.button + .element-collapsible.content {
+  margin-top: -10px;
 }
 
 .element-collapsible.button.active {
@@ -29,15 +34,9 @@
 
 .element-collapsible.content {
   border-top: none;
-  max-height: 0;
-  overflow: hidden;
   margin-bottom: 10px;
 }
 
-.element-collapsible.content.active {
-  max-height: 100%;
-}
-
 .element-collapsible .inner {
   border-style: solid;
   border-width: 1px;

packages/element-collapsible/src/index.tsx

@@ -3,6 +3,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { createSlice, PayloadAction } from "@hyperbook/store";
 import { useActivePageId } from "@hyperbook/provider";
 import "./index.css";
+import useCollapse from "react-collapsed";
 
 type DirectiveCollapsibleProps = {
   children?: ReactNode;
@@ -15,15 +16,18 @@ const DirectiveCollapsible: FC<DirectiveCollapsibleProps> = ({
   id,
   title,
 }) => {
-  const [activePageId] = useActivePageId();
-
   if (!id) {
     id = title;
   }
 
+  const [activePageId] = useActivePageId();
   id = activePageId + "." + id;
 
   let active = useSelector(selectActive(id));
+  const { getCollapseProps, getToggleProps } = useCollapse({
+    isExpanded: active,
+  });
+
   const dispatch = useDispatch();
 
   const toggleActive = () => {
@@ -33,17 +37,19 @@ const DirectiveCollapsible: FC<DirectiveCollapsibleProps> = ({
   return (
     <>
       <button
-        id={`collapsibel-${id}`}
+        {...getToggleProps({
+          onClick: () => toggleActive(),
+        })}
         className={[
           "element-collapsible",
           "button",
           active ? "active" : "",
         ].join(" ")}
-        onClick={() => toggleActive()}
       >
         {title}
       </button>
       <div
+        {...getCollapseProps()}
         className={[
           "element-collapsible",
           "content",
@@ -56,7 +62,7 @@ const DirectiveCollapsible: FC<DirectiveCollapsibleProps> = ({
   );
 };
 
-type ElementCollapsibleState = Record<string, string>;
+type ElementCollapsibleState = Record<string, boolean>;
 
 const initialState: ElementCollapsibleState = {};
 

templates/simple/package.json

@@ -29,6 +29,7 @@
     "gray-matter": "4.0.3",
     "next": "12.3.1",
     "react": "18.2.0",
+    "react-collapsed": "^3.4.0",
     "react-dom": "18.2.0",
     "react-icons": "4.4.0",
     "react-redux": "8.0.4",

templates/simple/src/colors.css

@@ -84,7 +84,7 @@ header.inverted > .branding {
   border-color: var(--color-spacer);
 }
 
-.section > .name.empty {
+.section .name.empty {
   color: var(--color-text-deactivated);
 }
 

templates/simple/src/components/Navigation.tsx

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import useCollapse from "react-collapsed";
 import {
   Navigation as NavigationProps,
   Section as SectionProps,
@@ -28,20 +29,38 @@ const Section = ({
   href,
   pages,
   sections,
+  expanded,
   current,
 }: S) => {
+  const isActive = current?.href.startsWith(href);
+  const { getCollapseProps, getToggleProps, isExpanded } = useCollapse({
+    defaultExpanded: isActive || expanded,
+  });
   return (
     <div className={virtual ? "" : "section"}>
-      {virtual ? null : isEmpty ? (
-        <span className="name empty">{name}</span>
-      ) : (
-        <Link href={href}>
-          <a className={current?.href === href ? `name active` : "name"}>
-            {name}
-          </a>
-        </Link>
-      )}
-      <div className="links">
+      <div
+        className={[
+          "name",
+          virtual || isEmpty ? "empty" : "",
+          current?.href === href ? "active" : "",
+        ].join(" ")}
+      >
+        {virtual ? null : isEmpty ? (
+          <span className="label">{name}</span>
+        ) : (
+          <Link href={href}>
+            <a className="label">{name}</a>
+          </Link>
+        )}
+        <button
+          className="toggle"
+          {...getToggleProps()}
+          aria-label={isExpanded ? "Close" : "Open"}
+        >
+          {isExpanded ? "➖" : "➕"}
+        </button>
+      </div>
+      <div className="links" {...getCollapseProps()}>
         {pages.length > 0 && (
           <ul className="pages">
             {pages

templates/simple/src/styles.css

@@ -255,6 +255,7 @@ nav li + li {
 }
 
 .section > .name {
+  display: flex;
   text-decoration: none;
   padding: 10px;
   border-width: 1px;
@@ -263,6 +264,17 @@ nav li + li {
   user-select: none;
 }
 
+.section > .name > .label {
+  flex: 1;
+}
+
+.section > .name > .toggle {
+  text-align: right;
+  background: none;
+  border: none;
+  font-size: 13px;
+}
+
 .section .section {
   margin-left: 16px;
   margin-bottom: 0px;

templates/simple/src/utils/navigation.ts

@@ -20,6 +20,7 @@ export type Page = {
 export type Section = Omit<Page, "hide"> & {
   hide?: boolean;
   virtual?: boolean;
+  expanded?: boolean;
   pages: Page[]; // md-files
   sections: Section[]; // folders
 };

website/book/configuration/section.md

@@ -19,6 +19,7 @@ To summarize, here are the properties you can set in the frontmatter:
 | :------- | :--------------------------------------------------------------------------------------------------------------------- |
 | ...      | Every Property from a [page](/configuration/page)                                                                      |
 | virtual  | Everything will appear on the same level as the parent. Be aware that the index property does not work across folders. |
+| expanded | Defines whether the section is expanded on page load.                                                                  |
 
 If the `index.md` file only contains a front matter and is otherwise
 empty, it will appear in the navigation as a non-clickable item.