generated from Seekra/repository-template
Compare commits
3
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
e7745a9bd3
|
||
|
|
32edb6d55f
|
||
|
|
876e661a73
|
@@ -1,16 +1,2 @@
|
||||
# Copyright 2026 Seekra
|
||||
|
||||
# Licensed under the Apache License, Version 2.0 (the "License");
|
||||
# you may not use this file except in compliance with the License.
|
||||
# You may obtain a copy of the License at
|
||||
|
||||
# http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
# Unless required by applicable law or agreed to in writing, software
|
||||
# distributed under the License is distributed on an "AS IS" BASIS,
|
||||
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
# See the License for the specific language governing permissions and
|
||||
# limitations under the License.
|
||||
|
||||
VITE_ASSETS_BUILD_ID=2026-08-04-76a067e
|
||||
VITE_ASSETS_BASE_URL=https://assets.seekra.jcloud-services.ddns.net
|
||||
|
||||
@@ -61,10 +61,6 @@ onMounted(async () => {
|
||||
});
|
||||
settingsLoaded.value = true;
|
||||
});
|
||||
|
||||
const toggleSidebarIfSmallScreen = function toggleSidebarIfSmallScreen (toggleSidebarFunction) {
|
||||
if (matchMedia('(max-width: 48rem)').matches) toggleSidebarFunction();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -75,14 +71,13 @@ const toggleSidebarIfSmallScreen = function toggleSidebarIfSmallScreen (toggleSi
|
||||
</h1>
|
||||
</header>
|
||||
<LeftSidebarLayout class="layout">
|
||||
<template #sidebar="{ toggleSidebar }">
|
||||
<template #sidebar>
|
||||
<ul class="sidebar-sections-list">
|
||||
<li v-for="section in settings">
|
||||
<RouterLink
|
||||
:to="`/settings/${section.name}`"
|
||||
class="button button-link link sidebar-section"
|
||||
:class="{ active: activeSection === section.name }"
|
||||
@click="toggleSidebarIfSmallScreen(toggleSidebar)"
|
||||
>
|
||||
{{ t(section.i18n) }}
|
||||
</RouterLink>
|
||||
|
||||
@@ -36,7 +36,7 @@ const toggleSidebar = function toggleSidebar () {
|
||||
<div class="sidebar-controls">
|
||||
<SidebarExpandButton @click="toggleSidebar" class="sidebar-expand-button" />
|
||||
</div>
|
||||
<div class="sidebar-content" v-show="props.expanded">
|
||||
<div class="sidebar-content" v-if="props.expanded">
|
||||
<slot />
|
||||
</div>
|
||||
</nav>
|
||||
@@ -61,10 +61,6 @@ const toggleSidebar = function toggleSidebar () {
|
||||
}
|
||||
|
||||
@media (max-width: 48rem) {
|
||||
.sidebar {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.sidebar:not(.expanded) .sidebar-expand-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -29,7 +29,7 @@ const props = defineProps({
|
||||
|
||||
const expanded = ref(props.expanded);
|
||||
|
||||
const toggleSidebar = function toggleSidebar () {
|
||||
const toggleExpanded = function toggleExpanded () {
|
||||
expanded.value = !expanded.value;
|
||||
};
|
||||
</script>
|
||||
@@ -37,13 +37,13 @@ const toggleSidebar = function toggleSidebar () {
|
||||
<template>
|
||||
<div class="layout-container" :class="{ expanded }">
|
||||
<div class="sidebar-expand-button-container">
|
||||
<SidebarExpandButton class="sidebar-expand-button" @click="toggleSidebar" />
|
||||
<SidebarExpandButton class="sidebar-expand-button" @click="toggleExpanded" />
|
||||
</div>
|
||||
<Sidebar @toggle-expanded="toggleSidebar" :expanded="expanded" class="sidebar">
|
||||
<slot name="sidebar" :toggleSidebar="toggleSidebar" />
|
||||
<Sidebar @toggle-expanded="toggleExpanded" :expanded="expanded" class="sidebar">
|
||||
<slot name="sidebar" />
|
||||
</Sidebar>
|
||||
<main class="main-content">
|
||||
<slot :toggleSidebar="toggleSidebar" />
|
||||
<slot />
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -87,8 +87,3 @@ input {
|
||||
.button:hover {
|
||||
background-color: var(--light-hover);
|
||||
}
|
||||
|
||||
/* Temporary until a custom tap highlight is implemented. */
|
||||
* {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
Reference in New Issue
Block a user