Skip to content

Commit

Permalink
Refactor basic layout to be responsive with mobile view (#412)
Browse files Browse the repository at this point in the history
* feat: add layout demo to layout page

* refactor: update sidebar only layout locale switcher

* refactor: update locale switcher style in sidebar related layout

* chore: add locale and constants for layout demo

* chore: update constant in layout store

* refactor: update key for layout in store

* chore: update user menu placement in sidebar header layout

* refactor: maintain consistency for user menu in layout

* style: update sidebar only user menu style

* chore: update border for sidebar user menu

* style: update basic layout css responsive to mobile view

* chore: update padding for basic layout header

* refactor: make basic layout mobile responsive

* chore: update sidebar only layout test snap

* feat: implement click outside for mobile view menu

* chore: change gap between menu

* chore: update spacing between menu
  • Loading branch information
KabinKhandThakuri authored Dec 6, 2024
1 parent 8844716 commit 09ba86b
Show file tree
Hide file tree
Showing 10 changed files with 105 additions and 20 deletions.
2 changes: 0 additions & 2 deletions apps/demo/src/assets/css/overrides.css
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
.layout.basic {
--layout-basic-max-width: 100%;

padding: 0 2rem;
}

.layout header > nav {
Expand Down
11 changes: 2 additions & 9 deletions packages/vue-layout/src/assets/css/components/footer.css
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,10 @@
box-shadow: 0 0 0 100vmax var(--footer-bg-color);
clip-path: inset(0 -100vmax);
display: flex;
flex-direction: column;
flex-direction: row;
font-size: var(--footer-font-size);
gap: var(--footer-gap);
justify-content: center;
justify-content: space-between;
padding-bottom: var(--footer-padding-v);
padding-top: var(--footer-padding-v);
text-align: center;
Expand All @@ -23,10 +23,3 @@
.layout > footer .version {
font-size: calc(0.8 * var(--footer-font-size));
}

@media screen and (min-width: 576px) {
.layout > footer {
flex-direction: row;
justify-content: space-between;
}
}
2 changes: 1 addition & 1 deletion packages/vue-layout/src/assets/css/components/header.css
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@
flex: 1;
}

@media screen and (min-width: 576px) {
@media screen and (min-width: 768px) {
.layout > header {
grid-template-areas: "logo nav";
justify-items: stretch;
Expand Down
92 changes: 90 additions & 2 deletions packages/vue-layout/src/assets/css/layouts/basic.css
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,102 @@
width: 100%;
}

.layout.basic > header {
--header-logo-max-width: 120px;

height: var(--layout-header-height, 5.5rem);
}

.layout.basic > header > nav {
gap: 0.25rem;
}

.layout.basic > header > nav[data-expanded="true"] {
--layout-basic-padding-left: 0;
--layout-basic-padding-right: 0;

left: calc(var(--layout-basic-padding-h)*-1);
opacity: 1;
padding: 0;
right: calc(var(--layout-basic-padding-h)*-1);
}

.layout.basic > header > nav[data-expanded="true"] > .menu {
--_layout-nav-menu-padding-v: var(--layout-nav-menu-padding-v, 0.75rem);
--_layout-nav-menu-padding-h: 0;

padding: var(--_layout-nav-menu-padding-v) var(--_layout-nav-menu-padding-h);
}

.layout.basic > header > nav[data-expanded="true"] > .menu > ul {
--menu-margin-left: 0;
}

.layout.basic > header > nav[data-expanded="true"] ul > li > a {
--_nav-item-padding-h: var(--layout-menu-item-padding-h, 1rem);
--_nav-item-padding-v: var(--layout-menu-item-padding-v, .625rem);

font-size: var(--header-font-size);
padding: var(--_nav-item-padding-v) var(--_nav-item-padding-h);
}

.layout.basic > header > nav[data-expanded="true"] nav.locale-switcher {
--_layout-nav-menu-margin-v: var(--layout-nav-menu-margin-v, 0.75rem);
--locale-switcher-width: 100%;

font-size: var(--header-font-size);
margin-top: var(--_layout-nav-menu-margin-v);
margin-bottom: 0.25rem;
}

.layout.basic > header > nav[data-expanded="true"] nav.locale-switcher .dropdown {
left: 0;
}

.layout.basic > header nav.locale-switcher,
.layout.basic > header nav.menu li>a {
--_menu-item-padding-h: 0.5em;
--_menu-item-padding-v: 0.4em;

font-size: 0.9rem;
}

.layout.basic > main {
display: grid;
flex: 1;
}

@media screen and (min-width: 1200px) {
.layout.basic > :is(footer, header, main) {
padding-left: 0;
padding-right: 0;
padding-left: 2rem;
padding-right: 2rem;
}

.layout.basic > header {
--header-logo-max-width: 150px;
}

.layout.basic > header > nav {
gap: 0.5rem;
}


.layout.basic > header > nav[data-expanded="true"] > .menu {
--_layout-nav-menu-padding-v: 1rem;
--_layout-nav-menu-padding-h: 1rem;

padding: var(--_layout-nav-menu-padding-v) var(--_layout-nav-menu-padding-h);
}

.layout.basic > header nav.locale-switcher,
.layout.basic > header nav.menu li>a {
--_menu-item-padding-h: 1em;
--_menu-item-padding-v: 0.625em;

font-size: 1rem;
}

.layout.basic > header > nav[data-expanded="true"] nav.locale-switcher {
--locale-switcher-width: 9rem;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@
}
}

@media screen and (min-width: 576px) {
@media screen and (min-width: 768px) {
.layout.sidebar-header-layout > .no-sidebar {
display: block;
}
Expand Down
8 changes: 7 additions & 1 deletion packages/vue-layout/src/components/AppHeader.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<header>
<header ref="dzangolabVueAppHeader">
<slot name="logo" class="logo">
<Logo v-if="!noLogo" :route="home" />
</slot>
Expand Down Expand Up @@ -36,6 +36,7 @@ export default {
import { useConfig } from "@dzangolab/vue3-config";
import { LocaleSwitcher } from "@dzangolab/vue3-i18n";
import { Icon } from "@iconify/vue";
import { onClickOutside } from "@vueuse/core";
import { ref } from "vue";
import Logo from "./Logo.vue";
Expand All @@ -48,6 +49,7 @@ defineProps({
const { layout: layoutConfig } = useConfig();
const dzangolabVueAppHeader = ref(null);
const expanded = ref(false);
const home =
Expand All @@ -61,6 +63,10 @@ const toggle = () => {
expanded.value = !expanded.value;
};
onClickOutside(dzangolabVueAppHeader, (event) => {
expanded.value = false;
});
defineExpose({
expanded,
});
Expand Down
2 changes: 1 addition & 1 deletion packages/vue-layout/src/components/Logo.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<router-link :to="{ name: route }" class="logo">
<img :src="logo" alt="" />
<img :src="logo" alt="dzango" />
</router-link>
</template>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ exports[`AppHeader Snapshot > matches snapshot 1`] = `
class="logo"
>
<img
alt=""
alt="dzango"
src="/logo.png"
/>
</a>
Expand Down
2 changes: 1 addition & 1 deletion packages/vue-ui/src/ResponsiveMenu/Index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ nav.menu a {
text-decoration: none;
}
@media screen and (min-width: 576px) {
@media screen and (min-width: 768px) {
nav.menu > ul {
align-items: center;
flex-direction: row;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ exports[`SidebarOnlyLayout > matches snapshot 1`] = `
href="/"
>
<img
alt=""
alt="dzango"
src="/logo.png"
/>
</a>
Expand Down

0 comments on commit 09ba86b

Please sign in to comment.