[frontend] responsive test

Iceshrimp.Frontend/Layout/MainLayout.razor.css

@@ -6,4 +6,18 @@
 }
 .main {
     width: 100%;
+}
+
+.widget-panel{
+    
+}
+.sidebar {
+    
+}
+
+@media (max-width: 700px) {
+    .widget-panel {
+        display: none;
+    }
+    
 }

Iceshrimp.Frontend/Layout/Sidebar.razor

@@ -1,23 +1,54 @@
 @using Iceshrimp.Frontend.Components
+@using Iceshrimp.Assets.PhosphorIcons
 <div class="sidebar">
     <div class="header">
-            <account-dropdown />
+        <account-dropdown />
     </div>
     <div class="nav">
         <div class="sidebar-btn">
             <NavLink href="/">
-                Timeline
+                <Icon Name="Icons.House" />
+                <span class="text">Timeline</span>
             </NavLink>
         </div>
         <div class="sidebar-btn">
             <NavLink href="/notifications">
-                Notifications
+                <Icon Name="Icons.Bell"/>
+                <span class="text">Notifications</span>
+            </NavLink>
+        </div>
+        <button @onclick="Open" class="sidebar-btn">
+            <Icon Name="Icons.Pencil"/>
+            <span class="text">Open!</span>
+            <Compose @ref="_compose"/>
+            @* <button @onclick="Open">Open!</button> *@
+        </button>
+    </div>
+</div>
+
+<div class="bottom-bar">
+    <div class="nav">
+        <button class="sidebar-btn">
+            <Icon Name="Icons.List" /> 
+        </button>
+        <div class="sidebar-btn">
+            <NavLink href="/">
+                <Icon Name="Icons.House"/>
+                <span class="text">Timeline</span>
             </NavLink>
         </div>
         <div class="sidebar-btn">
-            <Compose @ref="_compose" />
+            <NavLink href="/notifications">
-            <button @onclick="Open">Open!</button>
+                <Icon Name="Icons.Bell"/>
+                <span class="text">Notifications</span>
+            </NavLink>
         </div>
+        <button @onclick="Open" class="sidebar-btn">
+            <Icon Name="Icons.Pencil"/>
+            <span class="text">Open!</span>
+            <Compose @ref="_compose"/>
+            @* <button @onclick="Open">Open!</button> *@
+        </button>
     </div>
 </div>
 @code {

Iceshrimp.Frontend/Layout/Sidebar.razor.css

@@ -1,37 +1,91 @@
-.sidebar {
+@media (min-width: 701px) {
-    display: flex;
+    .sidebar {
-    flex-direction: column;
+        display: flex;
-    height: 100vh;
+        flex-direction: column;
-    max-width: 15rem;
+        height: 100vh;
-    min-width: 15rem;
+        max-width: 15rem;
-    flex-grow: 1;
+        min-width: 15rem;
-    background-color: var(--foreground-color);
+        flex-grow: 1;
+        background-color: var(--foreground-color);
+    }
+
+    .header {
+        height: 5rem;
+    }
+
+    .sidebar-btn {
+        display: flex;
+        height: 2.5rem;
+        align-items: center;
+        justify-content: start;
+        border-radius: 1.25rem;
+        padding-inline: 0.5rem;
+        margin-bottom: 0.5rem;
+        margin-inline: 1rem;
+        color: black;
+        font-size: 0.9em;
+        background: var(--accent-color)
+    }
+
+    .btn:hover {
+        background-color: var(--hover-color);
+    }
+
+    .icon {
+        display: flex;
+        margin: 0.5rem;
+        align-items: center;
+        color: black;
+    }
+
+    .bottom-bar {
+        display: none;
+    }
 }
 
-.header {
+@media (max-width: 700px) {
-    height: 5rem;
+    .sidebar {
-}
+        display: none;
-.sidebar-btn {
+    }
-    display: flex;
+    .bottom-bar {
-    height: 2.5rem;
+        width: 100vw;
-    align-items: center;
+        position: fixed;
-    justify-content: start;
+        bottom: 0;
-    border-radius: 1.25rem;
+        left: 0;
-    padding-inline: 0.5rem;
+        background-color: var(--foreground-color);
-    margin-bottom: 0.5rem;
+    }
-    margin-inline: 1rem;
+    
-    color: black;
+    .nav {
-    font-size: 0.9em;
+        display: flex;
-    background: var(--accent-color)
+        justify-content: space-around;
-}
+    }
+    
+    .sidebar-btn {
+        display: inline-flex;
+        height: 3rem;
+        width: 4rem;
+        min-width: 4rem;
+        max-width: 4rem;
+        align-items: center;
+        justify-content: center;
+        border-radius: 1.25rem;
+        margin-bottom: 0.5rem;
+        margin-top: 0.5rem;
+        color: black;
+        background: var(--accent-color);
+        .text {
+            display: none;
+        }
+    }
 
-.btn:hover {
+    .btn:hover {
-    background-color: var(--hover-color);
+        background-color: var(--hover-color);
-}
+    }
 
-.icon {
+    .icon {
-    display: flex;
+        display: flex;
-    margin: 0.5rem;
+        margin: 0.5rem;
-    align-items: center;
+        align-items: center;
-    color: black;
+        color: black;
+    }
 }