update ui of the big menu

css/sideMenu.css

@@ -122,3 +122,68 @@
     width: 0;
     transition-property: width;
 }
+
+#side-menu.side-menu-big {
+    max-width: 100%;
+    height: auto;
+}
+
+.side-menu-big .side-menu-header {
+    height: auto;
+}
+
+.side-menu-big .side-menu-apps-list {
+    height: auto;
+    position: static;
+    max-width: 100vh;
+    overflow: auto;
+}
+
+.side-menu-big .side-menu-app a {
+    padding: 7px 0 7px 7px;
+}
+
+.side-menu-categories-wrapper {
+    padding: 0 10% 50px 10%;
+}
+
+.side-menu-categories {
+    width: 100%;
+    max-height: calc(100vh - 50px);
+    overflow: auto;
+    position: relative;
+    top: 50px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.side-menu-category {
+    flex: auto;
+    margin: 10px;
+}
+
+.side-menu-category-title {
+    padding-left: 10px;
+    color: var(--side-menu-text-color, #fff);
+}
+
+.side-menu-big .side-menu-app-icon {
+    vertical-align: middle;
+    margin-top: -2px;
+}
+
+@media screen and (max-width: 1024px) {
+    .side-menu-categories-wrapper {
+        padding-left: 0;
+        padding-right: 0;
+    }
+
+    .side-menu-categories {
+        display: block;
+    }
+
+    .side-menu-category {
+        margin: 10px 0;
+    }
+}

src/SideMenuBig.vue

@@ -15,18 +15,26 @@ You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
-    <div id="side-menu">
-		<div v-for="category in items">
-			<h2 v-html="category.name"></h2>
+    <div id="side-menu" class="side-menu-big">
+        <div class="side-menu-header">
+            <button class="side-menu-opener"></button>
+        </div>
 
-			<ul>
-			    <li v-for="app in category.apps">
-					<a v-bind:href="app.href" v-bind:title="app.name">
-						 <img class="side-menu-app-icon" v-bind:src="app.icon"></span>
-						 <span class="side-menu-app-text" v-html="app.name"></span>
-					</a>
-				</li>
-			</ul>
+		<div class="side-menu-categories-wrapper">
+			<div class="side-menu-categories">
+				<div class="side-menu-category" v-for="category in items">
+					<h2 class="side-menu-category-title" v-html="category.name"></h2>
+
+					<ul class="side-menu-apps-list">
+						<li class="side-menu-app" v-for="app in category.apps">
+							<a v-bind:href="app.href" v-bind:title="app.name">
+								 <img class="side-menu-app-icon" v-bind:src="app.icon"></span>
+								 <span class="side-menu-app-text" v-html="app.name"></span>
+							</a>
+						</li>
+					</ul>
+				</div>
+			</div>
 		</div>
     </div>
 </template>