feat: sidebar nav editor (wip)

server/locales/en.json

@@ -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/package-lock.json

 {

ux/public/_assets/icons/fluent-sidebar-menu.svg

+<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

+<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

+<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

+<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

+<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

@@ -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

+<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

+<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

@@ -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

@@ -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
-
-const leftDrawerOpen = ref(true)
-const search = ref('')
+// REFS
 
-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

@@ -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),