diff --git a/frontend/public/img/svg/community.svg b/frontend/public/img/svg/community.svg new file mode 100644 index 000000000..8f1cdbd61 --- /dev/null +++ b/frontend/public/img/svg/community.svg @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/public/img/svg/home.svg b/frontend/public/img/svg/home.svg new file mode 100644 index 000000000..9122b7e68 --- /dev/null +++ b/frontend/public/img/svg/home.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + diff --git a/frontend/public/img/svg/info.svg b/frontend/public/img/svg/info.svg new file mode 100644 index 000000000..1d1b88c65 --- /dev/null +++ b/frontend/public/img/svg/info.svg @@ -0,0 +1,182 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/public/img/svg/lines.png b/frontend/public/img/svg/lines.png new file mode 100644 index 000000000..d7bf781b4 Binary files /dev/null and b/frontend/public/img/svg/lines.png differ diff --git a/frontend/public/img/svg/logout.svg b/frontend/public/img/svg/logout.svg new file mode 100644 index 000000000..a9826a5dd --- /dev/null +++ b/frontend/public/img/svg/logout.svg @@ -0,0 +1,162 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/public/img/svg/send.svg b/frontend/public/img/svg/send.svg new file mode 100644 index 000000000..6f1d8dafa --- /dev/null +++ b/frontend/public/img/svg/send.svg @@ -0,0 +1,114 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/public/img/svg/settings.svg b/frontend/public/img/svg/settings.svg new file mode 100644 index 000000000..6966262f3 --- /dev/null +++ b/frontend/public/img/svg/settings.svg @@ -0,0 +1,152 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/public/img/svg/transaction.svg b/frontend/public/img/svg/transaction.svg new file mode 100644 index 000000000..f7cb156ff --- /dev/null +++ b/frontend/public/img/svg/transaction.svg @@ -0,0 +1,128 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/components/Menu/Sidebar.spec.js b/frontend/src/components/Menu/Sidebar.spec.js index 62b69ebdd..321d73a3a 100644 --- a/frontend/src/components/Menu/Sidebar.spec.js +++ b/frontend/src/components/Menu/Sidebar.spec.js @@ -33,8 +33,8 @@ describe('Sidebar', () => { }) describe('the genaral section', () => { - it('has five nav-item', () => { - expect(wrapper.findAll('ul').at(0).findAll('.nav-item')).toHaveLength(5) + it('has six nav-items', () => { + expect(wrapper.findAll('ul').at(0).findAll('.nav-item')).toHaveLength(6) }) it('has nav-item "navigation.overview" in navbar', () => { @@ -50,34 +50,32 @@ describe('Sidebar', () => { }) it('has nav-item "gdt.gdt" in navbar', () => { - expect(wrapper.findAll('.nav-item').at(3).text()).toEqual('gdt.gdt') + expect(wrapper.findAll('.nav-item').at(3).text()).toEqual('creation') }) it('has nav-item "creation" in navbar', () => { - expect(wrapper.findAll('.nav-item').at(4).text()).toContain('creation') + expect(wrapper.findAll('.nav-item').at(4).text()).toContain('GDT') + }) + + it('has nav-item "Information" in navbar', () => { + expect(wrapper.findAll('.nav-item').at(5).text()).toContain('navigation.info') }) }) describe('the specific section', () => { describe('for standard users', () => { - it('has three nav-item', () => { - expect(wrapper.findAll('ul').at(1).findAll('.nav-item')).toHaveLength(3) + it('has two nav-items', () => { + expect(wrapper.findAll('ul').at(1).findAll('.nav-item')).toHaveLength(2) }) it('has nav-item "navigation.info" in navbar', () => { expect(wrapper.findAll('ul').at(1).findAll('.nav-item').at(0).text()).toEqual( - 'navigation.info', + 'navigation.settings', ) }) it('has nav-item "navigation.settings" in navbar', () => { expect(wrapper.findAll('ul').at(1).findAll('.nav-item').at(1).text()).toEqual( - 'navigation.settings', - ) - }) - - it('has nav-item "navigation.logout" in navbar', () => { - expect(wrapper.findAll('ul').at(1).findAll('.nav-item').at(2).text()).toEqual( 'navigation.logout', ) }) @@ -89,30 +87,24 @@ describe('Sidebar', () => { wrapper = Wrapper() }) - it('has four nav-item', () => { - expect(wrapper.findAll('ul').at(1).findAll('.nav-item')).toHaveLength(4) - }) - - it('has nav-item "navigation.info" in navbar', () => { - expect(wrapper.findAll('ul').at(1).findAll('.nav-item').at(0).text()).toEqual( - 'navigation.info', - ) + it('has three nav-items', () => { + expect(wrapper.findAll('ul').at(1).findAll('.nav-item')).toHaveLength(3) }) it('has nav-item "navigation.settings" in navbar', () => { - expect(wrapper.findAll('ul').at(1).findAll('.nav-item').at(1).text()).toEqual( + expect(wrapper.findAll('ul').at(1).findAll('.nav-item').at(0).text()).toEqual( 'navigation.settings', ) }) it('has nav-item "navigation.admin_area" in navbar', () => { - expect(wrapper.findAll('ul').at(1).findAll('.nav-item').at(2).text()).toEqual( + expect(wrapper.findAll('ul').at(1).findAll('.nav-item').at(1).text()).toEqual( 'navigation.admin_area', ) }) it('has nav-item "navigation.logout" in navbar', () => { - expect(wrapper.findAll('ul').at(1).findAll('.nav-item').at(3).text()).toEqual( + expect(wrapper.findAll('ul').at(1).findAll('.nav-item').at(2).text()).toEqual( 'navigation.logout', ) }) diff --git a/frontend/src/components/Menu/Sidebar.vue b/frontend/src/components/Menu/Sidebar.vue index 0875c0c7e..c6cc4c4e0 100644 --- a/frontend/src/components/Menu/Sidebar.vue +++ b/frontend/src/components/Menu/Sidebar.vue @@ -9,34 +9,34 @@
- + {{ $t('navigation.overview') }} - + {{ $t('navigation.send') }} - + {{ $t('navigation.transactions') }} + + + {{ $t('creation') }} + - {{ $t('gdt.gdt') }} + {{ $t('GDT') }} - - - {{ $t('creation') }} - - -
- - - + + {{ $t('navigation.info') }} + +
+ - + {{ $t('navigation.settings') }} {{ $t('navigation.admin_area') }} - + {{ $t('navigation.logout') }} @@ -74,10 +74,17 @@ export default { color: rgb(2, 2, 1); border-left: 4px rgb(219, 129, 19) solid; } +.svg-icon { + filter: brightness(1) invert(0); +} + +.activeRoute .svg-icon { + filter: brightness(0) invert(0); +} + #component-sidebar { min-width: 200px; } - @media screen and (min-width: 1025px) { #side-menu { max-width: 180px; @@ -86,7 +93,7 @@ export default { min-width: 180px; } } - +/* @media screen and (min-width: 1075px) { #side-menu { max-width: 200px; @@ -102,5 +109,5 @@ export default { #component-sidebar { max-width: 100%; } -} +} */ diff --git a/frontend/src/components/MobileSidebar/MobileSidebar.vue b/frontend/src/components/MobileSidebar/MobileSidebar.vue index 158c42f0d..9c371a0fc 100644 --- a/frontend/src/components/MobileSidebar/MobileSidebar.vue +++ b/frontend/src/components/MobileSidebar/MobileSidebar.vue @@ -1,7 +1,15 @@