diff --git a/app/components/sidebar-nav.css b/app/components/sidebar-nav.css new file mode 100644 index 0000000..34a6d8d --- /dev/null +++ b/app/components/sidebar-nav.css @@ -0,0 +1,144 @@ +.sidebar { + position: sticky; + top: 0; + width: 20%; + height: 100vh; + background-color: #f8f9fa; + border-right: 1px solid #e9ecef; + padding: 1rem 1rem 1.5rem 1rem; + overflow-y: auto; +} + +.sidebar-content { + padding-top: 0.5rem; +} + +.sidebar-title { + font-size: 1.4rem; + font-weight: 600; + margin-bottom: 1rem; + color: #212529; +} + +.nav-list { + list-style: none; + padding: 0; + margin: 0; +} + +.nav-item { + display: block; + width: 90%; + text-align: left; + padding: 0.25rem 0.5rem; + margin-bottom: 0.1rem; + color: #212529; + text-decoration: none; + border-radius: 4px; + transition: all 0.2s ease; + font-size: 1.1rem; +} + +li > .nav-item { + color: #212529; + font-weight: 500; +} + +li > .nav-item:hover { + background-color: #f1f3f5; +} + +.sub-nav-list { + list-style: none; + padding-left: 1rem; + margin: 0.15rem 0; +} + +.sub-nav-item { + font-size: 1rem; + padding: 0.1rem 0; +} + +.sub-nav-item .nav-item { + color: #E04E39; + padding: 0.2rem 0.5rem; +} + +.sub-nav-item .nav-item:hover { + background-color: #fff1ef; +} + +.menu-toggle:focus { + outline: 2px solid #E04E39; + outline-offset: 2px; +} + +.sub-nav-item .nav-item { + color: #c43e2d; +} + +.nav-item[aria-current="true"] { + background-color: #f1f3f5; + font-weight: bold; +} + +.sub-nav-item .nav-item[aria-current="true"] { + background-color: #fff1ef; + font-weight: bold; +} + +@media (max-width: 768px) { + .sidebar { + position: fixed; + top: 0; + left: 0; + width: 85%; + height: 100vh; + z-index: 1000; + transform: translateX(-100%); + transition: transform 0.3s ease; + box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1); + } + + .sidebar.open { + transform: translateX(0); + } + + .menu-toggle { + position: fixed; + top: 1rem; + right: 1rem; + z-index: 1001; + width: 44px; + height: 44px; + border-radius: 50%; + background: #E04E39; + border: none; + color: white; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + } + + .menu-toggle:hover { + background: #c43e2d; + } + + .overlay { + display: none; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + z-index: 999; + backdrop-filter: blur(2px); + } + + .overlay.open { + display: block; + } +} \ No newline at end of file diff --git a/app/components/sidebar-nav.hbs b/app/components/sidebar-nav.hbs new file mode 100644 index 0000000..73e1e69 --- /dev/null +++ b/app/components/sidebar-nav.hbs @@ -0,0 +1,69 @@ +{{#if this.isMobile}} + + +{{/if}} + + \ No newline at end of file diff --git a/app/components/sidebar-nav.js b/app/components/sidebar-nav.js new file mode 100644 index 0000000..02140fd --- /dev/null +++ b/app/components/sidebar-nav.js @@ -0,0 +1,52 @@ +import Component from '@glimmer/component'; +import { tracked } from '@glimmer/tracking'; +import { inject as service } from '@ember/service'; +import { action } from '@ember/object'; + +export default class SidebarNavComponent extends Component { + @service scroll; + @service intl; + + @tracked activeSection = ''; + @tracked isMenuOpen = false; + @tracked isMobile = false; + + constructor() { + super(...arguments); + if (typeof window !== 'undefined') { + this.checkMobile(); + window.addEventListener('resize', this.checkMobile); + } + } + + willDestroy() { + super.willDestroy(); + if (typeof window !== 'undefined') { + window.removeEventListener('resize', this.checkMobile); + } + } + + get currentSection() { + return this.scroll?.activeSection || ''; + } + + @action + scrollToSection(sectionId) { + this.scroll.scrollToSection(sectionId); + } + + @action + checkMobile() { + this.isMobile = window.innerWidth <= 768; + } + + @action + toggleMenu() { + this.isMenuOpen = !this.isMenuOpen; + } + + @action + closeMenu() { + this.isMenuOpen = false; + } +} diff --git a/app/styles/application.css b/app/styles/application.css index 9867445..569b249 100644 --- a/app/styles/application.css +++ b/app/styles/application.css @@ -17,6 +17,17 @@ margin-top: 4rem; } +.content-wrapper { + display: flex; + width: 100%; +} + +.main-content { + flex: 1; + padding: 2rem; + overflow-y: auto; +} + @media screen and (min-width: 30rem) { .header, .main { diff --git a/app/templates/application.hbs b/app/templates/application.hbs index 4de944e..826d8c6 100644 --- a/app/templates/application.hbs +++ b/app/templates/application.hbs @@ -12,24 +12,31 @@ -
-

- {{t "layout.application.title"}} -

+
+ -

- {{t "layout.application.description-1" htmlSafe=true}} -

+
+

+ {{t "layout.application.title"}} +

-

- {{t "layout.application.description-2" htmlSafe=true}} -

+

+ {{t "layout.application.description-1" htmlSafe=true}} +

- {{#each @model as |section|}} -
- -
- {{/each}} -
\ No newline at end of file +

+ {{t "layout.application.description-2" htmlSafe=true}} +

+ + {{#each @model as |section|}} +
+ +
+ {{/each}} +
+ \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 21629fe..d1b6fc2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -44,6 +44,7 @@ "ember-source": "~4.4.0", "ember-template-lint": "^4.10.0", "ember-test-selectors": "^6.0.0", + "ember-truth-helpers": "^4.0.3", "eslint": "^8.17.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-ember": "^10.6.1", @@ -8566,9 +8567,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001355", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001355.tgz", - "integrity": "sha512-Sd6pjJHF27LzCB7pT7qs+kuX2ndurzCzkpJl6Qct7LPSZ9jn0bkOA8mdgMgmqnQAWLVOOGjLpc+66V57eLtb1g==", + "version": "1.0.30001700", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001700.tgz", + "integrity": "sha512-2S6XIXwaE7K7erT8dY+kLQcpa5ms63XlRkMkReXjle+kf6c5g38vyMl+Z5y8dSxOFDhcFe+nxnn261PLxBSQsQ==", "dev": true, "funding": [ { @@ -8578,6 +8579,10 @@ { "type": "tidelift", "url": "https://tidelift.com/funding/github/npm/caniuse-lite" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" } ], "license": "CC-BY-4.0" @@ -14677,6 +14682,20 @@ "node": "12.* || 14.* || >= 16.*" } }, + "node_modules/ember-truth-helpers": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/ember-truth-helpers/-/ember-truth-helpers-4.0.3.tgz", + "integrity": "sha512-T6Ogd3pk9FxYiZfSxdjgn3Hb3Ksqgw7CD23V9qfig9jktNdkNEHo4+3PA3cSD/+3a2kdH3KmNvKyarVuzdtEkA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@embroider/addon-shim": "^1.8.6", + "ember-functions-as-helper-polyfill": "^2.1.2" + }, + "peerDependencies": { + "ember-source": ">=3.28.0" + } + }, "node_modules/emoji-regex": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", @@ -33154,9 +33173,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001355", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001355.tgz", - "integrity": "sha512-Sd6pjJHF27LzCB7pT7qs+kuX2ndurzCzkpJl6Qct7LPSZ9jn0bkOA8mdgMgmqnQAWLVOOGjLpc+66V57eLtb1g==", + "version": "1.0.30001700", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001700.tgz", + "integrity": "sha512-2S6XIXwaE7K7erT8dY+kLQcpa5ms63XlRkMkReXjle+kf6c5g38vyMl+Z5y8dSxOFDhcFe+nxnn261PLxBSQsQ==", "dev": true }, "capture-exit": { @@ -37781,6 +37800,16 @@ "ember-cli-version-checker": "^5.1.2" } }, + "ember-truth-helpers": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/ember-truth-helpers/-/ember-truth-helpers-4.0.3.tgz", + "integrity": "sha512-T6Ogd3pk9FxYiZfSxdjgn3Hb3Ksqgw7CD23V9qfig9jktNdkNEHo4+3PA3cSD/+3a2kdH3KmNvKyarVuzdtEkA==", + "dev": true, + "requires": { + "@embroider/addon-shim": "^1.8.6", + "ember-functions-as-helper-polyfill": "^2.1.2" + } + }, "emoji-regex": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", diff --git a/package.json b/package.json index 868e4f9..791b069 100644 --- a/package.json +++ b/package.json @@ -61,6 +61,7 @@ "ember-source": "~4.4.0", "ember-template-lint": "^4.10.0", "ember-test-selectors": "^6.0.0", + "ember-truth-helpers": "^4.0.3", "eslint": "^8.17.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-ember": "^10.6.1", diff --git a/translations/en-us.yaml b/translations/en-us.yaml index a281f89..20fd989 100644 --- a/translations/en-us.yaml +++ b/translations/en-us.yaml @@ -33,3 +33,10 @@ component: locale-fr-FR: Français locale-ja: 日本語 locale-pt-BR: Português (do Brasil) + sidebar-nav: + toggle-menu: "Toggle menu" + close-menu: "Close menu" + menu-icon: "≡" + table-of-contents: "Table of contents" + contents: "Contents" + subsections-of: "Subsections of {sectionTitle}"