diff --git a/src/App.js b/src/App.js index 8f90e6be..14a41af0 100644 --- a/src/App.js +++ b/src/App.js @@ -11,8 +11,16 @@ export default { Notifications, StyleSwitcher }, + data: () => ({ + mobileActivePanel: 'timeline' + }), computed: { currentUser () { return this.$store.state.users.currentUser }, style () { return { 'background-image': `url(${this.currentUser.background_image})` } } + }, + methods: { + activatePanel (panelName) { + this.mobileActivePanel = panelName + } } } diff --git a/src/App.scss b/src/App.scss index a6a03bc0..c820779a 100644 --- a/src/App.scss +++ b/src/App.scss @@ -66,11 +66,6 @@ nav { } } -.sidebar { - flex: 1; - flex-basis: 300px; -} - main-router { flex: 1; } @@ -230,3 +225,34 @@ nav { flex: 2; flex-basis: 500px; } + +.sidebar { + flex: 1; + flex-basis: 300px; +} + +.mobile-shown { + display: none; +} + +.panel-switcher { + display: none; + width: 100%; + + button { + display: block; + flex: 1; + margin: 0.5em; + padding: 0.5em; + } +} + +@media all and (max-width: 959px) { + .mobile-hidden { + display: none; + } + + .panel-switcher { + display: flex; + } +} diff --git a/src/App.vue b/src/App.vue index 5da469b5..5d5463fb 100644 --- a/src/App.vue +++ b/src/App.vue @@ -9,12 +9,16 @@
-