Classic UI

src/client/ui/default.vue

@@ -1,9 +1,16 @@
 <template>
 <div class="mk-app" :class="{ wallpaper, isMobile }">
-	<div class="columns" :class="{ fullView }">
-		<div class="sidebar" ref="sidebar" v-if="!isMobile">
-			<XSidebar/>
-		</div>
+	<XHeaderMenu v-if="showMenuOnTop"/>
+
+	<div class="columns" :class="{ fullView, withGlobalHeader: showMenuOnTop }">
+		<template v-if="!isMobile">
+			<div class="sidebar" v-if="!showMenuOnTop">
+				<XSidebar/>
+			</div>
+			<div class="widgets left" ref="widgetsLeft" v-else>
+				<XWidgets @mounted="attachSticky('widgetsLeft')" :place="'left'"/>
+			</div>
+		</template>
 
 		<main class="main _panel" @contextmenu.stop="onContextmenu">
 			<header class="header" @click="onHeaderClick">
@@ -20,8 +27,8 @@
 			</div>
 		</main>
 
-		<div v-if="isDesktop" class="widgets" ref="widgets">
-			<XWidgets @mounted="attachSticky"/>
+		<div v-if="isDesktop" class="widgets right" ref="widgetsRight">
+			<XWidgets @mounted="attachSticky('widgetsRight')" :place="null"/>
 		</div>
 	</div>
 
@@ -60,7 +67,7 @@ import XDrawerSidebar from '@client/ui/_common_/sidebar.vue';
 import XCommon from './_common_/common.vue';
 import XHeader from './_common_/header.vue';
 import * as os from '@client/os';
-import { sidebarDef } from '@client/sidebar';
+import { menuDef } from '@client/menu';
 import * as symbols from '@client/symbols';
 
 const DESKTOP_THRESHOLD = 1100;
@@ -72,13 +79,14 @@ export default defineComponent({
 		XSidebar,
 		XDrawerSidebar,
 		XHeader,
+		XHeaderMenu: defineAsyncComponent(() => import('./default.header.vue')),
 		XWidgets: defineAsyncComponent(() => import('./default.widgets.vue')),
 	},
 
 	data() {
 		return {
 			pageInfo: null,
-			menuDef: sidebarDef,
+			menuDef: menuDef,
 			isMobile: window.innerWidth <= MOBILE_THRESHOLD,
 			isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
 			widgetsShowing: false,
@@ -94,6 +102,10 @@ export default defineComponent({
 				if (this.menuDef[def].indicated) return true;
 			}
 			return false;
+		},
+
+		showMenuOnTop(): boolean {
+			return !this.isMobile && this.$store.state.menuDisplay === 'top';
 		}
 	},
 
@@ -130,8 +142,8 @@ export default defineComponent({
 			}
 		},
 
-		attachSticky() {
-			const sticky = new StickySidebar(this.$refs.widgets, 16);
+		attachSticky(ref) {
+			const sticky = new StickySidebar(this.$refs[ref], this.$store.state.menuDisplay === 'top' ? 0 : 16, this.$store.state.menuDisplay === 'top' ? 60 : 0); // TODO: ヘッダーの高さを60pxと決め打ちしているのを直す
 			window.addEventListener('scroll', () => {
 				sticky.calc(window.scrollY);
 			}, { passive: true });
@@ -285,7 +297,7 @@ export default defineComponent({
 			> .header {
 				position: sticky;
 				z-index: 1000;
-				top: 0;
+				top: var(--globalHeaderHeight, 0px);
 				height: $header-height;
 				line-height: $header-height;
 				-webkit-backdrop-filter: blur(32px);
@@ -296,7 +308,7 @@ export default defineComponent({
 
 			> .content {
 				background: var(--bg);
-				--stickyTop: #{$header-height};
+				--stickyTop: calc(var(--globalHeaderHeight, 0px) + #{$header-height});
 			}
 
 			@media (max-width: 850px) {
@@ -317,12 +329,31 @@ export default defineComponent({
 			@media (max-width: $widgets-hide-threshold) {
 				display: none;
 			}
+
+			&.left {
+				margin-right: 16px;
+			}
 		}
 
 		> .sidebar {
 			margin-top: 16px;
 		}
 
+		&.withGlobalHeader {
+			--globalHeaderHeight: 60px; // TODO: 60pxと決め打ちしているのを直す
+
+			> .main {
+				margin-top: 2px;
+				border-radius: var(--radius);
+				box-shadow: 0 0 0 2px var(--divider);
+			}
+
+			> .widgets {
+				--stickyTop: var(--globalHeaderHeight);
+				margin-top: 0px;
+			}
+		}
+
 		@media (max-width: 850px) {
 			margin: 0;