diff --git a/assets/shared-bundle.js b/assets/shared-bundle.js index 7a0ff7f4d..079ceab78 100644 --- a/assets/shared-bundle.js +++ b/assets/shared-bundle.js @@ -19850,30 +19850,21 @@ var getIntrinsic = function GetIntrinsic(name, allowMissing) { var callBind$3 = {exports: {}}; -var esDefineProperty; -var hasRequiredEsDefineProperty; +var GetIntrinsic$3 = getIntrinsic; -function requireEsDefineProperty () { - if (hasRequiredEsDefineProperty) return esDefineProperty; - hasRequiredEsDefineProperty = 1; - - var GetIntrinsic = getIntrinsic; - - /** @type {import('.')} */ - var $defineProperty = GetIntrinsic('%Object.defineProperty%', true) || false; - if ($defineProperty) { - try { - $defineProperty({}, 'a', { value: 1 }); - } catch (e) { - // IE 8 has a broken defineProperty - $defineProperty = false; - } +/** @type {import('.')} */ +var $defineProperty$2 = GetIntrinsic$3('%Object.defineProperty%', true) || false; +if ($defineProperty$2) { + try { + $defineProperty$2({}, 'a', { value: 1 }); + } catch (e) { + // IE 8 has a broken defineProperty + $defineProperty$2 = false; } - - esDefineProperty = $defineProperty; - return esDefineProperty; } +var esDefineProperty = $defineProperty$2; + var GetIntrinsic$2 = getIntrinsic; var $gOPD$1 = GetIntrinsic$2('%Object.getOwnPropertyDescriptor%', true); @@ -19889,7 +19880,7 @@ if ($gOPD$1) { var gopd$1 = $gOPD$1; -var $defineProperty$1 = requireEsDefineProperty(); +var $defineProperty$1 = esDefineProperty; var $SyntaxError = syntax; var $TypeError$3 = type; @@ -19944,7 +19935,7 @@ var defineDataProperty$1 = function defineDataProperty( } }; -var $defineProperty = requireEsDefineProperty(); +var $defineProperty = esDefineProperty; var hasPropertyDescriptors = function hasPropertyDescriptors() { return !!$defineProperty; @@ -20019,7 +20010,7 @@ callBind$3.exports; var $call = GetIntrinsic('%Function.prototype.call%'); var $reflectApply = GetIntrinsic('%Reflect.apply%', true) || bind.call($call, $apply); - var $defineProperty = requireEsDefineProperty(); + var $defineProperty = esDefineProperty; var $max = GetIntrinsic('%Math.max%'); module.exports = function callBind(originalFunction) { diff --git a/assets/tailwind-output.css b/assets/tailwind-output.css index 1988ab484..5b823a714 100644 --- a/assets/tailwind-output.css +++ b/assets/tailwind-output.css @@ -775,6 +775,10 @@ video { margin-right: 1rem; } +.mt-1 { + margin-top: 0.25rem; +} + .mt-11 { margin-top: 2.75rem; } @@ -1156,6 +1160,10 @@ video { align-self: flex-end; } +.overflow-hidden { + overflow: hidden; +} + .overflow-scroll { overflow: scroll; } @@ -1235,6 +1243,11 @@ video { border-color: rgba(255,255,255,0.12); } +.border-light-neutral-2 { + --tw-border-opacity: 1; + border-color: rgb(125 125 125 / var(--tw-border-opacity)); +} + .border-light-surface-3 { border-color: rgba(34,34,34,0.05); } @@ -1463,6 +1476,10 @@ video { padding: 2rem; } +.p-padding-large { + padding: 1.5rem; +} + .p-padding-medium { padding: 1rem; } @@ -1571,6 +1588,18 @@ video { padding-bottom: 0.375rem; } +.pb-3 { + padding-bottom: 0.75rem; +} + +.pb-6 { + padding-bottom: 1.5rem; +} + +.pb-margin-web { + padding-bottom: 2.5rem; +} + .pl-\[2\.1875rem\] { padding-left: 2.1875rem; } @@ -1774,6 +1803,10 @@ video { opacity: 0; } +.opacity-10 { + opacity: 0.1; +} + .shadow { --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); @@ -2699,6 +2732,22 @@ html:has(.ArticlePage) { scroll-padding-top: 90px !important; } +.accordion-body { + display: grid; + grid-template-rows: 0fr; + transition: 250ms grid-template-rows ease; +} + +.accordion-body-active { + grid-template-rows: 1fr; +} + +#new-side-nav { + > div { + height: 100%; + } +} + .placeholder\:text-light-pink-vibrant::-moz-placeholder { --tw-text-opacity: 1; color: rgb(245 13 180 / var(--tw-text-opacity)); @@ -2709,6 +2758,18 @@ html:has(.ArticlePage) { color: rgb(245 13 180 / var(--tw-text-opacity)); } +.first\:mt-0:first-child { + margin-top: 0px; +} + +.first\:mt-4:first-child { + margin-top: 1rem; +} + +.first\:mt-6:first-child { + margin-top: 1.5rem; +} + .hover\:bg-dark-accent-1-hovered:hover { --tw-bg-opacity: 1; background-color: rgb(253 60 254 / var(--tw-bg-opacity)); @@ -2757,11 +2818,20 @@ html:has(.ArticlePage) { background-color: rgba(34,34,34,0.09); } +.hover\:text-light-accent-1:hover { + --tw-text-opacity: 1; + color: rgb(245 13 180 / var(--tw-text-opacity)); +} + .hover\:text-light-pink-vibrant:hover { --tw-text-opacity: 1; color: rgb(245 13 180 / var(--tw-text-opacity)); } +.group:hover .group-hover\:fill-light-accent-1 { + fill: #F50DB4; +} + .group:hover .group-hover\:fill-light-neutral-1 { fill: #222222; } @@ -3018,6 +3088,11 @@ html:has(.ArticlePage) { } } +.dark\:border-dark-neutral-2:where(.dark, .dark *) { + --tw-border-opacity: 1; + border-color: rgb(155 155 155 / var(--tw-border-opacity)); +} + .dark\:border-dark-surface-3:where(.dark, .dark *) { border-color: rgba(255,255,255,0.12); } @@ -3200,15 +3275,29 @@ html:has(.ArticlePage) { background-color: rgb(254 244 255 / var(--tw-bg-opacity)); } +.dark\:hover\:text-dark-accent-1:hover:where(.dark, .dark *) { + --tw-text-opacity: 1; + color: rgb(252 116 254 / var(--tw-text-opacity)); +} + .dark\:hover\:text-dark-pink-vibrant:hover:where(.dark, .dark *) { --tw-text-opacity: 1; color: rgb(252 116 254 / var(--tw-text-opacity)); } +.group:hover .group-hover\:dark\:fill-dark-accent-1:where(.dark, .dark *) { + fill: #FC74FE; +} + .group:hover .group-hover\:dark\:fill-dark-neutral-1:where(.dark, .dark *) { fill: #FFFFFF; } +.group:hover .dark\:group-hover\:text-dark-accent-1:where(.dark, .dark *) { + --tw-text-opacity: 1; + color: rgb(252 116 254 / var(--tw-text-opacity)); +} + .group:hover .dark\:group-hover\:text-dark-neutral-1:where(.dark, .dark *) { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); diff --git a/src/lib/types.ts b/src/lib/types.ts index a31859b77..dec08d189 100644 --- a/src/lib/types.ts +++ b/src/lib/types.ts @@ -242,7 +242,14 @@ export type SideNavData = { name: string; id: number; url: string; + position: number; }[]; }[]; }[]; +} | null; + +export type NavState = { + category?: number; + section?: number; + article?: number; }; diff --git a/src/modules/side-nav/SideNavModule.tsx b/src/modules/side-nav/SideNavModule.tsx index f5cedaee3..795c5514a 100644 --- a/src/modules/side-nav/SideNavModule.tsx +++ b/src/modules/side-nav/SideNavModule.tsx @@ -1,11 +1,216 @@ -import { FC } from 'react'; -import { SideNavData } from '../../lib/types'; +import { FC, useState } from 'react'; +import { SideNavData, NavState } from '../../lib/types'; import cn from 'classnames'; type Props = { sideNavData: SideNavData; + navState: NavState; }; -export const SideNav: FC = ({ sideNavData }) => { - return
Siiiide naaav
; +export const SideNav: FC = ({ sideNavData, navState }) => { + const [activeNavState, setActiveNavState] = useState(navState); + const [activeSection, setActiveSection] = useState<{ [key: number]: boolean }>({ + [navState.section || '']: true, + }); + + const handleSectiontoggle = (sectionId: number) => { + setActiveSection((prev) => ({ + ...prev, + [sectionId]: !prev[sectionId], + })); + }; + + if (!sideNavData) { + return null; + } + + const navStateIsEmpty = + !activeNavState.category && !activeNavState.section && !activeNavState.article; + + return ( + + ); +}; + +const ChevronLeft: FC<{ + color?: 'neutral-2'; +}> = ({ color = 'neutral-2' }) => { + return ( + + + + ); +}; + +const ChevronDown: FC<{ + color?: 'neutral-2'; +}> = ({ color = 'neutral-2' }) => { + return ( + + + + ); }; diff --git a/src/modules/side-nav/api.ts b/src/modules/side-nav/api.ts index 3fe24dc98..a8bc870af 100644 --- a/src/modules/side-nav/api.ts +++ b/src/modules/side-nav/api.ts @@ -4,24 +4,29 @@ const makeArrayToHaveUniqueValues = (array: { id: number }[]) => { return array.filter((value, index, self) => self.findIndex((v) => v.id === value.id) === index); }; +const removeHostFromUrl = (url: string): string => { + const urlObj = new URL(url); + return urlObj.pathname + urlObj.search + urlObj.hash; +}; + type SideNavApiResponse = { articles: { section_id: number; id: number; - url: string; + html_url: string; name: string; position: number; }[]; categories: { id: number; position: number; - url: string; + html_url: string; name: string; }[]; sections: { category_id: number; id: number; - url: string; + html_url: string; name: string; position: number; }[]; @@ -45,7 +50,7 @@ const sanitizeResponse = (response: SideNavApiResponse): SideNavData => { .map((article) => ({ id: article.id, name: article.name, - url: article.url, + url: removeHostFromUrl(article.html_url), position: article.position, })); @@ -53,7 +58,7 @@ const sanitizeResponse = (response: SideNavApiResponse): SideNavData => { id: section.id, name: section.name, position: section.position, - url: section.url, + url: removeHostFromUrl(section.html_url), articles: articles.sort((a, b) => a.position - b.position), }; }); @@ -62,7 +67,7 @@ const sanitizeResponse = (response: SideNavApiResponse): SideNavData => { id: category.id, name: category.name, position: category.position, - url: category.url, + url: removeHostFromUrl(category.html_url), sections: sections.sort((a, b) => a.position - b.position), }; }); @@ -115,7 +120,7 @@ export const sideNav = { categories: allPagesCategoryResponseData, }; const sanitizedResponse = sanitizeResponse(allPagesResponseData); - console.log(sanitizedResponse); + return sanitizedResponse; } catch (error) { console.error(error); diff --git a/src/modules/side-nav/renderSideNav.tsx b/src/modules/side-nav/renderSideNav.tsx index dd98d2ede..cc32066f9 100644 --- a/src/modules/side-nav/renderSideNav.tsx +++ b/src/modules/side-nav/renderSideNav.tsx @@ -1,5 +1,5 @@ import { render } from 'react-dom'; -import { SideNavData } from '../../lib/types'; +import { SideNavData, NavState } from '../../lib/types'; import { Settings } from '../shared'; import { createTheme, ThemeProviders } from '../shared'; import { SideNav } from './SideNavModule'; @@ -7,11 +7,12 @@ import { SideNav } from './SideNavModule'; export async function renderSideNav( settings: Settings, sideNavData: SideNavData, + navState: NavState, container: HTMLElement ) { render( - + , container ); diff --git a/styles/main.css b/styles/main.css index bd2699340..f99f9a2a9 100644 --- a/styles/main.css +++ b/styles/main.css @@ -242,3 +242,19 @@ html:has(.ArticlePage) { scroll-behavior: smooth; scroll-padding-top: 90px !important; } + +.accordion-body { + display: grid; + grid-template-rows: 0fr; + transition: 250ms grid-template-rows ease; +} + +.accordion-body-active { + grid-template-rows: 1fr; +} + +#new-side-nav { + > div { + height: 100%; + } +} diff --git a/templates/article_page.hbs b/templates/article_page.hbs index 9ae8395f8..8886ffd7e 100644 --- a/templates/article_page.hbs +++ b/templates/article_page.hbs @@ -1,5 +1,5 @@
- +
@@ -96,3 +96,35 @@ articleContentNavContainer.remove(); } + + + \ No newline at end of file diff --git a/templates/category_page.hbs b/templates/category_page.hbs index 611ad7886..684463911 100644 --- a/templates/category_page.hbs +++ b/templates/category_page.hbs @@ -1,6 +1,6 @@
- +
@@ -59,4 +59,18 @@ // Make sure arguments are correctly typed. renderCategoryBreadcrumbs(settings, categoryPageData, container); + + + \ No newline at end of file diff --git a/templates/home_page.hbs b/templates/home_page.hbs index 351dd5093..661bb452f 100644 --- a/templates/home_page.hbs +++ b/templates/home_page.hbs @@ -1,5 +1,5 @@
- +
@@ -110,7 +110,6 @@ renderHomepage(settings, homepageData, container); - \ No newline at end of file diff --git a/templates/section_page.hbs b/templates/section_page.hbs index 537dd80d9..5d029165f 100644 --- a/templates/section_page.hbs +++ b/templates/section_page.hbs @@ -1,6 +1,6 @@
- +
@@ -44,4 +44,35 @@ // Make sure arguments are correctly typed. renderSectionBreadcrumbs(settings, sectionPageData, container); + + + \ No newline at end of file