vue3-uikit

1
<template>
2
    <Header />
3
    <div class="main-layout">
4
        <Sidebar class="sidebar" />
5
        <router-view class="content" />
6
    </div>
7
    <Footer />
8
</template>
9

10
<script>
11
import Header from './components/Header.vue';
12
import Sidebar from './components/Sidebar.vue';
13
import Footer from './components/Footer.vue';
14

15
export default {
16
    components: {
17
        Header,
18
        Sidebar,
19
        Footer,
20
    },
21
};
22
</script>
23

24
<style>
25
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
26

27
body {
28
    font-family: 'Roboto', sans-serif;
29
    margin: 0;
30
}
31

32
#app {
33
    display: flex;
34
    flex-direction: column;
35
    min-height: 100vh;
36
}
37

38
.main-layout {
39
    display: flex;
40
    flex: 1;
41
}
42

43
.sidebar {
44
    width: 250px;
45
}
46

47
.content {
48
    /* flex: 1; */
49
    padding: 16px;
50
}
51

52
/* Мобильные стили */
53
@media (max-width: 768px) {
54
    .main-layout {
55
        flex-direction: column;
56
    }
57

58
    .sidebar {
59
        width: 100%;
60
    }
61
}
62
</style>
63