zhejiushizhuce 2 年 前
親
コミット
75c140b32a

+ 12 - 6
src/components/Logo/styles.module.scss

@@ -1,11 +1,11 @@
 .logo {
-    display: inline-flex;
-    flex: 1;
+    display: flex;
     align-items: center;
     gap: 8px;
     font-family: var(--heading-font);
     font-weight: 700;
     color: var(--header);
+    position: relative;
 
     &_highlight {
         background: var(--accent);
@@ -15,14 +15,20 @@
         justify-content: center;
     }
     .logo_img {
-        //height: 3rem;
-        //width: auto;
-        width: 85%;
-        height: auto;
+        height: 2.5rem;
+        width: auto;
+        //width: 85%;
+        //height: auto;
     }
     .logo_img_m{
         width: auto;
         height: 3.25rem;
+        @media screen and (max-width: 380px) {
+            height: 3rem;
+        }
+        @media screen and (max-width: 350px) {
+            height: 2.5rem;
+        }
     }
 
     &.sm {

+ 2 - 2
src/layout/Navbar/styles.module.scss

@@ -55,7 +55,7 @@
   font-weight: 600 !important;
   &_mobile{
     background-color: var(--nav-item-hover) !important;
-    width: 6.3rem !important;
+    width: 5.8rem !important;
     height:2rem !important;
   }
 }
@@ -69,7 +69,7 @@
   font-weight: 600 !important;
   margin-right: 1.5rem !important;
   &_mobile{
-    width: 6.3rem !important;
+    width: 5.8rem !important;
     height:2rem !important;
     margin-right: 0.1rem !important;
   }

+ 17 - 2
src/layout/Sidebar/index.jsx

@@ -129,6 +129,13 @@ const DrawerHeader = styled('div')(({ theme }) => ({
     gap:'12px',
     // backgroundColor:'#000',
     boxShadow:'var(--widget-shadow)',
+    position:'relative',
+    '& .logo_con':{
+        width:'80%'
+    },
+    '& .logo_con_m':{
+        width:'80%'
+    },
     // necessary for content to be below app bar
     ...theme.mixins.toolbar,
 }));
@@ -488,7 +495,11 @@ const Sidebar = () => {
                 <DrawerHeader>
                     <SidebarTrigger/>
                     {
-                        open?<Logo/>:<></>
+                        open?(
+                                <div className={'logo_con'}>
+                                    <Logo/>
+                                </div>
+                            ):<></>
                     }
                 </DrawerHeader>
                 <div className={`d-flex flex-column sidebar-nav ${visiblecls}`}>
@@ -520,7 +531,11 @@ const Sidebar = () => {
                 <DrawerHeader>
                     <SidebarTrigger/>
                     {
-                        open?<Logo/>:<></>
+                        open?(
+                            <div className={'logo_con_m'}>
+                                <Logo/>
+                            </div>
+                        ):<></>
                     }
                 </DrawerHeader>
                 <div className={`d-flex flex-column sidebar-nav ${visiblecls}`}>