Skip to content

W
wiki-js
Unverified Commit 269040ed authored by NGPixel's avatar NGPixel
Browse files
Options

feat: sidebar nav editor (wip)

parent fa4b7575
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 223 additions and 53 deletions
server/locales/en.json
View file @ 269040ed
......@@ -1683,6 +1683,25 @@
"history.restore.confirmText": "Are you sure you want to restore this page content as it was on {date}? This version will be copied on top of the current history. As such, newer versions will still be preserved.",
"history.restore.confirmTitle": "Restore page version?",
"history.restore.success": "Page version restored succesfully!",
"navEdit.editMenuItems": "Edit Menu Items",
"navEdit.header": "Header",
"navEdit.icon": "Icon",
"navEdit.iconHint": "Icon to display to the left of the menu item.",
"navEdit.label": "Label",
"navEdit.labelHint": "Text to display on the menu item.",
"navEdit.link": "Link",
"navEdit.nestItem": "Nest Item",
"navEdit.openInNewWindow": "Open in New Window",
"navEdit.openInNewWindowHint": "Whether the link should open in a new window / tab.",
"navEdit.separator": "Separator",
"navEdit.target": "Target",
"navEdit.targetHint": "Target path or external link to point to.",
"navEdit.title": "Edit Navigation",
"navEdit.unnestItem": "Unnest Item",
"navEdit.visibility": "Visibility",
"navEdit.visibilityAll": "Everyone",
"navEdit.visibilityHint": "Whether to show the menu item to everyone or just selected groups.",
"navEdit.visibilityLimited": "Selected Groups",
"pageDeleteDialog.confirm": "Are you sure you want to delete the page {name}?",
"pageDeleteDialog.deleteSuccess": "Page deleted successfully.",
"pageDeleteDialog.pageId": "Page ID {id}",
......
ux/public/_assets/icons/fluent-sidebar-menu.svg 0 → 100644
View file @ 269040ed
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="96px" height="96px"><path fill="#50e6ff" d="M33.755,6H8C6.895,6,6,6.895,6,8v32c0,1.105,0.895,2,2,2h28V8.245C36,7.005,34.995,6,33.755,6z"/><linearGradient id="_UG2OqS6EDhFYZ28lunJga" x1="25" x2="42" y1="24" y2="24" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1951a8"/><stop offset=".175" stop-color="#1955b0"/><stop offset=".505" stop-color="#195ab9"/><stop offset="1" stop-color="#195bbc"/></linearGradient><path fill="url(#_UG2OqS6EDhFYZ28lunJga)" d="M25,6h15c1.105,0,2,0.895,2,2v32c0,1.105-0.895,2-2,2H25V6z"/><path fill="#057093" d="M10.667,11H9.333C9.149,11,9,10.851,9,10.667V9.333C9,9.149,9.149,9,9.333,9h1.333 C10.851,9,11,9.149,11,9.333v1.333C11,10.851,10.851,11,10.667,11z"/><path fill="#057093" d="M21.567,11h-8.134C13.194,11,13,10.806,13,10.567V9.433C13,9.194,13.194,9,13.433,9h8.134 C21.806,9,22,9.194,22,9.433v1.134C22,10.806,21.806,11,21.567,11z"/><path fill="#057093" d="M10.667,15H9.333C9.149,15,9,14.851,9,14.667v-1.333C9,13.149,9.149,13,9.333,13h1.333 C10.851,13,11,13.149,11,13.333v1.333C11,14.851,10.851,15,10.667,15z"/><path fill="#057093" d="M21.567,15h-8.134C13.194,15,13,14.806,13,14.567v-1.134C13,13.194,13.194,13,13.433,13h8.134 C21.806,13,22,13.194,22,13.433v1.134C22,14.806,21.806,15,21.567,15z"/><path fill="#057093" d="M10.667,19H9.333C9.149,19,9,18.851,9,18.667v-1.333C9,17.149,9.149,17,9.333,17h1.333 C10.851,17,11,17.149,11,17.333v1.333C11,18.851,10.851,19,10.667,19z"/><path fill="#057093" d="M21.567,19h-8.134C13.194,19,13,18.806,13,18.567v-1.134C13,17.194,13.194,17,13.433,17h8.134 C21.806,17,22,17.194,22,17.433v1.134C22,18.806,21.806,19,21.567,19z"/><path fill="#057093" d="M10.667,23H9.333C9.149,23,9,22.851,9,22.667v-1.333C9,21.149,9.149,21,9.333,21h1.333 C10.851,21,11,21.149,11,21.333v1.333C11,22.851,10.851,23,10.667,23z"/><path fill="#057093" d="M21.567,23h-8.134C13.194,23,13,22.806,13,22.567v-1.134C13,21.194,13.194,21,13.433,21h8.134 C21.806,21,22,21.194,22,21.433v1.134C22,22.806,21.806,23,21.567,23z"/><path fill="#057093" d="M10.667,27H9.333C9.149,27,9,26.851,9,26.667v-1.333C9,25.149,9.149,25,9.333,25h1.333 C10.851,25,11,25.149,11,25.333v1.333C11,26.851,10.851,27,10.667,27z"/><path fill="#057093" d="M21.567,27h-8.134C13.194,27,13,26.806,13,26.567v-1.134C13,25.194,13.194,25,13.433,25h8.134 C21.806,25,22,25.194,22,25.433v1.134C22,26.806,21.806,27,21.567,27z"/><path fill="#057093" d="M10.667,31H9.333C9.149,31,9,30.851,9,30.667v-1.333C9,29.149,9.149,29,9.333,29h1.333 C10.851,29,11,29.149,11,29.333v1.333C11,30.851,10.851,31,10.667,31z"/><path fill="#057093" d="M21.567,31h-8.134C13.194,31,13,30.806,13,30.567v-1.134C13,29.194,13.194,29,13.433,29h8.134 C21.806,29,22,29.194,22,29.433v1.134C22,30.806,21.806,31,21.567,31z"/><path fill="#057093" d="M10.667,35H9.333C9.149,35,9,34.851,9,34.667v-1.333C9,33.149,9.149,33,9.333,33h1.333 C10.851,33,11,33.149,11,33.333v1.333C11,34.851,10.851,35,10.667,35z"/><path fill="#057093" d="M21.567,35h-8.134C13.194,35,13,34.806,13,34.567v-1.134C13,33.194,13.194,33,13.433,33h8.134 C21.806,33,22,33.194,22,33.433v1.134C22,34.806,21.806,35,21.567,35z"/><path fill="#057093" d="M10.667,39H9.333C9.149,39,9,38.851,9,38.667v-1.333C9,37.149,9.149,37,9.333,37h1.333 C10.851,37,11,37.149,11,37.333v1.333C11,38.851,10.851,39,10.667,39z"/><path fill="#057093" d="M21.567,39h-8.134C13.194,39,13,38.806,13,38.567v-1.134C13,37.194,13.194,37,13.433,37h8.134 C21.806,37,22,37.194,22,37.433v1.134C22,38.806,21.806,39,21.567,39z"/></svg>
\ No newline at end of file
ux/public/_assets/icons/ultraviolet-external-link.svg 0 → 100644
View file @ 269040ed
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="80px" height="80px"><path fill="#dff0fe" d="M1.5 5.5H34.5V38.5H1.5z"/><path fill="#4788c7" d="M34,6v32H2V6H34 M35,5H1v34h34V5L35,5z"/><path fill="#dff0fe" d="M32.667 11.555H35V19H32.667zM21 5H28.444V7.333H21z"/><path fill="#98ccfd" d="M18.707 16L28.707 6 24.207 1.5 38.5 1.5 38.5 15.793 34 11.293 24 21.293z"/><path fill="#4788c7" d="M38,2v12.586l-3.293-3.293L34,10.586l-0.707,0.707L24,20.586L19.414,16l9.293-9.293L29.414,6 l-0.707-0.707L25.414,2H38 M39,1H23l5,5L18,16l6,6l10-10l5,5V1L39,1z"/><path fill="#4788c7" d="M34.5 21L34.5 21c.275 0 .5-.225.5-.5v-2c0-.275-.225-.5-.5-.5l0 0c-.275 0-.5.225-.5.5v2C34 20.775 34.225 21 34.5 21zM19.5 6h2C21.775 6 22 5.775 22 5.5v0C22 5.225 21.775 5 21.5 5h-2C19.225 5 19 5.225 19 5.5v0C19 5.775 19.225 6 19.5 6z"/></svg>
\ No newline at end of file
ux/public/_assets/icons/ultraviolet-spring.svg 0 → 100644
View file @ 269040ed
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="80px" height="80px"><path fill="#dff0fe" d="M20,19.035C18.642,16.768,14.5,9.634,14.5,7c0-3.032,2.468-5.5,5.5-5.5s5.5,2.468,5.5,5.5 C25.5,9.634,21.358,16.768,20,19.035z"/><path fill="#4788c7" d="M20,2c2.757,0,5,2.243,5,5c0,1.966-2.74,7.247-5,11.068C17.74,14.247,15,8.966,15,7 C15,4.243,17.243,2,20,2 M20,1c-3.314,0-6,2.686-6,6s6,13,6,13s6-9.686,6-13S23.314,1,20,1L20,1z"/><path fill="#98ccfd" d="M21,11c0,0.552-1,4-1,4s-1-3.448-1-4c0-0.552,0.448-1,1-1C20.552,10,21,10.448,21,11z"/><path fill="#dff0fe" d="M20,38.5c-3.032,0-5.5-2.468-5.5-5.5c0-2.634,4.142-9.768,5.5-12.035 c1.358,2.268,5.5,9.401,5.5,12.035C25.5,36.032,23.032,38.5,20,38.5z"/><path fill="#4788c7" d="M20,21.932c2.26,3.821,5,9.102,5,11.068c0,2.757-2.243,5-5,5s-5-2.243-5-5 C15,31.034,17.74,25.753,20,21.932 M20,20c0,0-6,9.686-6,13s2.686,6,6,6s6-2.686,6-6S20,20,20,20L20,20z"/><path fill="#98ccfd" d="M19,29c0-0.552,1-4,1-4s1,3.448,1,4c0,0.552-0.448,1-1,1C19.448,30,19,29.552,19,29z"/><path fill="#dff0fe" d="M17.483,19.531c-5.906,0-10.095-0.462-11.491-1.268c-2.627-1.517-3.529-4.888-2.014-7.514 c0.979-1.697,2.807-2.751,4.769-2.751c0.96,0,1.909,0.255,2.745,0.737c2.078,1.201,5.93,7.629,7.675,10.781 C18.738,19.525,18.161,19.531,17.483,19.531C17.484,19.531,17.484,19.531,17.483,19.531z"/><path fill="#4788c7" d="M8.747,8.499c0.872,0,1.734,0.232,2.494,0.671c1.701,0.982,4.903,5.991,7.082,9.858 c-0.258,0.002-0.541,0.003-0.842,0.003c-5.735,0-9.936-0.449-11.239-1.201c-1.157-0.668-1.984-1.746-2.33-3.036 S3.744,12.157,4.412,11C5.302,9.457,6.964,8.499,8.747,8.499 M8.747,7.499c-2.074,0-4.09,1.076-5.202,3.001 c-1.657,2.87-0.674,6.539,2.196,8.196c2.012,1.162,8.213,1.335,11.739,1.335C18.984,20.031,20,20,20,20S14.611,9.961,11.742,8.304 C10.797,7.758,9.765,7.499,8.747,7.499L8.747,7.499z"/><path fill="#98ccfd" d="M12.706,14.634C13.184,14.91,15.67,17.5,15.67,17.5s-3.486-0.858-3.964-1.134 C11.228,16.09,11.064,15.478,11.34,15C11.616,14.522,12.228,14.358,12.706,14.634z"/><path fill="#dff0fe" d="M31.253,32.001c-0.96,0-1.909-0.255-2.745-0.737c-2.078-1.201-5.93-7.629-7.675-10.781 c0.43-0.008,1.01-0.014,1.69-0.014c5.903,0,10.089,0.462,11.484,1.268c2.627,1.517,3.529,4.888,2.014,7.514 C35.042,30.947,33.215,32.001,31.253,32.001L31.253,32.001z"/><path fill="#4788c7" d="M22.519,20.968c5.734,0,9.936,0.449,11.239,1.201c1.157,0.668,1.984,1.746,2.33,3.036 s0.168,2.637-0.5,3.794c-0.891,1.543-2.552,2.501-4.336,2.501c-0.872,0-1.734-0.232-2.494-0.671 c-1.701-0.982-4.903-5.991-7.082-9.858C21.935,20.97,22.218,20.968,22.519,20.968 M22.519,19.968C21.017,19.968,20,20,20,20 s5.389,10.039,8.258,11.696c0.945,0.545,1.977,0.805,2.994,0.805c2.074,0,4.09-1.076,5.202-3.001 c1.657-2.87,0.674-6.539-2.196-8.196C32.246,20.142,26.045,19.968,22.519,19.968L22.519,19.968z"/><path fill="#98ccfd" d="M27.294,25.366C26.816,25.09,24.33,22.5,24.33,22.5s3.486,0.858,3.964,1.134S28.936,24.522,28.66,25 C28.384,25.478,27.772,25.642,27.294,25.366z"/><path fill="#dff0fe" d="M8.747,32.001c-1.962,0-3.789-1.054-4.769-2.751c-1.516-2.626-0.613-5.997,2.014-7.514 c1.396-0.806,5.581-1.268,11.484-1.268c0.679,0,1.258,0.006,1.688,0.013c-1.285,2.31-5.393,9.465-7.673,10.782 C10.656,31.746,9.707,32.001,8.747,32.001L8.747,32.001z"/><path fill="#4788c7" d="M17.481,20.968c0.302,0,0.584,0.001,0.843,0.003c-2.179,3.867-5.38,8.876-7.082,9.858 c-0.76,0.439-1.623,0.671-2.494,0.671c-1.784,0-3.445-0.958-4.336-2.501c-0.668-1.157-0.845-2.504-0.5-3.794 s1.173-2.368,2.33-3.036C7.545,21.418,11.746,20.968,17.481,20.968 M17.481,19.968c-3.526,0-9.727,0.174-11.739,1.335 c-2.87,1.657-3.853,5.326-2.196,8.196c1.111,1.925,3.128,3.001,5.202,3.001c1.018,0,2.049-0.259,2.994-0.805 C14.611,30.039,20,20,20,20S18.983,19.968,17.481,19.968L17.481,19.968z"/><path fill="#98ccfd" d="M11.706,23.634c0.478-0.276,3.964-1.134,3.964-1.134s-2.486,2.59-2.964,2.866S11.616,25.478,11.34,25 C11.064,24.522,11.228,23.91,11.706,23.634z"/><g><path fill="#dff0fe" d="M22.517,19.531c-0.676,0-1.253-0.006-1.682-0.014c1.285-2.31,5.393-9.464,7.673-10.781 c0.836-0.482,1.785-0.737,2.745-0.737c1.962,0,3.789,1.054,4.769,2.751c1.516,2.626,0.613,5.997-2.014,7.514 C32.611,19.069,28.423,19.531,22.517,19.531C22.516,19.531,22.517,19.531,22.517,19.531z"/><path fill="#4788c7" d="M31.253,8.499c1.784,0,3.445,0.958,4.336,2.501c0.668,1.157,0.845,2.504,0.5,3.794 s-1.173,2.368-2.33,3.036c-1.303,0.752-5.505,1.201-11.239,1.201c-0.302,0-0.584-0.001-0.842-0.003 c2.179-3.867,5.38-8.876,7.082-9.858C29.518,8.731,30.381,8.499,31.253,8.499 M31.253,7.499c-1.018,0-2.049,0.259-2.994,0.805 C25.389,9.961,20,20,20,20s1.017,0.031,2.519,0.031c3.526,0,9.727-0.174,11.739-1.335c2.87-1.657,3.853-5.326,2.196-8.196 C35.343,8.575,33.326,7.499,31.253,7.499L31.253,7.499z"/></g><path fill="#98ccfd" d="M28.294,16.366C27.816,16.642,24.33,17.5,24.33,17.5s2.486-2.59,2.964-2.866 c0.478-0.276,1.09-0.112,1.366,0.366C28.936,15.478,28.772,16.09,28.294,16.366z"/><g><path fill="#b6dcfe" d="M20 14.5A5.5 5.5 0 1 0 20 25.5A5.5 5.5 0 1 0 20 14.5Z"/><path fill="#4788c7" d="M20,15c2.757,0,5,2.243,5,5s-2.243,5-5,5s-5-2.243-5-5S17.243,15,20,15 M20,14 c-3.314,0-6,2.686-6,6s2.686,6,6,6s6-2.686,6-6S23.314,14,20,14L20,14z"/></g></svg>
\ No newline at end of file
ux/public/_assets/icons/ultraviolet-typography.svg 0 → 100644
View file @ 269040ed
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="80px" height="80px"><path fill="#dff0fe" d="M28.249,35.5l-2.061-7H13.812l-2.061,7H5.702l10.721-31h7.405l10.475,31H28.249z M15.283,23.5 h9.434L20.51,9.213h-1.022L15.283,23.5z"/><path fill="#4788c7" d="M23.47,5l10.137,30h-4.984l-1.849-6.282L26.562,28h-0.748H14.185h-0.748l-0.211,0.718L11.377,35 H6.404L16.779,5H23.47 M14.615,24h1.337h8.097h1.337l-0.378-1.282L21.096,9.43l-0.211-0.718h-0.748h-0.274h-0.748L18.903,9.43 l-3.911,13.287L14.615,24 M24.187,4h-8.12L5,36h7.125l2.06-7h11.629l2.061,7H35L24.187,4L24.187,4z M15.951,23l3.911-13.287h0.274 L24.048,23H15.951L15.951,23z"/></svg>
\ No newline at end of file
ux/public/_assets/icons/ultraviolet-user-groups.svg 0 → 100644
View file @ 269040ed
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="80px" height="80px"><path fill="#dff0fe" d="M32 12.5A4.5 4.5 0 1 0 32 21.5A4.5 4.5 0 1 0 32 12.5Z"/><path fill="#4788c7" d="M32,13c2.206,0,4,1.794,4,4s-1.794,4-4,4s-4-1.794-4-4S29.794,13,32,13 M32,12 c-2.761,0-5,2.239-5,5s2.239,5,5,5s5-2.239,5-5S34.761,12,32,12L32,12z"/><path fill="#98ccfd" d="M24.5,32.5V32c0-4.136,3.364-7.5,7.5-7.5s7.5,3.364,7.5,7.5v0.5H24.5z"/><path fill="#4788c7" d="M32,25c3.86,0,7,3.14,7,7v0l-14,0C25,28.14,28.14,25,32,25 M32,24c-4.418,0-8,3.582-8,8v1h16v-1 C40,27.582,36.418,24,32,24L32,24z"/><path fill="#dff0fe" d="M8 12.5A4.5 4.5 0 1 0 8 21.5A4.5 4.5 0 1 0 8 12.5Z"/><path fill="#4788c7" d="M8,13c2.206,0,4,1.794,4,4s-1.794,4-4,4s-4-1.794-4-4S5.794,13,8,13 M8,12c-2.761,0-5,2.239-5,5 s2.239,5,5,5s5-2.239,5-5S10.761,12,8,12L8,12z"/><path fill="#dff0fe" d="M14.5 3.5A4 4 0 1 0 14.5 11.5A4 4 0 1 0 14.5 3.5Z"/><path fill="#4788c7" d="M14.5,4C16.43,4,18,5.57,18,7.5S16.43,11,14.5,11S11,9.43,11,7.5S12.57,4,14.5,4 M14.5,3 C12.015,3,10,5.015,10,7.5s2.015,4.5,4.5,4.5S19,9.985,19,7.5S16.985,3,14.5,3L14.5,3z"/><g><path fill="#dff0fe" d="M25.5 3.5A4 4 0 1 0 25.5 11.5A4 4 0 1 0 25.5 3.5Z"/><path fill="#4788c7" d="M25.5,4C27.43,4,29,5.57,29,7.5S27.43,11,25.5,11S22,9.43,22,7.5S23.57,4,25.5,4 M25.5,3 C23.015,3,21,5.015,21,7.5s2.015,4.5,4.5,4.5S30,9.985,30,7.5S27.985,3,25.5,3L25.5,3z"/></g><g><path fill="#98ccfd" d="M0.5,32.5V32c0-4.136,3.364-7.5,7.5-7.5s7.5,3.364,7.5,7.5v0.5H0.5z"/><path fill="#4788c7" d="M8,25c3.86,0,7,3.14,7,7v0L1,32C1,28.14,4.14,25,8,25 M8,24c-4.418,0-8,3.582-8,8v1h16v-1 C16,27.582,12.418,24,8,24L8,24z"/></g><g><path fill="#dff0fe" d="M20 17.5A4.5 4.5 0 1 0 20 26.5A4.5 4.5 0 1 0 20 17.5Z"/><path fill="#4788c7" d="M20,18c2.206,0,4,1.794,4,4s-1.794,4-4,4s-4-1.794-4-4S17.794,18,20,18 M20,17 c-2.761,0-5,2.239-5,5s2.239,5,5,5s5-2.239,5-5S22.761,17,20,17L20,17z"/></g><g><path fill="#b6dcfe" d="M12.5,37.5V37c0-4.136,3.364-7.5,7.5-7.5s7.5,3.364,7.5,7.5v0.5H12.5z"/><path fill="#4788c7" d="M20,30c3.86,0,7,3.14,7,7v0l-14,0C13,33.14,16.14,30,20,30 M20,29c-4.418,0-8,3.582-8,8v1h16v-1 C28,32.582,24.418,29,20,29L20,29z"/></g></svg>
\ No newline at end of file
ux/src/components/MainOverlayDialog.vue
View file @ 269040ed
......@@ -27,6 +27,10 @@ const overlays = {
loader: () => import('./FileManager.vue'),
loadingComponent: LoadingGeneric
}),
NavEdit: defineAsyncComponent({
loader: () => import('./NavEditOverlay.vue'),
loadingComponent: LoadingGeneric
}),
TableEditor: defineAsyncComponent({
loader: () => import('./TableEditorOverlay.vue'),
loadingComponent: LoadingGeneric
......
ux/src/components/NavEditMenu.vue 0 → 100644
View file @ 269040ed
<template lang="pug">
q-card(style='min-width: 350px')
q-card-section.card-header
q-icon(name='img:/_assets/icons/fluent-sidebar-menu.svg', left, size='sm')
span {{t(`navEdit.title`)}}
q-card-section
q-btn.full-width(
unelevated
icon='mdi-playlist-edit'
color='deep-orange-9'
:label='t(`navEdit.editMenuItems`)'
@click='startEditing'
)
q-separator(inset)
q-card-section.q-pb-none.text-body2 Mode
q-list(padding)
q-item(tag='label')
q-item-section(side)
q-radio(v-model='state.mode', val='inherit')
q-item-section
q-item-label Inherit
q-item-label(caption) Use the menu items and settings from the parent path.
q-item(tag='label')
q-item-section(side)
q-radio(v-model='state.mode', val='starting')
q-item-section
q-item-label Override Current + Descendants
q-item-label(caption) Set menu items and settings for this path and all children.
q-item(tag='label')
q-item-section(side)
q-radio(v-model='state.mode', val='exact')
q-item-section
q-item-label Override Current Only
q-item-label(caption) Set menu items and settings only for this path.
q-card-actions.card-actions
q-space
q-btn.acrylic-btn(
flat
:label='t(`common.actions.cancel`)'
color='grey'
padding='xs md'
@click='props.menuHideHandler'
)
q-btn(
unelevated
:label='t(`common.actions.save`)'
color='positive'
padding='xs md'
)
</template>
<script setup>
import { onMounted, reactive, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { useSiteStore } from 'src/stores/site'
// PROPS
const props = defineProps({
menuHideHandler: {
type: Function,
default: () => ({})
}
})
// STORES
const siteStore = useSiteStore()
// I18N
const { t } = useI18n()
// DATA
const state = reactive({
mode: 'inherit'
})
// METHODS
function startEditing () {
siteStore.$patch({ overlay: 'NavEdit' })
props.menuHideHandler()
}
</script>
ux/src/components/NavSidebar.vue 0 → 100644
View file @ 269040ed
<template lang="pug">
q-scroll-area.sidebar-nav(
:thumb-style='thumbStyle'
:bar-style='barStyle'
)
q-list(
clickable
dense
dark
)
q-item-label.text-blue-2.text-caption(header) Header
q-item(to='/install')
q-item-section(side)
q-icon(name='las la-dog', color='white')
q-item-section Link 1
q-item(to='/install')
q-item-section(side)
q-icon(name='las la-cat', color='white')
q-item-section Link 2
q-separator.q-my-sm(dark)
q-item(to='/install')
q-item-section(side)
q-icon(name='mdi-fruit-grapes', color='white')
q-item-section.text-wordbreak-all Link 3
</template>
<script setup>
import { useQuasar } from 'quasar'
import { computed, onMounted, reactive, ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useSiteStore } from 'src/stores/site'
// QUASAR
const $q = useQuasar()
// STORES
const siteStore = useSiteStore()
// ROUTER
const router = useRouter()
const route = useRoute()
// I18N
const { t } = useI18n()
// DATA
const thumbStyle = {
right: '2px',
borderRadius: '5px',
backgroundColor: '#FFF',
width: '5px',
opacity: 0.5
}
const barStyle = {
backgroundColor: '#000',
width: '9px',
opacity: 0.1
}
</script>
<style lang="scss">
.sidebar-nav {
border-top: 1px solid rgba(255,255,255,.15);
height: calc(100% - 38px - 24px);
.q-list {
.q-separator + .q-item__label {
padding-top: 12px;
}
}
}
</style>
ux/src/css/app.scss
View file @ 269040ed
......@@ -36,6 +36,10 @@ body::-webkit-scrollbar-thumb {
font-family: 'Roboto Mono', Consolas, "Liberation Mono", Courier, monospace;
}
.text-wordbreak-all {
word-break: break-all;
}
// ------------------------------------------------------------------
// THEME COLORS
// ------------------------------------------------------------------
......
ux/src/layouts/MainLayout.vue
View file @ 269040ed
......@@ -30,40 +30,27 @@ q-layout(view='hHh Lpr lff')
aria-label='Browse'
size='sm'
)
q-scroll-area.sidebar-nav(
:thumb-style='thumbStyle'
:bar-style='barStyle'
)
q-list(
clickable
dense
dark
)
q-item-label.text-blue-2.text-caption(header) Header
q-item(to='/install')
q-item-section(side)
q-icon(name='las la-dog', color='white')
q-item-section Link 1
q-item(to='/install')
q-item-section(side)
q-icon(name='las la-cat', color='white')
q-item-section Link 2
q-separator.q-my-sm(dark)
q-item(to='/install')
q-item-section(side)
q-icon(name='mdi-fruit-grapes', color='white')
q-item-section Link 3
q-bar.bg-blue-9.text-white(dense, v-if='flagsStore.experimental && userStore.authenticated')
nav-sidebar
q-bar.bg-blue-9.text-white(dense, v-if='userStore.authenticated')
q-btn.col(
icon='las la-dharmachakra'
label='History'
label='Edit Nav'
flat
)
)
q-menu(
ref='navEditMenu'
anchor='top left'
self='bottom left'
:offset='[0, 10]'
)
nav-edit-menu(:menu-hide-handler='navEditMenu.hide')
q-separator(vertical)
q-btn.col(
icon='las la-bookmark'
label='Bookmarks'
flat
disabled
)
q-page-container
router-view
......@@ -99,6 +86,8 @@ import { useUserStore } from 'src/stores/user'
import FooterNav from 'src/components/FooterNav.vue'
import HeaderNav from 'src/components/HeaderNav.vue'
import LocaleSelectorMenu from 'src/components/LocaleSelectorMenu.vue'
import NavSidebar from 'src/components/NavSidebar.vue'
import NavEditMenu from 'src/components/NavEditMenu.vue'
import MainOverlayDialog from 'src/components/MainOverlayDialog.vue'
// QUASAR
......@@ -128,23 +117,9 @@ useMeta({
titleTemplate: title => `${title} - ${siteStore.title}`
})
// DATA
// REFS
const leftDrawerOpen = ref(true)
const search = ref('')
const thumbStyle = {
right: '2px',
borderRadius: '5px',
backgroundColor: '#FFF',
width: '5px',
opacity: 0.5
}
const barStyle = {
backgroundColor: '#000',
width: '9px',
opacity: 0.1
}
const navEditMenu = ref(null)
// COMPUTED
......@@ -152,12 +127,6 @@ const isSidebarShown = computed(() => {
return siteStore.showSideNav && !siteStore.sideNavIsDisabled && !(editorStore.isActive && editorStore.hideSideNav)
})
// METHODS
function openFileManager () {
siteStore.openFileManager()
}
</script>
<style lang="scss">
......@@ -166,10 +135,6 @@ function openFileManager () {
border-bottom: 1px solid rgba(0,0,0,.2);
height: 38px;
}
.sidebar-nav {
border-top: 1px solid rgba(255,255,255,.15);
height: calc(100% - 38px - 24px);
}
body.body--dark {
background-color: $dark-6;
......
ux/src/stores/site.js
View file @ 269040ed
......@@ -64,7 +64,8 @@ export const useSiteStore = defineStore('site', {
},
sideDialogShown: false,
sideDialogComponent: '',
docsBase: 'https://next.js.wiki/docs'
docsBase: 'https://next.js.wiki/docs',
nav: {}
}),
getters: {
overlayIsShown: (state) => Boolean(state.overlay),
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment