Gava/agenciapsilmno
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New responsive topbar

Browse Source
This commit is contained in:
Cagatay Civici
2024-07-29 18:35:38 +03:00
parent d8bf9b3bde
commit 20eedb4b2b
7 changed files with 99 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/layout/_content.scss
View File

@@ -3,7 +3,7 @@
flex-direction: column;
min-height: 100vh;
justify-content: space-between;
padding: 7rem 2rem 2rem 4rem;
padding: 6rem 2rem 2rem 4rem;
transition: margin-left var(--layout-section-transition-duration);
}

6
src/assets/layout/_menu.scss
View File

@@ -5,7 +5,7 @@
z-index: 999;
overflow-y: auto;
user-select: none;
top: 7rem;
top: 6rem;
left: 2rem;
transition:
transform var(--layout-section-transition-duration),
@@ -13,10 +13,6 @@
background-color: var(--surface-overlay);
border-radius: var(--content-border-radius);
padding: 0.5rem 1.5rem;
box-shadow:
0px 3px 5px rgba(0, 0, 0, 0.02),
0px 0px 2px rgba(0, 0, 0, 0.05),
0px 1px 4px rgba(0, 0, 0, 0.08);
}
.layout-menu {

4
src/assets/layout/_responsive.scss
View File

@@ -22,6 +22,10 @@
height: 100vh;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
box-shadow:
0px 3px 5px rgba(0, 0, 0, 0.02),
0px 0px 2px rgba(0, 0, 0, 0.05),
0px 1px 4px rgba(0, 0, 0, 0.08);
}
&.layout-overlay-active {

78
src/assets/layout/_topbar.scss
View File

@@ -1,6 +1,6 @@
.layout-topbar {
position: fixed;
height: 5rem;
height: 4rem;
z-index: 997;
left: 0;
top: 0;
@@ -10,59 +10,64 @@
transition: left var(--layout-section-transition-duration);
display: flex;
align-items: center;
box-shadow:
0px 3px 5px rgba(0, 0, 0, 0.02),
0px 0px 2px rgba(0, 0, 0, 0.05),
0px 1px 4px rgba(0, 0, 0, 0.08);
.layout-topbar-logo {
.layout-topbar-logo-container {
width: 300px;
display: flex;
align-items: center;
color: var(--text-color);
}
.layout-topbar-logo {
display: inline-flex;
align-items: center;
font-size: 1.5rem;
border-radius: var(--content-border-radius);
color: var(--text-color);
font-weight: 500;
width: 300px;
border-radius: 12px;
gap: 0.5rem;
svg {
width: 3rem;
margin-right: 0.5rem;
}
&:focus {
&:focus-visible {
@include focused();
}
}
.layout-topbar-button {
.layout-topbar-action {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
color: var(--text-color-secondary);
border-radius: 50%;
width: 3rem;
height: 3rem;
cursor: pointer;
width: 2.5rem;
height: 2.5rem;
color: var(--text-color);
transition: background-color var(--element-transition-duration);
cursor: pointer;
&:hover {
color: var(--text-color);
background-color: var(--surface-hover);
}
&:focus {
&:focus-visible {
@include focused();
}
i {
font-size: 1.5rem;
font-size: 1.25rem;
}
span {
font-size: 1rem;
display: none;
}
&.layout-topbar-action-highlight {
background-color: var(--primary-color);
color: var(--primary-contrast-color);
}
}
.layout-menu-button {
@@ -71,10 +76,6 @@
.layout-topbar-menu-button {
display: none;
i {
font-size: 1.25rem;
}
}
.layout-topbar-actions {
@@ -83,7 +84,8 @@
gap: 1rem;
}
.layout-topbar-menu {
.layout-topbar-menu-content {
display: flex;
gap: 1rem;
}
@@ -95,16 +97,14 @@
@media (max-width: 991px) {
.layout-topbar {
justify-content: space-between;
.layout-topbar-logo {
.layout-topbar-logo-container {
width: auto;
order: 2;
margin-left: 1rem;
}
.layout-menu-button {
margin-left: 0;
margin-right: 1rem;
order: 1;
}
@@ -119,27 +119,29 @@
.layout-topbar-menu {
position: absolute;
flex-direction: column;
background-color: var(--surface-overlay);
transform-origin: top;
box-shadow:
0px 3px 5px rgba(0, 0, 0, 0.02),
0px 0px 2px rgba(0, 0, 0, 0.05),
0px 1px 4px rgba(0, 0, 0, 0.08);
border-radius: 12px;
border-radius: var(--content-border-radius);
padding: 1rem;
right: 2rem;
top: 5rem;
top: 4rem;
min-width: 15rem;
.layout-topbar-button {
margin-left: 0;
.layout-topbar-menu-content {
gap: 0.5rem;
}
.layout-topbar-action {
display: flex;
width: 100%;
height: auto;
justify-content: flex-start;
border-radius: 12px;
padding: 1rem;
border-radius: var(--content-border-radius);
padding: 0.5rem 1rem;
i {
font-size: 1rem;
@@ -152,12 +154,16 @@
}
}
}
.layout-topbar-menu-content {
flex-direction: column;
}
}
}
.config-panel {
position: absolute;
top: calc(100% + 2px);
top: 3.25rem;
right: 0;
width: 16rem;
padding: 0.75rem;

1
src/assets/layout/_utils.scss
View File

@@ -9,7 +9,6 @@
background: var(--surface-card);
padding: 2rem;
margin-bottom: 2rem;
border: 1px solid var(--surface-border);
border-radius: var(--content-border-radius);
&:last-child {

28
src/layout/AppTopbar.vue
View File

@@ -7,6 +7,7 @@ const { onMenuToggle, toggleDarkMode, isDarkTheme } = useLayout();
<template>
<div class="layout-topbar">
<div class="layout-topbar-logo-container">
<router-link to="/" class="layout-topbar-logo">
<svg width="85" height="63" viewBox="0 0 85 63" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
@@ -25,23 +26,24 @@ const { onMenuToggle, toggleDarkMode, isDarkTheme } = useLayout();
/>
</svg>
<span class="text-color">SAKAI</span>
<span>SAKAI</span>
</router-link>
</div>
<button class="p-link layout-menu-button layout-topbar-button" @click="onMenuToggle">
<button class="layout-menu-button layout-topbar-action" @click="onMenuToggle">
<i class="pi pi-bars"></i>
</button>
<div class="layout-topbar-actions">
<div class="layout-config-menu">
<button type="button" class="p-link layout-topbar-button" @click="toggleDarkMode">
<button type="button" class="layout-topbar-action" @click="toggleDarkMode">
<i :class="['pi', { 'pi-moon': isDarkTheme, 'pi-sun': !isDarkTheme }]"></i>
</button>
<div class="relative">
<button
v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein', leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout', hideOnOutsideClick: true }"
type="button"
class="p-link layout-topbar-button"
class="layout-topbar-action layout-topbar-action-highlight"
>
<i class="pi pi-palette"></i>
</button>
@@ -50,26 +52,28 @@ const { onMenuToggle, toggleDarkMode, isDarkTheme } = useLayout();
</div>
<button
class="p-link layout-topbar-menu-button layout-topbar-button"
v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein flex', enterToClass: 'flex', leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout', hideOnOutsideClick: true }"
class="layout-topbar-menu-button layout-topbar-action"
v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein', leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout', hideOnOutsideClick: true }"
>
<i class="pi pi-ellipsis-v"></i>
</button>
<div class="layout-topbar-menu hidden lg:flex">
<button type="button" class="p-link layout-topbar-button">
<div class="layout-topbar-menu hidden lg:block">
<div class="layout-topbar-menu-content">
<button type="button" class="layout-topbar-action">
<i class="pi pi-calendar"></i>
<span>Calendar</span>
</button>
<button type="button" class="p-link layout-topbar-button">
<i class="pi pi-cog"></i>
<span>Settings</span>
<button type="button" class="layout-topbar-action">
<i class="pi pi-inbox"></i>
<span>Messages</span>
</button>
<button type="button" class="p-link layout-topbar-button">
<button type="button" class="layout-topbar-action">
<i class="pi pi-user"></i>
<span>Profile</span>
</button>
</div>
</div>
</div>
</div>
</template>

10
src/layout/composables/layout.js
View File

@@ -36,6 +36,16 @@ export function useLayout() {
};
const toggleDarkMode = () => {
if (!document.startViewTransition) {
executeDarkModeToggle();
return;
}
document.startViewTransition(() => executeDarkModeToggle(event));
};
const executeDarkModeToggle = () => {
layoutConfig.darkTheme = !layoutConfig.darkTheme;
document.documentElement.classList.toggle('app-dark');
};