chore(refactor): update nav bar, add column view option for mobile

source/components/AppEditor.vue

@@ -1,18 +1,17 @@
 <script setup>
-import {
-	Tabs,
-	TabsList,
-	TabsTrigger,
-} from "@/components/ui/tabs";
+import { Button } from '@/components/ui/button';
 import CodeMirror from "./CodeMirror.vue";
 import { useAppStore } from "@/store";
+import { ref } from 'vue'
 
 const store = useAppStore();
 
 const update = (file, data) => {
 	store.code[file] = data;
 };
 
+const currentTab = ref('html')
+
 const tabs = [
 	["html", "index.html"],
 	["css", "style.css"],
@@ -21,17 +20,24 @@ const tabs = [
 </script>
 
 <template>
-	<div class="flex flex-col h-full">
-		<Tabs default-value="html" v-model="store.tab">
-			<TabsList class="w-full">
-				<TabsTrigger v-for="tab in tabs" :key="tab[0]" :value="tab[0]">
+	<div class="flex flex-col h-full relative">
+		<div
+			class="flex items-center flex-none pl-5 sm:pl-6 pr-4 lg:pr-6 antialiased border">
+			<div class="flex">
+				<Button 
+					v-for="tab in tabs" :key="tab[0]"
+					variant="ghost"
+					@click="currentTab = tab[0]"
+					:class="tab[0] === currentTab ? 'text-blue-500' : 'text-muted-foreground'"
+					class="relative rounded-none text-sm leading-6 font-semibold">
+					<span class="absolute bottom-0 inset-x-0 bg-blue-500 h-0.5 rounded-full transition-opacity duration-150" :class="{'opacity-0': tab[0] !== currentTab}"></span>
 					<span class="uppercase sm:hidden">{{ tab[0] }}</span>
 					<span class="hidden sm:inline">{{ tab[1] }}</span>
-				</TabsTrigger>
-			</TabsList>
-		</Tabs>
+				</Button>
+			</div>
+		</div>
 		<div class="flex-grow overflow-y-auto">
-			<CodeMirror v-for="tab in tabs" :key="tab[0]" :class="store.tab !== tab[0] ? 'hidden' : ''" :file="tab[1]"
+			<CodeMirror v-for="tab in tabs" :key="tab[0]" :class="currentTab !== tab[0] ? 'hidden' : ''" :file="tab[1]"
 				:content="store.code[tab[0]]" :lang="tab[0]" @change="(d) => update(tab[0], d)" />
 		</div>
 	</div>

source/components/BaseHeader.vue

@@ -11,18 +11,13 @@ import {
 	MenubarSubTrigger,
 	MenubarSubContent,
 } from './ui/menubar'
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from './ui/tooltip'
 import BaseLogo from './BaseLogo.vue'
-import { Button } from './ui/button'
+import IconButton from './IconButton.vue'
 import SplitView from './icons/SplitView.vue'
 import SideView from './icons/SideView.vue'
 import { useAppStore } from '@/store'
-import { useFullscreen } from '@/helpers/fullscreen';
+import { useFullscreen } from '@/helpers/fullscreen'
+import { onMounted, onBeforeUnmount } from 'vue'
 
 const fullscreen = useFullscreen()
 const store = useAppStore()
@@ -32,6 +27,20 @@ const newTab = () => window.open(window.location.href)
 const closeTab = () => window.close()
 const reloadTab = () => window.location.reload()
 
+function newTabHandler(ev) {
+	if (ev.key?.toLowerCase() === 'n' && ev.ctrlKey && ev.altKey) {
+		newTab()
+	}
+}
+
+onMounted(() => {
+	document.addEventListener('keydown', newTabHandler, false)
+})
+
+onBeforeUnmount(() => {
+	document.removeEventListener('keydown', newTabHandler)
+})
+
 </script>
 
 <template>
@@ -61,8 +70,8 @@ const reloadTab = () => window.location.reload()
 					<MenubarSubContent>
 						<MenubarItem @click="switchView('left')">Editor - only</MenubarItem>
 						<MenubarItem @click="switchView('right')">Preview - only</MenubarItem>
-						<MenubarItem @click="switchView('split')" class="hidden sm:inline-block">Split View
-						</MenubarItem>
+						<MenubarItem @click="switchView('column')">Column View</MenubarItem>
+						<MenubarItem @click="switchView('row')" class="hidden sm:flex">Row View</MenubarItem>
 					</MenubarSubContent>
 				</MenubarSub>
 				<MenubarSeparator />
@@ -93,41 +102,21 @@ const reloadTab = () => window.location.reload()
 			</MenubarContent>
 		</MenubarMenu>
 		<div class="flex-grow"></div>
-		<TooltipProvider>
-			<Tooltip>
-				<TooltipTrigger>
-					<Button variant="ghost" size="icon" @click="store.layout = 'left'">
-						<SideView />
-					</Button>
-				</TooltipTrigger>
-				<TooltipContent>
-					<p>Editor</p>
-				</TooltipContent>
-			</Tooltip>
-		</TooltipProvider>
-		<TooltipProvider>
-			<Tooltip>
-				<TooltipTrigger>
-					<Button variant="ghost" size="icon" @click="store.layout = 'split'" class="hidden sm:flex">
-						<SplitView />
-					</Button>
-				</TooltipTrigger>
-				<TooltipContent>
-					<p>Split view</p>
-				</TooltipContent>
-			</Tooltip>
-		</TooltipProvider>
-		<TooltipProvider>
-			<Tooltip>
-				<TooltipTrigger>
-					<Button variant="ghost" size="icon" @click="store.layout = 'right'">
-						<SideView class="rotate-180" />
-					</Button>
-				</TooltipTrigger>
-				<TooltipContent>
-					<p>Preview</p>
-				</TooltipContent>
-			</Tooltip>
-		</TooltipProvider>
+		<IconButton text="Editor" :mobile="true" :active="store.layout === 'left'"
+			@trigger="() => store.layout = 'left'">
+			<SideView />
+		</IconButton>
+		<IconButton text="Row view" :mobile="false" :active="store.layout === 'row'"
+			@trigger="() => store.layout = 'row'">
+			<SplitView />
+		</IconButton>
+		<IconButton text="Column view" :mobile="true" :active="store.layout === 'column'"
+			@trigger="() => store.layout = 'column'">
+			<SplitView class="rotate-90" />
+		</IconButton>
+		<IconButton text="Preview" :mobile="true" :active="store.layout === 'right'"
+			@trigger="() => store.layout = 'right'">
+			<SideView class="rotate-180" />
+		</IconButton>
 	</Menubar>
 </template>

source/components/BaseView.vue

@@ -12,16 +12,20 @@ const store = useAppStore()
 const panelLeft = ref()
 const panelRight = ref()
 
+const verticalAlign = ref(false)
+
 watchEffect(() => {
 	const view = store.layout
 	if (view === 'left') viewLeft()
 	else if (view === 'right') viewRight()
-	else splitView()
+	else if (view === 'column') splitView(true)
+	else splitView(false)
 })
 
-function splitView() {
+function splitView(column = false) {
 	panelLeft.value?.expand()
 	panelRight.value?.expand()
+	verticalAlign.value = !!column
 }
 
 function viewLeft() {
@@ -31,15 +35,16 @@ function viewLeft() {
 function viewRight() {
 	!panelLeft.value?.isCollapsed && panelLeft.value?.collapse()
 }
+
 </script>
 
 <template>
-	<ResizablePanelGroup id="demo-group-1" direction="horizontal" class="bg-yello-300 box">
+	<ResizablePanelGroup id="demo-group-1" :direction="verticalAlign ? 'vertical' : 'horizontal'" class="bg-yello-300 box">
 		<ResizablePanel ref="panelLeft" id="demo-panel-1" :default-size="50" collapsible :collapsed-size="0"
 			:min-size="35" class="overflow-y-auto">
 			<slot name="left"></slot>
 		</ResizablePanel>
-		<ResizableHandle id="demo-handle-1" class="hover:w-1" />
+		<ResizableHandle id="demo-handle-1" :class="{ 'hover:w-1': !verticalAlign }" />
 		<ResizablePanel ref="panelRight" id="demo-panel-2" :default-size="50" collapsible :collapsed-size="0"
 			:min-size="35" class="overflow-y-auto">
 			<slot name="right"></slot>

source/components/IconButton.vue

@@ -0,0 +1,29 @@
+<script setup>
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from './ui/tooltip'
+import { Button } from './ui/button'
+
+defineProps(['text', 'active', 'mobile'])
+
+const emit = defineEmits(['trigger'])
+</script>
+
+<template>
+	<TooltipProvider :delay-duration="0">
+		<Tooltip>
+			<TooltipTrigger>
+				<Button variant="ghost" size="icon" @click="emit('trigger')"
+					:class="[active ? 'text-blue-500' : 'text-muted-foreground', mobile ? '' : 'hidden sm:inline-flex']">
+					<slot></slot>
+				</Button>
+			</TooltipTrigger>
+			<TooltipContent>
+				<p>{{ text }}</p>
+			</TooltipContent>
+		</Tooltip>
+	</TooltipProvider>
+</template>

source/store/index.js

@@ -6,9 +6,7 @@ import { useToast } from '@/components/ui/toast/use-toast'
 const prevSession = restore() || template
 
 export const useAppStore = defineStore("app", () => {
-	const layout = ref("split");
-
-	const tab = ref("html");
+	const layout = ref(window.innerWidth < 768 ? 'column' : 'row');
 
 	const code = reactive({
 		html: prevSession['index.html'],
@@ -40,5 +38,5 @@ export const useAppStore = defineStore("app", () => {
 		}
 	});
 
-	return { layout, code, tab, saveSession };
+	return { layout, code, saveSession };
 });