1"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[6971],{56842:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>a,default:()=>h,frontMatter:()=>o,metadata:()=>r,toc:()=>l});var i=t(85893),s=t(11151);const o={sidebar_position:2},a="Navigation Elements",r={id:"tutorials/progress/navigation",title:"Navigation Elements",description:"For more advanced slide themes it is common to incorporate navigation elements. See e.g. the dewdrop theme.",source:"@site/docs/tutorials/progress/navigation.md",sourceDirName:"tutorials/progress",slug:"/tutorials/progress/navigation",permalink:"/docs/tutorials/progress/navigation",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/en/tutorials/progress/navigation.md",tags:[],version:"current",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"tutorialSidebar",previous:{title:"Slide Counters and Progress",permalink:"/docs/tutorials/progress/counters"},next:{title:"Section Utilities",permalink:"/docs/tutorials/progress/sections"}},d={},l=[{value:"Left-Right Navigation",id:"left-right-navigation",level:2},{value:"Mini-Slides Navigation",id:"mini-slides-navigation",level:2},{value:"Sidebar Navigation",id:"sidebar-navigation",level:2}];function c(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",...(0,s.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"navigation-elements",children:"Navigation Elements"}),"\n",(0,i.jsxs)(n.p,{children:["For more advanced slide themes it is common to incorporate navigation elements. See e.g. the ",(0,i.jsx)(n.a,{href:"https://touying-typ.github.io/docs/themes/dewdrop",children:"dewdrop theme"}),"."]}),"\n",(0,i.jsx)(n.h2,{id:"left-right-navigation",children:"Left-Right Navigation"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://touying-typ.github.io/docs/reference/core/lr-navigation",children:(0,i.jsx)(n.code,{children:"lr-navigation"})})," creates clickable previous and next controls. It can navigate by slides and subslides (physical pages), or both."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import themes.simple: *\n\n#show: simple-theme.with(\n footer: self=>[\n #align(center,\n lr-navigation(\n self: self,\n mode: "both",\n show-useless: false,\n nav: (\n filled: sym.triangle.filled,\n stroked: sym.chevron,\n ),\n )\n )\n ],\n)\n\n= Navigation Demo\n\n== Slide A\n\nThis slide has a pause.\n\n#pause\n\nThis appears on the next subslide.\n\n== Slide B\n\nNow the page-level links can jump between full slides.\n'})}),"\n",(0,i.jsx)(n.img,{alt:"Touying example output",src:t(90969).Z+"",width:"3440",height:"1966"}),"\n",(0,i.jsx)(n.h2,{id:"mini-slides-navigation",children:"Mini-Slides Navigation"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://touying-typ.github.io/docs/reference/components/mini-slides",children:(0,i.jsx)(n.code,{children:"components.mini-slides"})})," shows section and subsection links with small per-slide dots."]}),"\n",(0,i.jsx)(n.p,{children:"This pattern works well in the header when you want compact progress feedback without a full sidebar or a progressbar."}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import themes.simple: *\n\n#show: simple-theme.with(\n\tconfig-page(\n\t\tmargin: (top: 4em, bottom: 2em, x: 2em),\n\t\theader-ascent: 2em,\n\t),\n header: self => components.mini-slides(\n self: self,\n fill: self.colors.primary,\n display-section: true,\n display-subsection: true,\n linebreaks: true,\n short-heading: true,\n ),\n)\n\n= Introduction\n\n== Motivation\n\nThe mini-slides row updates as you move.\n\n== Scope\n\nAnother subsection.\n\n= Methods\n\n== Setup\n\nCurrent section is highlighted.\n'})}),"\n",(0,i.jsx)(n.img,{alt:"Touying example output",src:t(35697).Z+"",width:"3440",height:"2937"}),"\n",(0,i.jsx)(n.h2,{id:"sidebar-navigation",children:"Sidebar Navigation"}),"\n",(0,i.jsxs)(n.p,{children:["Touying does not provide a single ",(0,i.jsx)(n.code,{children:"sidebar-navigation"})," function. In practice, a sidebar is built with ",(0,i.jsx)(n.a,{href:"https://touying-typ.github.io/docs/reference/components/custom-progressive-outline",children:(0,i.jsx)(n.code,{children:"components.custom-progressive-outline"})}),", as done by the Dewdrop theme."]}),"\n",(0,i.jsx)(n.p,{children:"The quickest way to use this style is to enable Dewdrop's built-in sidebar navigation and tune its options:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import themes.dewdrop: *\n\n#show: dew
1drop-theme.with(\n\taspect-ratio: "16-9",\n\tnavigation: "sidebar",\n\tsidebar: (\n\t\twidth: 11em,\n\t\tfilled: false,\n\t\tnumbered: true,\n\t\tindent: .8em,\n\t\tshort-heading: true,\n\t),\n)\n#outline-slide()\n\n= Part I <touying:skip>\n\n== Problem\n\nSidebar highlights where you are in the outline.\n\n== Constraints\n\nIndented subsection entries.\n\n= Part II\n\n== Solution\n\nThe active section and subsection are emphasized automatically.\n'})}),"\n",(0,i.jsx)(n.img,{alt:"Touying example output",src:t(64820).Z+"",width:"3440",height:"2937"}),"\n",(0,i.jsx)(n.p,{children:"If you want to copy this approach, take a look at how it is implemented for the dewdrop theme."})]})}function h(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},35697:(e,n,t)=>{t.d(n,{Z:()=>i});const i=t.p+"assets/images/53a6474e-cdf6133aef3326733c25c70272190bd1.png"},64820:(e,n,t)=>{t.d(n,{Z:()=>i});const i=t.p+"assets/images/9c3547c6-dcd92faddb3de1f4ac2e5b7f1ed50929.png"},90969:(e,n,t)=>{t.d(n,{Z:()=>i});const i=t.p+"assets/images/f4c892d5-47ef044dc44339122f361ce971cbf822.png"},11151:(e,n,t)=>{t.d(n,{Z:()=>r,a:()=>a});var i=t(67294);const s={},o=i.createContext(s);function a(e){const n=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),i.createElement(o.Provider,{value:n},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.