added browse page and fixed some layout problems

frontend/src/App.vue

@@ -4,27 +4,33 @@ import TheWelcome from './components/TheWelcome.vue'
 import PeldaKomponens from "@/components/pelda-komponens.vue";
 import RegisterKomponens from "@/components/register-komponens.vue";
 import IntroKomponens from "@/components/intro-komponens.vue";
+
+import {ref} from "vue";
+import BrowseKomponens from "@/components/browse-komponens.vue";
+// import loggedIn from "@/components/login-komponens.vue"
+const isNotLoggedIn = ref(false);
+
+function setStatus(status){
+  isNotLoggedIn.value = !status;
+}
+
 </script>
 
 <template>
   <header>
-    <HelloWorld msg="TechnoCool NoteStore" />
+    <HelloWorld msg="TechnoCool NoteStore" @status="setStatus" />
   </header>
-
-<!--  <PeldaKomponens />-->
-
-
-  <main>
-<!--    <TheWelcome />-->
-    <h1>A TechnoCool NoteStore jegyzetek, segédanyagok hallgatók közötti egyszerű megosztására alkalmas szolgáltatás.</h1>
-  </main>
-<!--  <main>-->
-<!--    <h2>Az oldal eléréséhez jelentkezz be.</h2>-->
-<!--    <h3>Nincsen felhasználód? <register-komponens/></h3>-->
-<!--  </main>-->
-  <main>
-    <intro-komponens/>
-  </main>
+  <div v-if="isNotLoggedIn">
+    <main>
+      <h1>A TechnoCool NoteStore jegyzetek, segédanyagok hallgatók közötti egyszerű megosztására alkalmas szolgáltatás.</h1>
+      <div>
+        <intro-komponens/>
+      </div>
+    </main>
+  </div>
+  <div v-else>
+    <browse-komponens/>
+  </div>
 </template>
 
 <style scoped>
@@ -38,20 +44,19 @@ import IntroKomponens from "@/components/intro-komponens.vue";
 @media (min-width: 1024px) {
 
   main {
-    display: block;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
     width: 100%;
     height: 100%;
     color: lightseagreen;
+    padding: 20px;
   }
 
   header {
     display: block;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
     line-height: 1.5;
     background-color: #224c49;
+    margin: 10px 0 20px 0;
   }
 
   .logo {

frontend/src/assets/main.css

 @import './base.css';
 
 #app {
-  max-width: 1280px;
+  /*max-width: 1280px;*/
   margin: 0 auto;
   padding: 2rem;
   font-weight: normal;
+  width: 100%;
 }
 
 a,
@@ -24,12 +25,12 @@ a,
 @media (min-width: 1024px) {
   body {
     display: flex;
-    place-items: center;
+    place-items: flex-start;
   }
 
   #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
+    display: block;
+    /*grid-template-columns: 1fr 1fr;*/
     padding: 0 2rem;
   }
 }

frontend/src/components/HelloWorld.vue

@@ -22,17 +22,14 @@ defineProps({
 <!--    </h3>-->
 <!--    <div class="space"></div>-->
     <div class="login">
-      <LoginKomponens />
+      <LoginKomponens @status="(value) => this.$emit('status', value)" />
     </div>
   </div>
 </template>
 
 <style scoped>
 
-.login {
-  position: fixed;
-  right: 5%;
-}
+
 
 .title {
   color: lightseagreen;
@@ -72,10 +69,10 @@ h3 {
   }
 
   .greetings {
-    display: flex;
+    display: grid;
     padding: 1em;
-    place-items: center flex-start;
-    flex-wrap: wrap;
+    grid-template-columns: 1fr 4fr 2fr;
+    align-items: center;
   }
 
   .space {

frontend/src/components/browse-komponens.vue

+<script setup>
+
+</script>
+
+<template>
+  <div class="page-wrapper">
+    <main class="browse">
+      <ul class="browse-list">
+        <li class="module">Modul 1</li>
+        <li>Jegyzet</li>
+        <li>Jegyzet</li>
+        <li class="module">Modul 2</li>
+        <li>Jegyzet</li>
+      </ul>
+    </main>
+    <main>
+      <div class="note-page">
+        <h2 class="note-header">Jegyzet</h2>
+        <h3 class="note-description">
+          Jegyzet leírása
+        </h3>
+        <h4>Feltőltő neve</h4>
+        <button>Letöltés</button>
+      </div>
+    </main>
+  </div>
+</template>
+
+<style scoped>
+
+.page-wrapper{
+  display: grid;
+  grid-auto-flow: row;
+  grid-template-columns: 1fr 2fr;
+  column-gap: 10px;
+  padding: 0 10% 0 10%;
+}
+
+.browse-list{
+  list-style-type: none;
+  padding: 0;
+}
+
+li {
+  padding: 2px;
+}
+
+.browse, .note-page {
+  border: 1px solid lightseagreen;
+  padding: 5px;
+}
+
+.module {
+  background-color: #224c49;
+}
+
+.note-page > h4 {
+  color: lightseagreen;
+}
+
+.note-page {
+  padding: 15px;
+}
+
+</style>
\ No newline at end of file

frontend/src/components/login-komponens.vue

@@ -55,14 +55,28 @@ function login(){
   }
 }
 
+
 </script>
 
 <template>
-  <h1>{{userName}}</h1>
-  <button class="grow" @click="login">{{btnText}}</button>
+  <div class="wrapper">
+    <h2 class="user">{{userName}}</h2>
+    <button class="grow" @click="login" >{{btnText}}</button>
+  </div>
 </template>
 
 <style scoped>
+
+.wrapper {
+  display: flex;
+}
+
+.user {
+  color: lightseagreen;
+  width: 200px;
+  text-align: center;
+}
+
 button {
   height: 40px;
   width: 130px;