{"id":21887227,"url":"https://github.com/profcomff/navbar-element","last_synced_at":"2025-07-21T10:31:00.877Z","repository":{"id":61119972,"uuid":"525111200","full_name":"profcomff/navbar-element","owner":"profcomff","description":"Navigation bar for aggregator application","archived":false,"fork":false,"pushed_at":"2023-02-26T20:52:10.000Z","size":720,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2023-03-12T01:23:03.733Z","etag":null,"topics":["aggregator","frontend"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/profcomff.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-08-15T19:21:53.000Z","updated_at":"2023-02-10T20:51:56.000Z","dependencies_parsed_at":"2022-10-11T10:42:05.923Z","dependency_job_id":null,"html_url":"https://github.com/profcomff/navbar-element","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/profcomff%2Fnavbar-element","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/profcomff%2Fnavbar-element/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/profcomff%2Fnavbar-element/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/profcomff%2Fnavbar-element/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/profcomff","download_url":"https://codeload.github.com/profcomff/navbar-element/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":226903005,"owners_count":17700619,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aggregator","frontend"],"created_at":"2024-11-28T11:08:51.338Z","updated_at":"2024-11-28T11:08:51.981Z","avatar_url":"https://github.com/profcomff.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# navbar-element\n\nДанный микросервис отвечает за навигационные панели в приложении. В него включены как основная\nпанель, так и верхняя. При разработке микросервис запускается на порте 9001.\n\n# Основна панель\n\nОсновная панель отвечает за переключение между остальными микросервисами приложения. Код панели\nпишется в файле NavbarMain.vue. Так как приложение должно работатб, как на мобильных устройствах,\nтак и десктопе, мы используем 2 различных макета NavbarDesktop.vue и NavbarMobile.vue. Однако вся\nлогика сервиса прописывается в NavbarMain, а в макеты передаётся только с помощью props. Сделано это\nдля того, чтобы поведение навбаров было одинаковым независимо от макета, а также чтобы избежать\nдублирования кода.\n\n# Верхняя панель\n\nДанная панель выступает в роли вспомогательной, в отдельных микросервисах. Есть несколько\nразмеченных наборов кнопок, которые активируются в зависимости от значения pageId. Каждой странице\nв приложении присвоено своё значение pageId и при монтировке страницы оно передаётся с помощью\nсобытия \"сhange-page\".\n\n## Использование в сервисе\n\nДля изменения навбара из вашего сервиса нужно отправить JS событие `change-header-layout` с типом\nнавбара и настройками. Пример события:\n\n```js\nlet changeHeaderLayoutEvent = new CustomEvent('change-header-layout', {\n    detail: {\n        layoutName: 'calendar',\n        text: 'Твой физфак!',\n        groupInfo: this.groupInfo,\n        disabled: false,\n        menu: [\n            {\n                name: 'Изменить группу',\n                action: () =\u003e {\n                    this.loaded = false;\n                    this.groupId = undefined;\n                    this.groupInfo = { number: '' };\n                    this.timetable = [];\n                    localStorage.removeItem('timetable-group-id');\n                    localStorage.removeItem('timetable-group-info');\n                    localStorage.removeItem('timetable-cache');\n                    this.$router.push('/timetable/init');\n                },\n            },\n        ],\n    },\n});\ndocument.dispatchEvent(changeHeaderLayoutEvent);\n```\n\n## Варианты использования\n\nДоступные варианты навбаров:\n| Image | Layout name | Params |\n| ---------------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| ![plain](docs/img/plain.png) | `plain` | `text` – текст, `menu` – элементы меню (см. дальше) |\n| ![back](docs/img/back.png) | `back` | `text` – текст, `menu` – элементы меню (см. дальше) |\n| ![calendar](docs/img/calendar.png) | `calendar` | `groupInfo` – информация о группе, для которой показывается расписание (необязательный), `disabled` – включены ли кнопки, `text` – текст вместо даты, если кнопки выключены, `menu` – элементы меню (см. дальше) |\n\n## Кнопки меню\n\nВсе навбары поддерживают выпадающее меню под тремя точками. Для их использования надо передать\nмассив элементов в формате:\n\n```js\n{\n    menu: [\n        {\n            name: \"Изменить группу\",\n            action: () =\u003e {...},\n        },\n    ]\n}\n```\n\n`name` – текст на кнопке\n`action` – функция без параметров, которая будет выполнена при нажатии на кнопку\n\n**Важно!** Тут можно использовать _this_ параметры, что позволит вам изменять параметры компонента,\nоткуда создается навбар, напрямую из функции.\n\n## Project setup\n\n```\nyarn install\n```\n\n### Compiles and hot-reloads for development\n\n```\nyarn start\n```\n\n### Compiles and minifies for production\n\n```\nyarn run build\n```\n\n### Lints and fixes files\n\n```\nyarn run lint\n```\n\n### Customize configuration\n\nSee [Configuration Reference](https://cli.vuejs.org/config/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprofcomff%2Fnavbar-element","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprofcomff%2Fnavbar-element","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprofcomff%2Fnavbar-element/lists"}