separate module menu css

src/application/view/common/header/user.phtml

@@ -7,8 +7,9 @@
   <link rel="stylesheet" type="text/css" href="css/font.css" />
   <link rel="stylesheet" type="text/css" href="css/bi.css" />
   <link rel="stylesheet" type="text/css" href="css/common.css" />
-  <link rel="stylesheet" type="text/css" href="css/app.css" />
   <link rel="stylesheet" type="text/css" href="css/mobile.css" />
+  <link rel="stylesheet" type="text/css" href="css/app.css" />
+  <link rel="stylesheet" type="text/css" href="css/module/menu.css" />
   <script src="js/jquery.js"></script>
   <script src="js/home.js"></script>
 </head>

src/application/view/common/module/menu.phtml

@@ -1,4 +1,4 @@
-<div class="menu" id="moduleMenu">
+<div class="moduleMenu" id="moduleMenu">
   <a class="item" href="/" title="<?php echo _('Home') ?>">
     <i class="bi bi-house"></i>
   </a><a class="item" href="follow" title="<?php echo _('Follow') ?>">

src/public/css/app.css

@@ -33,31 +33,6 @@ a:active {
   margin-bottom: 64px
 }
 
-.container .menu {
-  margin-bottom: 6px
-}
-
-.container .menu .item {
-  display: inline-block;
-  background: rgba(39, 46, 57, 0.28);
-  /* background: rgba(101, 114, 134, 0.28); */
-  border-radius: 3px;
-  cursor: pointer;
-  text-align: center;
-  padding: 8px 16px;
-  margin: 2px
-}
-
-.container .menu .item.active,
-.container .menu .item:hover {
-  background: #272E39;
-}
-
-.container .menu .item span {
-  font-size: 12px;
-  margin: 0 8px
-}
-
 .container .post {
   margin-bottom: 14px;
   background: #272E39;

src/public/css/module/menu.css

@@ -0,0 +1,24 @@
+
+.moduleMenu {
+  margin-bottom: 6px
+}
+
+.moduleMenu .item {
+  display: inline-block;
+  background: rgba(39, 46, 57, 0.28);
+  border-radius: 3px;
+  cursor: pointer;
+  text-align: center;
+  padding: 8px 16px;
+  margin: 2px
+}
+
+.moduleMenu .item.active,
+.moduleMenu .item:hover {
+  background: #272E39;
+}
+
+.moduleMenu .item span {
+  font-size: 12px;
+  margin: 0 8px
+}