feat: lots of work

frontend/src/Layouts/Navbar.elm

@@ -116,16 +116,16 @@ navbarContainer device content =
             ]
             (case ( device.class, device.orientation ) of
                 ( Phone, Portrait ) ->
-                    [ mobileNavbar, mobileFooterIcons ]
+                    [ mobileIconMaker, mobileNavbar, mobileFooterIcons ]
 
                 ( Phone, Landscape ) ->
-                    [ mobileNavbar, mobileFooterIcons ]
+                    [ mobileIconMaker, mobileNavbar, mobileFooterIcons ]
 
                 ( Tablet, Portrait ) ->
-                    [ mobileNavbar, mobileFooterIcons ]
+                    [ mobileIconMaker, mobileNavbar, mobileFooterIcons ]
 
                 _ ->
-                    [ desktopNavbar, desktopFooterIcons ]
+                    [ desktopIconMaker, desktopNavbar, desktopFooterIcons ]
             )
         , el
             [ E.width fill
@@ -171,46 +171,9 @@ desktopNavbar =
         [ alignLeft
         , height fill
         , F.color colourTheme.textLightGrey
+        , scrollbarY
         ]
         [ column
-            [ centerX
-            , E.width <| px desktopBarWidth
-            ]
-            [ row
-                (nonHighlightedTitleFormat
-                    ++ [ centerX
-                       ]
-                )
-                [ E.image
-                    [ spacing 2
-                    , E.width <| px 140
-                    , centerX
-                    , paddingEach
-                        { top = 20
-                        , right = 0
-                        , bottom = 20
-                        , left = 0
-                        }
-                    ]
-                    { src = "assets/logo.png"
-                    , description = ""
-                    }
-                ]
-            , el
-                [ E.width <| px 140
-                , alignTop
-                , centerX
-                , D.widthEach
-                    { bottom = 1
-                    , top = 0
-                    , left = 0
-                    , right = 0
-                    }
-                , D.color colourTheme.textDarkGrey
-                ]
-                none
-            ]
-        , column
             [ padding 20, alignTop, alignLeft ]
             [ column
                 [ F.bold
@@ -233,6 +196,90 @@ desktopNavbar =
         ]
 
 
+desktopIconMaker : Element msg
+desktopIconMaker =
+    column
+        [ centerX
+        , E.width <| px desktopBarWidth
+        ]
+        [ row
+            (nonHighlightedTitleFormat
+                ++ [ centerX
+                   ]
+            )
+            [ E.image
+                [ spacing 2
+                , E.width <| px 140
+                , centerX
+                , paddingEach
+                    { top = 20
+                    , right = 0
+                    , bottom = 20
+                    , left = 0
+                    }
+                ]
+                { src = "assets/logo.png"
+                , description = ""
+                }
+            ]
+        , el
+            [ E.width <| px 140
+            , alignTop
+            , centerX
+            , D.widthEach
+                { bottom = 1
+                , top = 0
+                , left = 0
+                , right = 0
+                }
+            , D.color colourTheme.textDarkGrey
+            ]
+            none
+        ]
+
+
+mobileIconMaker : Element msg
+mobileIconMaker =
+    column
+        [ centerX
+        , E.width <| px mobileBarWidth
+        ]
+        [ row
+            (nonHighlightedTitleFormat
+                ++ [ centerX
+                   ]
+            )
+            [ E.image
+                [ spacing 2
+                , E.width <| px 35
+                , centerX
+                , paddingEach
+                    { top = 10
+                    , right = 0
+                    , bottom = 10
+                    , left = 0
+                    }
+                ]
+                { src = "assets/logo_lambda.png"
+                , description = ""
+                }
+            ]
+        , el
+            [ E.width <| px 20
+            , alignTop
+            , centerX
+            , D.widthEach
+                { bottom = 1
+                , top = 0
+                , left = 0
+                , right = 0
+                }
+            , D.color colourTheme.textDarkGrey
+            ]
+            none
+        ]
+
+
 mobileNavbar : Element msg
 mobileNavbar =
     column
@@ -242,44 +289,6 @@ mobileNavbar =
         , scrollbarY
         ]
         [ column
-            [ centerX
-            , E.width <| px mobileBarWidth
-            ]
-            [ row
-                (nonHighlightedTitleFormat
-                    ++ [ centerX
-                       ]
-                )
-                [ E.image
-                    [ spacing 2
-                    , E.width <| px 35
-                    , centerX
-                    , paddingEach
-                        { top = 10
-                        , right = 0
-                        , bottom = 10
-                        , left = 0
-                        }
-                    ]
-                    { src = "assets/logo_lambda.png"
-                    , description = ""
-                    }
-                ]
-            , el
-                [ E.width <| px 20
-                , alignTop
-                , centerX
-                , D.widthEach
-                    { bottom = 1
-                    , top = 0
-                    , left = 0
-                    , right = 0
-                    }
-                , D.color colourTheme.textDarkGrey
-                ]
-                none
-            ]
-        , column
             [ padding 5
             , centerY
             , centerX
@@ -406,62 +415,88 @@ mobilePagesButtonMaker name =
 
 desktopFooterIcons : Element msg
 desktopFooterIcons =
-    row
+    column
-        [ alignBottom
+        [ E.width <| px 140
-        , E.width fill
+        , alignTop
+        , centerX
+        , D.widthEach
+            { bottom = 0
+            , top = 1
+            , left = 0
+            , right = 0
+            }
+        , D.color colourTheme.textDarkGrey
         ]
         [ row
-            [ centerX
+            [ alignBottom
-            , centerY
             , E.width fill
-            , E.height fill
+            , centerX
-            , spacing 20
-            , paddingEach
-                { top = 10
-                , bottom = 10
-                , left = 0
-                , right = 0
-                }
             ]
-            -- Use the list of social media details here
+            [ row
-            (List.map
+                [ centerX
-                footerImageMaker
+                , centerY
-                [ gitlabDetails
+                , E.width fill
-                , twitterDetails
+                , E.height fill
-                , mastodonDetails
+                , spacing 20
-                , discordDetails
+                , paddingEach
+                    { top = 25
+                    , bottom = 10
+                    , left = 0
+                    , right = 0
+                    }
                 ]
-            )
+                (List.map
+                    footerImageMaker
+                    [ gitlabDetails
+                    , twitterDetails
+                    , mastodonDetails
+                    , discordDetails
+                    ]
+                )
+            ]
         ]
 
 
 mobileFooterIcons : Element msg
 mobileFooterIcons =
     column
-        [ alignBottom
+        [ E.width <| px 20
-        , E.width fill
+        , alignTop
+        , centerX
+        , D.widthEach
+            { bottom = 0
+            , top = 1
+            , left = 0
+            , right = 0
+            }
+        , D.color colourTheme.textDarkGrey
         ]
         [ column
-            [ centerX
+            [ alignBottom
-            , centerY
             , E.width fill
-            , E.height fill
-            , spacing 10
-            , paddingEach
-                { top = 10
-                , bottom = 10
-                , left = 0
-                , right = 0
-                }
             ]
-            (List.map
+            [ column
-                footerImageMaker
+                [ centerX
-                [ gitlabDetails
+                , centerY
-                , twitterDetails
+                , E.width fill
-                , mastodonDetails
+                , E.height fill
-                , discordDetails
+                , spacing 10
+                , paddingEach
+                    { top = 10
+                    , bottom = 10
+                    , left = 0
+                    , right = 0
+                    }
                 ]
-            )
+                (List.map
+                    footerImageMaker
+                    [ gitlabDetails
+                    , twitterDetails
+                    , mastodonDetails
+                    , discordDetails
+                    ]
+                )
+            ]
         ]