Mirroring/merakiui
1
0
Fork 0
mirror of https://github.com/bakateam/merakiui.git synced 2025-12-10 15:35:34 +00:00
Code Issues Projects Releases Wiki Activity

Add mobild design

Browse Source
This commit is contained in:
khatabwedaa
2021-09-21 10:54:07 +02:00
parent 3638921a33
commit 51cfd5c6fb
1 changed files with 24 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
pages/index.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="font-roboto"> <div class="relative font-roboto">
<header-component> <header-component>
<div class="container px-4 py-8 mx-auto lg:py-0"> <div class="container px-4 py-8 mx-auto lg:py-0">
<div class="lg:flex"> <div class="lg:flex">
@@ -46,7 +46,9 @@
</header-component> </header-component>
<div class="flex h-screen bg-white font-roboto"> <div class="flex h-screen bg-white font-roboto">
<div class="flex flex-col w-64 h-screen px-4 py-8 bg-white border-r border-gray-200"> <div :class="sidebarOpen ? 'block' : 'hidden'" @click="sidebarOpen = false" class="fixed inset-0 z-20 transition-opacity bg-black opacity-50 lg:hidden"></div>
<div :class="sidebarOpen ? 'translate-x-0 ease-out' : '-translate-x-full ease-in'" class="fixed inset-y-0 left-0 z-30 flex flex-col w-64 h-screen px-4 py-8 overflow-y-auto transition duration-300 transform bg-white border-r border-gray-200 lg:translate-x-0 lg:static lg:inset-0">
<a href="/" class="inline-flex items-center text-xl font-bold text-gray-700 md:text-2xl hover:text-blue-500"> <a href="/" class="inline-flex items-center text-xl font-bold text-gray-700 md:text-2xl hover:text-blue-500">
<img class="mr-2 w-7 h-7" src="../assets/svg/logo-sidebar.svg" alt="logo"> <span class="hidden md:inline">Meraki <span class="text-blue-500">UI</span></span> <img class="mr-2 w-7 h-7" src="../assets/svg/logo-sidebar.svg" alt="logo"> <span class="hidden md:inline">Meraki <span class="text-blue-500">UI</span></span>
</a> </a>
@@ -57,7 +59,7 @@
:key="category.name" :key="category.name"
> >
<app-button <app-button
@click="activeCategory = category.name" @click="updateCategory(category.name)"
class="block px-4 py-2 mt-2 font-medium rounded-md focus:outline-none" class="block px-4 py-2 mt-2 font-medium rounded-md focus:outline-none"
:class=" :class="
category.name === activeCategory category.name === activeCategory
@@ -121,6 +123,17 @@
</main> </main>
</div> </div>
</div> </div>
<button @click="sidebarOpen = !sidebarOpen" type="button" class="fixed z-50 flex items-center justify-center p-2 text-white bg-gray-900 rounded-full focus:outline-none lg:hidden bottom-4 right-4">
<span class="sr-only">Open site navigation</span>
<svg v-if="!sidebarOpen" class="w-8 h-8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21 18H9V16H21V18ZM21 13H3V11H21V13ZM21 8H9V6H21V8Z" fill="currentColor"></path>
</svg>
<svg v-if="sidebarOpen" class="w-8 h-8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.59 7L12 10.59L8.41 7L7 8.41L10.59 12L7 15.59L8.41 17L12 13.41L15.59 17L17 15.59L13.41 12L17 8.41L15.59 7Z" fill="currentColor"></path>
</svg>
</button>
</div> </div>
</template> </template>
@@ -282,6 +295,7 @@ export default {
data() { data() {
return { return {
sidebarOpen: false,
components_count: 64, components_count: 64,
categories: [], categories: [],
activeCategory: "Alerts", activeCategory: "Alerts",
@@ -298,5 +312,12 @@ export default {
return this.component.whereCategory(this.activeCategory); return this.component.whereCategory(this.activeCategory);
}, },
}, },
methods: {
updateCategory(category) {
this.activeCategory = category;
this.sidebarOpen = false;
}
}
}; };
</script> </script>