@@ -148,9 +148,10 @@ class Menu extends Element {
148148 $style . addAll ( {
149149 ".menu-side" : {
150150 "position" : "absolute" ,
151- "width" : "200px " ,
151+ "width" : "216px " ,
152152 "height" : "100%" ,
153- "background" : "black" , //"var(--background)",
153+ "padding-left" : "24px" ,
154+ "background" : "var(--background)" ,
154155 "transition" : "transform 500ms cubic-bezier(0, 0, 0.2, 1)" ,
155156 "transform" : "translateX(0%)"
156157 } ,
@@ -163,10 +164,52 @@ class Menu extends Element {
163164 } ,
164165 ".menu-side.hidden ~ .menu-main" : {
165166 "margin-left" : "0px" ,
166- }
167+ } ,
168+ ".menu-button" : `
169+ -webkit-tap-highlight-color: transparent;
170+ background-color: transparent;
171+ cursor: pointer;
172+ user-select: none;
173+ vertical-align: middle;
174+ appearance: none;
175+ color: inherit;
176+ display: flex;
177+ -webkit-box-flex: 1;
178+ -webkit-box-pack: start;
179+ justify-content: flex-start;
180+ -webkit-box-align: center;
181+ align-items: center;
182+ position: relative;
183+ min-width: 0px;
184+ box-sizing: border-box;
185+ text-align: left;
186+ padding-top: 8px;
187+ padding-bottom: 8px;
188+ padding-left: 16px;
189+ padding-right: 16px;
190+ height: 46px;
191+ outline: 0px;
192+ border-width: 0px;
193+ border-style: initial;
194+ border-color: initial;
195+ border-image: initial;
196+ margin: 0px 0px 4px;
197+ text-decoration: none;
198+ transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
199+ border-radius: 4px;
200+ ` ,
201+ ".menu-button:hover" : `
202+ color: var(--main-color);
203+ ` ,
204+ ".menu-button.active" : `
205+ background-color: var(--main-color);
206+ color: var(--dark-color);
207+ box-shadow: rgba(var(--main-color-r), var(--main-color-g), var(--main-color-b), 0.2) 0px 10px 25px 0px;
208+ `
167209 } )
168210 this . $menus = { }
169211 this . _render_task = null
212+ this . route_handler_lock = null ;
170213 }
171214 toggle ( ) {
172215 super . toggle ( "hidden" )
@@ -191,30 +234,58 @@ class Menu extends Element {
191234 this . _render_task = requestAnimationFrame ( ( ) => {
192235 this . _render ( )
193236 } )
237+ var cur_key , cur_sub ;
238+ $router . before_handler ( async ( event ) => {
239+ if ( this . _render_task ) await new Promise ( ( resolve ) => {
240+ this . route_handler_lock = resolve
241+ } )
242+ var page = event . current_route
243+ var [ key , sub ] = page . slice ( 1 ) . split ( "/" , 2 )
244+ if ( cur_key == key && cur_sub == sub ) return ;
245+ for ( const [ $key , $val ] of Object . entries ( this . $menus ) ) {
246+ if ( $key . toLocaleLowerCase ( ) != key . toLocaleLowerCase ( ) ) {
247+ $val . $dom . removeClasses ( "active" )
248+ if ( $val . $child ) $val . $child . removeClasses ( "hidden" )
249+ continue
250+ }
251+ $val . $dom . classes ( "active" )
252+ if ( $val . $child ) $val . $child . classes ( "hidden" )
253+ console . log ( $val )
254+ }
255+ cur_key = key ;
256+ cur_sub = sub ;
257+ } )
194258 }
195259 _render ( ) {
196260 this . _render_task = null ;
197261 const menu = this . $menus
198262 while ( this . firstChild != null ) this . removeChild ( this . firstChild )
199263 for ( const [ $key , $val ] of Object . entries ( menu ) ) {
200- this . append (
201- createElement ( "div" ) . append (
202- Utils . isDOM ( $val . icon ) || $val . icon instanceof Element ? $val . icon : createElement ( "div" ) ,
203- createElement ( "p" ) . i18n ( `menu.${ $key } ` ) ,
204- )
205- )
264+ var root = createElement ( "div" ) . classes ( "menu-button" ) . append (
265+ Utils . isDOM ( $val . icon ) || $val . icon instanceof Element ? $val . icon : createElement ( "div" ) ,
266+ createElement ( "p" ) . i18n ( `menu.${ $key } ` ) ,
267+ ) . addEventListener ( "click" , ( ) => {
268+ $router . page ( `/${ $key } ` )
269+ } )
270+ this . append ( root )
271+ menu [ $key ] . $dom = root
206272 if ( $val . children . length == 0 ) continue
207273 var child = createElement ( "div" )
208274 for ( const $child of $val . children ) {
275+ var children = createElement ( "div" ) . append (
276+ createElement ( "span" ) ,
277+ createElement ( "p" ) . i18n ( `menu.${ $key } .${ $child . type } ` )
278+ )
279+ menu [ $key ] . children [ $child . type ] . $dom = children
209280 child . append (
210- createElement ( "div" ) . append (
211- createElement ( "span" ) ,
212- createElement ( "p" ) . i18n ( `menu.${ $key } .${ $child . type } ` )
213- )
281+ children
214282 )
215283 }
216284 this . append ( child )
285+ root . append ( SVGContainers . arrow_down )
286+ menu [ $key ] . $child = child
217287 }
288+ this . route_handler_lock ?. ( )
218289 }
219290}
220291
0 commit comments