Skip to content

Commit

Permalink
Improve sidebar UI/UX
Browse files Browse the repository at this point in the history
  • Loading branch information
@oxalorg
oxalorg committed Sep 14, 2024
1 parent a70f640 commit 6560bcf
Show file tree
Hide file tree
Showing 2 changed files with 44 additions and 24 deletions.
8 changes: 8 additions & 0 deletions src/co/gaiwan/compass/html/graphics.clj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,3 +91,11 @@
[:<> {:viewbox "0 -256 1536 1536"}
[:path {:d "m 1024,512 q 0,106 -75,181 -75,75 -181,75 -106,0 -181,-75 -75,-75 -75,-181 0,-106 75,-181 75,-75 181,-75 106,0 181,75 75,75 75,181 z m 512,109 V 399 q 0,-12 -8,-23 -8,-11 -20,-13 l -185,-28 q -19,-54 -39,-91 35,-50 107,-138 10,-12 10,-25 0,-13 -9,-23 -27,-37 -99,-108 -72,-71 -94,-71 -12,0 -26,9 L 1035,-4 q -44,-23 -91,-38 -16,-136 -29,-186 -7,-28 -36,-28 H 657 q -14,0 -24.5,8.5 Q 622,-239 621,-226 l -28,184 q -49,16 -90,37 L 362,-112 q -10,-9 -25,-9 -14,0 -25,11 Q 186,4 147,58 q -7,10 -7,23 0,12 8,23 15,21 51,66.5 36,45.5 54,70.5 -27,50 -41,99 L 29,367 Q 16,369 8,379.5 0,390 0,403 v 222 q 0,12 8,23 8,11 19,13 l 186,28 q 14,46 39,92 -40,57 -107,138 -10,12 -10,24 0,10 9,23 26,36 98.5,107.5 72.5,71.5 94.5,71.5 13,0 26,-10 l 138,-107 q 44,23 91,38 16,136 29,186 7,28 36,28 h 222 q 14,0 24.5,-8.5 Q 914,1263 915,1250 l 28,-184 q 49,-16 90,-37 l 142,107 q 9,9 24,9 13,0 25,-10 129,-119 165,-170 7,-8 7,-22 0,-12 -8,-23 -15,-21 -51,-66.5 -36,-45.5 -54,-70.5 26,-50 41,-98 l 183,-28 q 13,-2 21,-12.5 8,-10.5 8,-23.5 z"}]]
))

(o/defstyled sessions-icon :svg
([]
[:<> {:xmlns "http://www.w3.org/2000/svg" :fill "none" :viewBox "0 0 24 24" :stroke-width "1.5" :stroke "currentColor"} [:path {:stroke-linecap "round" :stroke-linejoin "round" :d "M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z"}]]))

(o/defstyled plus-icon :svg
([]
[:<> {:xmlns "http://www.w3.org/2000/svg" :fill "none" :viewBox "0 0 24 24" :stroke-width "1.5" :stroke "currentColor"} [:path {:stroke-linecap "round" :stroke-linejoin "round" :d "M12 4.5v15m7.5-7.5h-15"}]]))
60 changes: 36 additions & 24 deletions src/co/gaiwan/compass/html/navigation.clj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,17 @@
:href "#"}]
children)))

(o/defstyled menu-panel-user :div
:flex :items-center :gap-2
[:a {:text-decoration "underline"}]
([user]
[:<>
(when user
[:<>
[c/avatar (user/avatar-css-value user)]
"Signed in as " (:public-profile/name user) "." [:a {:href (url-for :logout/index)} "Sign out"]])]
))

(o/defstyled menu-panel :nav
:bg-surface-2
:h-screen
Expand All @@ -58,55 +69,55 @@
[:svg {:width t/--font-size-5
:height t/--font-size-5}]
[:.bar :flex :justify-between :p-3]
[:li :font-size-3
:line-height-5 ;; FIXME
:border-b :border-solid :border-surface-4
:px-4 :py-1
[:li :font-size-3 :my-4
[:>a
:block :bg-surface-1 :hover:bg-surface-3
:px-4 :py-4 :mx-4 :my-2 :rounded-lg
:no-underline]
{:font-size t/--font-size-3}
[:&:last-child :border-0]
[:&.discord-button :border-0]]
[c/avatar {:height "2rem"}]
[:.discord-button :flex :justify-center :py-3
[#{:a :a:visited} {:color t/--gray-2}]]
[:.user :flex :items-center :gap-2
[:a {:text-decoration "underline"}]]
[:a:visited {:color t/--link}]
["li:has(.notifier-dot)" :flex :gap-1]
["a:has(.notifier-dot)" :flex :gap-1]
[:svg :inline :mr-1 {:height "1em" :margin-bottom "-0.15em"}
[:path {:fill t/--text-1}]]
[:.bottom :fixed :bottom-0 :left-0
:w-full :mb-3
:text-center

[:p :m-2]]
([user]
[:<>
[:div.bar
[:div.user
(when user
[:<>
[c/avatar (user/avatar-css-value user)]
"Signed in as " (:public-profile/name user) "." [:a {:href (url-for :logout/index)} "Sign out"]])]
[menu-panel-user user]
[:button {:cx-toggle "menu-open" :cx-target "body"}
[graphics/cross]]]
#_[:pre (pr-str user)]
[:ul
[:li.discord-button
(when-not user
[auth/discord-button {:text "Sign in with Discord"}])]
(when-not user
[:li.discord-button
[auth/discord-button {:text "Sign in with Discord"}]])
(when user
(if-let [ticket (user/assigned-ticket user)]
[:li "Ti.to ticket " [:strong (:tito.ticket/reference ticket)]]
[:li
[:div [:a {:href (url-for :ticket/connect)
:on-click "document.body.classList.toggle('menu-open')"}
[:strong "Claim your Ti.to ticket for full access"]]]
[:div.notifier-dot]]))
[:a {:href (url-for :ticket/connect)
:on-click "document.body.classList.toggle('menu-open')"}
[:strong "Claim your Ti.to ticket for full access"]
[:div.notifier-dot]]]))

[:li
[:a
{:href (url-for :sessions/index), :on-click "document.body.classList.toggle('menu-open')"}
[graphics/sessions-icon]
"Sessions & Activities"]]
[:li
[:a
{:href (url-for :session/new), :on-click "document.body.classList.toggle('menu-open')"}
[graphics/plus-icon]
"Create Activity"]]
[:li
[:a
{:href (url-for :profile/edit), :on-click "document.body.classList.toggle('menu-open')"}
Expand All @@ -120,10 +131,11 @@
:hx-target "#modal"
:on-click "document.body.classList.toggle('menu-open')"}
[graphics/scan-icon] "Add Contact"]]
[:li
[:a
{:href (url-for :session/new), :on-click "document.body.classList.toggle('menu-open')"}
"Create Activity"]]

[:li [:a {:href "https://github.com/heartofclojure/heartofclojure-site-2024/wiki/Attendee-Guide-2024"
:target "_blank"
}
"Attendee Guide"]]
[:div.bottom
[:p "Proudly made by the " [:a {:href "https://gaiwan.co" :target "_blank"} "Gaiwan Team"] " and contributors."]
[:p [:a {:href "https://github.com/GaiwanTeam/compass" :target "_blank"} [graphics/github-icon] "GaiwanTeam/compass"]]]
Expand Down

0 comments on commit 6560bcf

Please sign in to comment.