Merge pull request #2 from killian31/chore_refacto

chore: popper menus
killian31 · Mar 16, 2024 · 12f6a91 · 12f6a91
2 parents bdb8e6a + 2049fad
commit 12f6a91
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 28 deletions.
diff --git a/Home.py b/Home.py
@@ -27,7 +27,7 @@
                     display: inline-block;
                     font-size: 16px;
                     margin: 4px 2px;
-                    transition-duration: 0.4s;
+                    transition-duration: 0.2s;
                     cursor: pointer;
                     border-radius: 12px;
                 }
@@ -40,14 +40,33 @@
     unsafe_allow_html=True,
 )
 
-st.write("##### Mathematics")
-if st.button("Norm Visualizer"):
-    switch_page("Norm Visualizer")
-if st.button("Parking Problem Solver (MDP)"):
-    switch_page("Parking Problem Solver")
-st.write("##### Statistics")
-st.write("##### Machine Learning")
-if st.button("Neural Network Separability"):
-    switch_page("Neural Network Separability")
-if st.button("Gradient Descent"):
-    switch_page("Gradient Descent")
+
+col1, col2, col3, col4 = st.columns(4)
+
+with col1:
+    math_menu = st.popover("Mathematics")
+    math_menu.page_link(
+        "pages/Norm_Visualizer.py", label="Norm Visualizer", use_container_width=True
+    )
+    math_menu.page_link(
+        "pages/Parking_Problem_Solver.py",
+        label="Parking Problem Solver (MDP)",
+        use_container_width=True,
+    )
+
+with col2:
+    stats_menu = st.popover("Statistics (Coming Soon)")
+
+with col3:
+    ml_menu = st.popover("Machine Learning")
+    ml_menu.page_link(
+        "pages/Neural_Network_Separability.py",
+        label="Neural Network Separability",
+        use_container_width=True,
+    )
+    ml_menu.page_link(
+        "pages/Gradient_Descent.py", label="Gradient Descent", use_container_width=True
+    )
+
+with col4:
+    algo_menu = st.popover("Algorithms (Coming Soon)")
diff --git a/README.md b/README.md
@@ -25,11 +25,43 @@ To add your app, add your file app in the folder `pages/`, named like `pages/You
 ```python
 st.set_page_config(page_title="Your Page Title")
 ```
+
 Then, in the `Home.py` file, add this below the right section:
 
 ```python
-if st.button("Your Page Title"):
-    switch_page("Your Page Title")
+<section>_menu.page_link(
+    "pages/Your_Page_Title.py",
+    label="Your Page Title",
+    use_container_width=True
+)
+```
+
+Paste the following piece of code to apply the styling for buttons:
+
+```python
+st.markdown(
+    """ <style>
+                button {
+                    background-color: #f63366;
+                    color: white;
+                    padding: 10px 20px;
+                    text-align: center;
+                    text-decoration: none;
+                    display: inline-block;
+                    font-size: 16px;
+                    margin: 4px 2px;
+                    transition-duration: 0.2s;
+                    cursor: pointer;
+                    border-radius: 12px;
+                }
+                button:hover {
+                    background-color: white;
+                    color: black;
+                    border: 2px solid #f63366;
+                }
+            </style>""",
+    unsafe_allow_html=True,
+)
 ```
 
 Finally, you can run `python3 build.py` to add the "Show code" button to your page.
diff --git a/pages/Gradient_Descent.py b/pages/Gradient_Descent.py
@@ -11,7 +11,8 @@
 st.set_page_config(page_title="Gradient Descent", page_icon="📉")
 # This is automatically generated, do not modify
 if st.button("Show code"):
-    st.code('''import math as math
+    st.code(
+        '''import math as math
 
 import matplotlib.pyplot as plt
 import numpy as np
@@ -76,7 +77,7 @@
                     display: inline-block;
                     font-size: 16px;
                     margin: 4px 2px;
-                    transition-duration: 0.4s;
+                    transition-duration: 0.2s;
                     cursor: pointer;
                     border-radius: 12px;
                 }
@@ -296,7 +297,8 @@ def update(frame):
         # components.html(ani.to_jshtml(fps=10), height=800)
         st.subheader("Classification boundary learning process")
         st.image("logistic_regression.gif")
-''')
+'''
+    )
 
 
 st.title("Gradient Descent")
@@ -352,7 +354,7 @@ def update(frame):
                     display: inline-block;
                     font-size: 16px;
                     margin: 4px 2px;
-                    transition-duration: 0.4s;
+                    transition-duration: 0.2s;
                     cursor: pointer;
                     border-radius: 12px;
                 }

diff --git a/pages/Neural_Network_Separability.py b/pages/Neural_Network_Separability.py
@@ -14,7 +14,8 @@
 )
 # This is automatically generated, do not modify
 if st.button("Show code"):
-    st.code('''import matplotlib.pyplot as plt
+    st.code(
+        '''import matplotlib.pyplot as plt
 import numpy as np
 import pandas as pd
 import plotly.graph_objects as go
@@ -40,7 +41,7 @@
                     display: inline-block;
                     font-size: 16px;
                     margin: 4px 2px;
-                    transition-duration: 0.4s;
+                    transition-duration: 0.2s;
                     cursor: pointer;
                     border-radius: 12px;
                 }
@@ -315,7 +316,8 @@ def forward(self, x):
             inside and outside the circle linearly (i.e. we can draw a hyperplane to 
             separate the points)."""
     )
-''')
+'''
+    )
 
 
 st.markdown(
@@ -329,7 +331,7 @@ def forward(self, x):
                     display: inline-block;
                     font-size: 16px;
                     margin: 4px 2px;
-                    transition-duration: 0.4s;
+                    transition-duration: 0.2s;
                     cursor: pointer;
                     border-radius: 12px;
                 }

diff --git a/pages/Norm_Visualizer.py b/pages/Norm_Visualizer.py
@@ -23,7 +23,7 @@
                     display: inline-block;
                     font-size: 16px;
                     margin: 4px 2px;
-                    transition-duration: 0.4s;
+                    transition-duration: 0.2s;
                     cursor: pointer;
                     border-radius: 12px;
                 }
@@ -103,7 +103,7 @@ def norm_Np(x, p):
                     display: inline-block;
                     font-size: 16px;
                     margin: 4px 2px;
-                    transition-duration: 0.4s;
+                    transition-duration: 0.2s;
                     cursor: pointer;
                     border-radius: 12px;
                 }

diff --git a/pages/Parking_Problem_Solver.py b/pages/Parking_Problem_Solver.py
@@ -7,7 +7,8 @@
 st.set_page_config(page_title="Parking Problem Solver", page_icon="🚗")
 # This is automatically generated, do not modify
 if st.button("Show code"):
-    st.code('''import random
+    st.code(
+        '''import random
 
 import matplotlib.pyplot as plt
 import numpy as np
@@ -102,7 +103,7 @@
                     display: inline-block;
                     font-size: 16px;
                     margin: 4px 2px;
-                    transition-duration: 0.4s;
+                    transition-duration: 0.2s;
                     cursor: pointer;
                     border-radius: 12px;
                 }
@@ -245,7 +246,8 @@ def plot_parking_lot(parking_lot, policy):
         N, cost_of_continuing, p_start, p_end, reward_func
     )
     plot_parking_lot(st.session_state.parking_lot, policy)
-''')
+'''
+    )
 
 
 problem_explanation = """
@@ -335,7 +337,7 @@ def plot_parking_lot(parking_lot, policy):
                     display: inline-block;
                     font-size: 16px;
                     margin: 4px 2px;
-                    transition-duration: 0.4s;
+                    transition-duration: 0.2s;
                     cursor: pointer;
                     border-radius: 12px;
                 }