| | |
| | | <template> |
| | | <div :class="classObj" class="app-wrapper"> |
| | | <div |
| | | <!-- <div |
| | | v-if="device === 'mobile' && sidebar.opened" |
| | | class="drawer-bg" |
| | | @click="handleClickOutside" |
| | | /> |
| | | /> --> |
| | | <!-- <sidebar class="sidebar-container" />--> |
| | | <div :class="{ hasTagsView: needTagsView }" class="main-container"> |
| | | <div :class="{ 'fixed-header': fixedHeader }"> |
| | | <navbar /> |
| | | <tags-view v-if="needTagsView" /> |
| | | <!-- <TestTagsView /> --> |
| | | </div> |
| | | <app-main /> |
| | | <tags-view class="tags-view" v-if="needTagsView" /> |
| | | <div class="main-wrap pos-r"> |
| | | <app-main class="app-main pos-full" /> |
| | | </div> |
| | | <!-- <right-panel v-if="showSettings"> |
| | | <settings /> |
| | | </right-panel> --> |
| | |
| | | position: fixed; |
| | | top: 0; |
| | | right: 0; |
| | | z-index: 9; |
| | | z-index: 0; |
| | | width: calc(100%); |
| | | transition: width 0.28s; |
| | | } |
| | |
| | | .mobile .fixed-header { |
| | | width: 100%; |
| | | } |
| | | |
| | | .main-container { |
| | | display: flex; |
| | | flex-direction: column; |
| | | height: 100%; |
| | | .tags-view { |
| | | margin-top: 120px; |
| | | } |
| | | .main-wrap { |
| | | flex: 1; |
| | | } |
| | | } |
| | | </style> |