wip

src/client/ui/chat/index.vue

@@ -121,8 +121,8 @@
 		</footer>
 	</main>
 
-	<XSide class="side" ref="side"/>
-	<div class="side">
+	<XSide class="side" ref="side" @open="sideViewOpening = true" @close="sideViewOpening = false"/>
+	<div class="side widgets" :class="{ sideViewOpening }">
 		<XWidgets/>
 	</div>
 
@@ -193,6 +193,7 @@ export default defineComponent({
 			featuredChannels: null,
 			currentChannel: null,
 			menuDef: sidebarDef,
+			sideViewOpening: false,
 			instanceName,
 			faLayerGroup, faBars, faBell, faHome, faCircle, faPencilAlt, faShareAlt, faSatelliteDish, faListUl, faSatellite, faCog, faSearch, faPlus, faStar, farStar, faAt, faLink, faEllipsisH, faGlobe, faComments, faEnvelope,
 		};
@@ -564,6 +565,12 @@ export default defineComponent({
 	> .side {
 		width: 350px;
 		border-left: solid 1px var(--divider);
+
+		&.widgets.sideViewOpening {
+			@media (max-width: 1400px) {
+				display: none;
+			}
+		}
 	}
 }
 </style>

src/client/ui/chat/side.vue

@@ -1,6 +1,5 @@
 <template>
-<div class="qvzfzxam _narrow_" v-if="component">
-	<div class="container">
+<div class="mrajymqm _narrow_" v-if="component">
 	<header class="header" @contextmenu.prevent.stop="onContextmenu">
 		<button class="_button" @click="back()" v-if="history.length > 0"><Fa :icon="faChevronLeft"/></button>
 		<XHeader class="title" :info="pageInfo" :with-back="false" :center="false"/>
@@ -8,7 +7,6 @@
 	</header>
 	<component :is="component" v-bind="props" :ref="changePage"/>
 </div>
-</div>
 </template>
 
 <script lang="ts">
@@ -64,6 +62,7 @@ export default defineComponent({
 			const { component, props } = resolve(path);
 			this.component = component;
 			this.props = props;
+			this.$emit('open');
 		},
 
 		back() {
@@ -74,6 +73,7 @@ export default defineComponent({
 			this.path = null;
 			this.component = null;
 			this.props = {};
+			this.$emit('close');
 		},
 
 		onContextmenu(e) {
@@ -114,13 +114,12 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.qvzfzxam {
+.mrajymqm {
 	$header-height: 54px; // TODO: どこかに集約したい
 
 	--section-padding: 16px;
 	--margin: var(--marginHalf);
 
-	> .container {
 	height: 100%;
 	overflow: auto;
 	box-sizing: border-box;
@@ -156,6 +155,5 @@ export default defineComponent({
 		}
 	}
 }
-}
 </style>