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; flex-direction: column;
min-height: 100vh; min-height: 100vh;
justify-content: space-between; justify-content: space-between;
padding: 7rem 2rem 2rem 4rem; padding: 6rem 2rem 2rem 4rem;
transition: margin-left var(--layout-section-transition-duration); transition: margin-left var(--layout-section-transition-duration);
} }

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

@@ -5,7 +5,7 @@
z-index: 999; z-index: 999;
overflow-y: auto; overflow-y: auto;
user-select: none; user-select: none;
top: 7rem; top: 6rem;
left: 2rem; left: 2rem;
transition: transition:
transform var(--layout-section-transition-duration), transform var(--layout-section-transition-duration),
@@ -13,10 +13,6 @@
background-color: var(--surface-overlay); background-color: var(--surface-overlay);
border-radius: var(--content-border-radius); border-radius: var(--content-border-radius);
padding: 0.5rem 1.5rem; 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 { .layout-menu {

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

@@ -22,6 +22,10 @@
height: 100vh; height: 100vh;
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-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 { &.layout-overlay-active {

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

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

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

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

28
src/layout/AppTopbar.vue
View File

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

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

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